码迷,mamicode.com
首页 > Web开发 > 详细

一个极为简单的requirejs实现

时间:2016-10-19 20:23:16      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:

require和 sea的源码分析,我之前的博客有写过, 今天我想分享的是一个很简单的核心代码(不带注释和空行大概60行), 没有容错判断。

require.js

require函数实现用一句话概括:

依次加载require的模块,然后监测script的onload事件,判断所有模块加载成功,执行require的callback, 如果只带一个参数且不是数组,就是加载成功后return 模块。

 1 //标记已经加载成功的个数
 2 var REQ_TOTAL = 0;
 3 //模块导出
 4 window.exports = {};
 5 //记录各个模块的顺序
 6 var exp_arr = [];
 7 
 8 //判断是否数组
 9 function isArray(param) {
10     return param instanceof Array;
11 }
12 
13 //require 真正实现
14 function require(arr, callback) {
15 
16     var req_list;
17 
18     if(isArray(arr)) {
19         req_list = arr;
20     } else {
21         req_list = [arr];
22     }
23     var req_len = req_list.length;
24 
25     //模块逐个加载
26     for(var i=0;i<req_len;i++) {
27         var req_item = req_list[i];
28 
29         var $script = createScript(req_item, i);
30 
31         var $node = document.querySelector(‘head‘);
32 
33         (function($script) {
34             //检测script 的onload事件
35             $script.onload = function() {
36                 REQ_TOTAL++;
37 
38                 var script_index = $script.getAttribute(‘index‘);
39 
40                 exp_arr[script_index] = exports;
41 
42                 window.exports = {};
43 
44                 //所有链接加载成功后,执行callback
45                 if(REQ_TOTAL == req_len) {
46                     callback && callback.apply(exports, exp_arr);
47 
48              
49 } 50 51 } 52 53 $node.appendChild($script); 54 })($script); 55 56 } 57 58 } 59 60 //创建一个script标签 61 function createScript(src, index) { 62 var $script = document.createElement(‘script‘); 63 64 $script.setAttribute(‘src‘, src); 65 $script.setAttribute(‘index‘, index); 66 67 return $script; 68 }

 

然后写了2个导出模块的js文件, 只写了最简单的exports实现

define.js

1 exports.define = {
2     topic: ‘my export‘,
3     desc: ‘this is other way to define ‘,
4     sayHello: function() {
5         console.log(‘topic ‘ + this.topic + this.desc);
6     }
7 }

define2.js

1 exports.define = {
2     name: ‘xm‘,
3     age: 22,
4     info: function() {
5         console.log(‘topic ‘ + this.name + this.age);
6     }
7 }

 

然后测试demo很简单

1 //测试demo
2 require([‘../res/define.js‘, ‘../res/define2.js‘], function(def, def2) {
3     def.define.sayHello();
4 
5     def2.define.info();
6 });

 

demo地址 :https://skyweaver213.github.io/requirejs-demo/example/dev/demo.html

github地址:https://github.com/skyweaver213/requirejs-demo

 

一个极为简单的requirejs实现

标签:

原文地址:http://www.cnblogs.com/skyweaver/p/5978294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!