AMD 和 CMD

时间 2019-12-05

标签 amd cmd 繁體版

原文原文链接

脚本的无阻塞加载

moduleA.js 代码html

console.log("I'm A");
/*
此处能够放jquery源码
使得该文件变大，以便异步加载时看效果
*/

moduleB.js 代码jquery

console.log("I'm B");

同步加载app

<body>
    <script src="moduleA.js" onload="console.log('A loaded')"></script>
    <script src="moduleB.js" onload="console.log('B loaded')"></script>
</body>

输出异步

I'm A
A loaded
I'm B
A loaded

defer 和 async

defer：在文档完成解析后，触发 DOMContentLoaded 事件前执行。若是缺乏 src 属性（即内嵌脚本），该属性不该被使用，由于这种状况下它不起做用。对动态嵌入的脚本使用 async=false 来达到相似的效果。async

async：是否在容许的状况下异步执行该脚本。该属性对于内联脚本无做用 (即没有src属性的脚本）。ui

defer 示例

<body>
    <script defer src="moduleA.js" onload="console.log('A loaded')"></script>
    <script src="moduleB.js" onload="console.log('B loaded')"></script>
</body>

输出url

I'm B
B loaded
I'm A
A loaded

async 示例

异步加载code

<body>
    <script>
        loadScript("moduleA.js", "async A loaded");
        loadScript("moduleB.js", "async B loaded");

        function loadScript(url, text) {
            var srcEle = document.createElement("script");
            srcEle.src = url;
            srcEle.async = true;
            srcEle.onload = function () {
                console.log(text);
            };
            document.body.appendChild(srcEle);
        }
    </script>
</body>

动态建立的script标签，async默认为true;

输出htm

I'm B
async B loaded
I'm A
async A loaded

相同之处：事件

加载文件时不阻塞页面渲染
使用这两个属性的脚本中不能调用document.write方法
有脚本的onload的事件回调

不一样之处

每个async属性的脚本都在它下载结束以后马上执行，同时会在window的load事件以前执行。因此就有可能出现脚本执行顺序被打乱的状况；
每个defer属性的脚本都是在页面解析完毕以后，按照本来的顺序执行，同时会在document的DOMContentLoaded以前执行

AMD和CMD

AMD

RequireJS的标准

特色：依赖前置、预执行

define(['./a', './b'], function(a, b) {
    //运行至此，a.js和b.js已经下载完成
    //a模块和b模块已经执行完
    a.doing();
    b.doing();
});

CMD

SeaJS的标准

特色：依赖就近、懒执行

define(function(require, exports, module) {
    var a = require("./a");
    //等待a.js下载、执行完
    a.doing();
    var b = require("./b");
    //等待b.js下载、执行完
    b.doing();
});

reference

AMD 和 CMD 的区别有哪些？

1. AMD和CMD
2. CommonJS和AMD/CMD
3. CommonJS、AMD和CMD
4. AMD, CMD, CommonJS和UMD
5. AMD和CMD规范
6. AMD && CMD
7. AMD & CMD
8. AMD&CMD
9. AMD、CMD、CommonJs和es6对比
10. AMD、CMD、CommonJs和ES6对比
更多相关文章...
• XLink 和 XPointer 语法 - XLink 和 XPointer 教程
• Kotlin 类和对象 - Kotlin 教程
• IntelliJ IDEA 代码格式化配置和快捷键
• 适用于PHP初学者的学习线路和建议