requirejs 的使用方法
在页面中引入 requirejs
定义其他的模块
在 main.js 中引入其他的 js 模块
具体代码如下:
- // 第一步: 在 html 中引入 require.js
- <script src="js/require.js" data-main="js/main"></script>
- // 第二步, 定义其他的模块
- // moduleA.js
- define(function(){
- return {
- GUIDEIDGET: false,
- NAVWIDGET: false,
- SCREENWIDGET: false,
- READMODE: false
- };
- });
- // 第三步: 在 main.js 中引入 moduleA.js
- require(["moduleA"],function(moduleA){
- console.log(moduleA.GUIDEIDGET);
- });
猜测 requirejs 的实现步骤
在页面中引入 requirejs, 并指定 main.js 的路径.
requirejs 分析 main.js 的配置及模块引入
分析如下:
requirejs 中, 定义了模块定义的方法 define,
取得 script 标签上的 data-main 属性的值.
并使用 require 函数加载到页面中.
而在 main.js 中, require 函数可能加载了多个模块.
当所有的模块都加载完毕后, 调用 callback 函数.
实现 require 函数
- // 这是简易的 require.js
- /**
- * @descrition 实现 js 的加载
- * @param arr js 的路径数组
- * @param callback 当所有的 js 都加载完后的回调函数
- * @date 2018-09-13
- * @Author Yike
- */
- // 导出方法的简陋实现
- window.exports = {};
- function require(arr,callback){
- if(!(arr instanceof Array)){
- console.error("arr is not a Array");
- return false;
- }
- // REQ_TOTAL 标记已加载成功个数
- // EXP_ARR 记录各个模块的顺序
- // REQLEN 定义共需要加载多少个 js
- var REQ_TOTAL = 0,
- EXP_ARR = [],
- REQLEN = arr.length;
- console.log(arr);
- arr.forEach(function(req_item,index,arr){
- // 创建 script 的标签并放到页面中
- var $script = createScript(req_item,index);
- document.body.appendChild($script);
- (function($script){
- // 检测 script 的 onload 事件
- $script.onload = function(){
- REQ_TOTAL++;
- var script_index = $script.getAttribute('index');
- // 把导出对象放到数组中
- EXP_ARR[script_index] = exports;
- // 重置对象
- window.exports = {};
- // 所有 js 加载成功后, 执行 callback 函数.
- if (REQ_TOTAL == REQLEN) {
- callback && callback.apply(exports, EXP_ARR);
- }
- }
- })($script);
- })
- }
- // 创建一个 script 标签
- function createScript(src, index){
- var $s = document.createElement('script');
- $s.setAttribute('src',src);
- $s.setAttribute('index',index);
- return $s;
- }
测试
定义 A 模块
- // moduleA.js
- exports.define = {
- name: 'ModuleA',
- desc: 'this is other way to define',
- sayHello: function() {
- console.log(this.name + ":" + this.desc);
- }
- }
定义 B 模块
- // moduleB.js
- exports.define = {
- name: 'ModuleB',
- desc: 'this is other way to define',
- sayWorld: function() {
- console.log(this.name + ":" + this.desc);
- }
- }
在页面中引入刚才写的 require.js
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <script src="require.js"></script>
- <script src="main.js"></script>
- </body>
- </html>
至此, 就完成了一个简单的 requirejs.
还有许多需要优化, 比如:
自动识别 main.js
js 模块的异步加载, 这里的实现是按照顺序加载的 js.
模块之间的依赖关系. 比如 moduleA 依赖 ModuleB
等等...
来源: http://www.qdfuns.com/article/27225/bded6945b311159e533c651985b0cdb7.html