AMD 和 CMD

2023年8月31日 197次阅读 来源: 见风仍然是风

剧本的无壅塞加载

moduleA.js 代码

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

moduleB.js 代码

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

同步加载

<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：是不是在许可的状况下异步实行该剧本。该属性关于内联剧本无作用 (即没有src属性的剧本）。

defer 示例

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

输出

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

async 示例

异步加载

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

输出

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 的区分有哪些？

    原文作者：见风仍然是风
    原文地址: https://segmentfault.com/a/1190000017823350
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞