{ Hello Magento 2 }

解决 Magento 2 应用问题,更注重深度挖掘。(ง •̀_•́)ง

0%

关于 RequireJS

文章没有什么特别之处,算是对 Magento 2 and RequireJS (翻译)一点补充,主要是为了记录备查。 RequireJS 主要做的就是模块化异步加载 JS Js 模块化为了便于维护和团队协作。 参考: RequireJS结构分析,实现自己的模块加载系统 这篇文章提到 RequireJS 通过 script dom element 方法来异步加载 js 模块。RequireJS 在代码层面控制模块的加载顺序(依赖) js 异步加载,是为了解决 js 加载时阻塞网页上其他资源的下载的问题,为了让页面内容更早展现在用户面前。 参考: 浏览器线程阻塞和无阻塞加载脚本的理解 JavaScript阻塞剖析与改善 在网页中异步加载javascript 例子

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 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

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 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);
});
1
2
3
4
5
6
7
8
9
10
//File: scripts/helper/world.js
define([], function(){
var o = {};
o.getMessage = function()
{
return 'Hello Module World';
}
console.log("I am first load");
return o;
});

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

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

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