使用 Jsdelivr CDN 的 ES6 动态 JavaScript 加载

5.00/5 (3投票s)

2016 年 10 月 21 日

2分钟阅读

10119

100

一个实验性的小型库 (3kb)，用于基于库名称从 jsdelivr.com 动态加载任何 JS 库。也支持特定版本

Experimental

什么是 Script-y

一个实验性的小型库 (3kb)，用于基于库名称从 jsdelivr.com 动态加载任何 JS 库。也支持特定版本。项目源代码在 Github 上。

该库使用 ES6 Custom Elements 构建，并非所有浏览器都支持目前，它依赖于 jsdilvr CDN 并使用其 API 按名称搜索任何著名的库（最接近的值），并将其动态注入到您的页面中。

再次强调，这是一个实验性库，仅用于测试目的。它使用糟糕的同步 HTTP 调用（已被弃用）来模拟 script tag 所做的相同阻塞行为。有关 script 标签和加载行为的更多信息，请参见此处。

How to

在头部添加小巧的 script 标签

 <script src="scripty.js">script>

使用 packages 属性创建具有所需库名称的 scripty 标签

<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。