I'm Ryot

一步步实现Amd-loader(一)

javascript 模块

通常,在js中模块应该是IIFE-立即执行调用函数表达式(Immediately-Invoked-Function-Expressions)运行私有域–即防止变量和方法污染全局变量和方法.格式如下

1
2
3
4
5
6
7
8
9
(function() {
    // 声明私有变量和方法
    return {
      // 声明公共方法和变量
    }
})();

下面我们利用模块化设计一个小的测试程序,流程如下:

主要模块( mainModule ) –> 计算模块( calcModule ) –> [增加模块( addModule ),减少模块(minusModule)]

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>一步步理解Requirejs 异步模块化编程</title>
  </head>
  <body>
    <button id="btnAdd" type="button" name="button">增加</button>
    <button id="btnMinus" type="button" name="button">减少</button>
    <script src="scripts/main.js" charset="utf-8"></script>
  </body>
</html>

main.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
(function (global) {
  /**
   * 封装事件处理
   * @param  {[type]}   el       [description]
   * @param  {[type]}   type     [description]
   * @param  {Function} callback [description]
   * @return {[type]}            [description]
   */
  var $emit = function (el,type,callback) {
    if (el.addEventListener) {
      el.addEventListener(type,callback);
    } else if(el.attachEvent){
      el.attachEvent("on"+type,callback);
    }else {
      el[type] = callback;
    }
  };
  global.$emit = $emit;
  /**
   * 这是定义模块add
   */
  var addModule = (function () {
    return function () {
      console.log("i'm add module ....");
    }
  })();
  /**
   * 这是定义模块minus
   */
  var minusModule = (function () {
    return function () {
      console.log("I'm minu module....");
    }
  })();
/**
 * 这是计算模块,依赖模块add 和模块minus
 * @type {[type]}
 */
  var calcModule = (function (add,minus) {
    return {
      add: add,
      minus: minus
    }
  })(addModule,minusModule);
  /***
   *这里是主模块
   */
  $emit(document.getElementById('btnAdd'),"click",function () {
    calcModule.add();
  });
  $emit(document.getElementById('btnMinus'),"click",function () {
     calcModule.minus();
  });
})(this);
javascript