在现代Web开发中，JavaScript库是构建交互式和功能丰富的网站不可或缺的部分。随着项目需求的增长，引入的库数量也在增加，这不仅增加了页面加载时间，还可能导致浏览器兼容性问题。为了解决这些问题，本文将介绍一种动态加载JS库的方法，它利用了ES6自定义元素和jsdelivrCDN服务。
这个项目是一个实验性的库，它允许开发者根据库名称动态地从jsdelivrCDN加载任何JS库。它支持加载特定版本的库，并且可以在加载完成后执行回调函数。这个库使用同步HTTP调用来模拟script标签的阻塞行为，虽然这种方法已经被弃用，但在这个实验性项目中，它有助于模拟实际的加载过程。
要在页面中使用这个库，首先需要在页面的头部添加一个script标签，指向scripty.js文件：
<script src="scripty.js"></script>
接下来，创建一个scripty标签，并使用packages属性指定所需的库名称：
<script-y packages="jquery"></script-y>
如果库名称包含多个单词（例如：angular icons或angular translate），只需在名称中包含空格，它将自动被替换为*，因为搜索API使用minimatch来找到最接近的值。
<script-y packages="jquery*ui"></script-y>
加载特定版本的库也是可能的，只需在库名称后使用@符号：
<script-y packages="jquery@3.1.0"></script-y>
脚本按照顺序加载，如果不同库之间存在依赖关系，只需按照顺序放置它们即可。
<script-y packages="angularjs,angular translate"></script-y>
如果需要，还可以使用locals属性加载一些本地JS文件（总是在packages完成后加载）：
<script-y packages="jquery" locals="myscript.js"></script-y>
如果需要，可以添加一个回调函数，尽管脚本以阻塞机制运行，这意味着任何在scripty之后的脚本都将按照正常顺序执行。
<script-y packages="jquery" locals="external.js" oncomplete="amCallbackFunc()"></script-y>
为什么使用同步调用？因为DOMContentLoaded事件只等待HTML和脚本，但不会等待通过document.createElement创建的脚本（称为动态脚本）。加载过程相当慢，因为组件流程如下：
克隆项目，运行npm install，然后运行gulp watch。要查看加载的版本（如果只提到了库名称），请打开控制台，它将显示下载的版本，例如jquery@3.1.1。