使用Jsdelivr加载ES6动态 Javascript

分享于 

4分钟阅读

Web开发

  繁體

Experimental

什么是脚本?

基于lib名称动态加载任意JS库的小型( 3kb ) 实验。 还支持特定版本项目源位于 Github

这个想法

This的ES6定制元素,它不支持所有浏览器的,它依赖于jsdilvr,并使用它的 来搜索任何已知的库,并将它的动态插入你的页面。

警告

再一次,这是一个实验库,只是为了测试目的而做的。 它使用讨厌的同步HTTP调用 ( 它已经是 deprecate。) 来模拟 script tag 所做的同样的阻塞行为。 关于脚本标记和加载行为的更多信息来自于这里的

How to

用法

在头部添加小的小 script 标记:

<scriptsrc="scripty.js">script>

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

<script-ypackages="jquery"></script-y>

如果库名称得到 2个单词( 示例: 如果你的名字是 Angular的话,你就可以用 * 作为搜索api来代替它。 在执行搜索时,将第一个项作为最接近的值。

<script-ypackages="jquery*ui"></script-y>

加载特定版本也可以在库名称后使用 @

<script-ypackages="jquery@3.1.0"></script-y>

脚本是按顺序加载的,因这里如果在不同的库之间存在依赖关系,则将它们按顺序。

<script-ypackages="angularjs,angular translate"></script-y>

如果需要,还可以使用 locals 属性(。packages 完成后总是加载) 加载一些本地JS文件。

<script-ypackages="jquery"locals="myscript.js"></script-y>

如果需要的脚本在一个阻塞机制中运行,那么将在scripty中执行一个回调函数。

<script-ypackages="jquery"locals="external.js"oncomplete="amCallbackFunc()"></script-y>

便笺

因为 DOMContentLoaded 只等待HTML和脚本,而不会等待 document.createElement ( 称为动态脚本) 创建的脚本,所以同步调用。

加载过程非常缓慢,因为组件流如下所示:

  • 呈现组件并读取从HTML传递的所有内容并设置它的属性。
  • 点击 jsdilvr api寻找所需的库并检索所有将用于获取库的信息。
  • 创建脚本后,创建 script 标记并添加到 DOM。
  • 在整个DOM就绪时调用回调方法,使用 DOMContentLoaded

运行示例

克隆项目,运行全能的npm install,然后运行 gulp watch

如果你只提到了库名称,请打开控制台,打开控制台,它会提到下载的版本是哪个版本。

路线图

  • 使用适当回调的阻塞机制( Async )的替代方法( 进行中)
  • 第一次下载内容,并在即将到来的请求中将它的加载到本地
  • 欢迎任何建议

JAVA  Javascript  动态  es6  CDN  jsdelivr  
相关文章