关于 RequireJS

文章没有什么特别之处,算是对 Magento 2 and RequireJS (翻译)一点补充,主要是为了记录备查。

RequireJS 主要做的就是模块化异步加载 JS

Js 模块化为了便于维护和团队协作。

参考:
RequireJS结构分析,实现自己的模块加载系统
这篇文章提到 RequireJS 通过 script dom element 方法来异步加载 js 模块。RequireJS 在代码层面控制模块的加载顺序(依赖)

js 异步加载,是为了解决 js 加载时阻塞网页上其他资源的下载的问题,为了让页面内容更早展现在用户面前。

参考:
浏览器线程阻塞和无阻塞加载脚本的理解
JavaScript阻塞剖析与改善
在网页中异步加载javascript

例子

<!-- File: require-example.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

那么 require.js 会首先加载 scripts/main.js

<!-- File: scripts/main.js -->
console.log('load main');
require.config({
    paths: {
        "hello": "helper/world"
    },
});
requirejs(['hello'], function(helper_world) {
    var message = helper_world.getMessage();
    console.log("I am second");
    alert(message);
});
//File: scripts/helper/world.js
define([], function(){
    var o = {};
    o.getMessage = function()
    {
        return 'Hello Module World';
    }
    console.log("I am first load");
    return o;
});

那么在控制台我们应该看到的是:

main.js:5  load main
world.js:8 I am first load
main.js:13 I am second

验证通过 script dom element 异步加载。

发表评论

电子邮件地址不会被公开。 必填项已用*标注