javascript 模块化编程-自执行函数写法

发表于   |   分类于   |     |   阅读次数

紧接上一篇中，对js模块化编程里的面向对象编程的写法、改进为自执行函数的写法。

本文所介绍的完整js代码：github

面向对象写法

上一篇中，面向对象的写法如下：

1
2
3
4
5
6
7
8
9
10
11
12
//面向对象写法
var Func={
    func1:function(){
        console.log('func1');
    },
    func2:function(){
        console.log('func2');
    },
    func3:function(){
        console.log('func3');
    }
};

自执行函数写法

将面向对象的写法改为自执行函数的写法后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//自执行函数的写法
var Func = (function(){
  var func1,
      func2,
      func3;
  func1 = function(html){
    console.log('func1');
  };
  func2 = function(str,len){
    console.log('func1');
  };
  func3 = function(str){
    console.log('func1');
  };
  return {
    func1 : func1,
    func2 : func2,
    func3 : func3
  };
})();

整个js文件结构

自执行函数写法后的整个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
61
62
63
64
65
66
67
68
69
//开头加上分好，避免js合并后相互影响
;(function(window, undefined){
  //一、定义全局数据
  var Data = '';
  //二、首页JS功能
  var Index = (function(){
    var init;
    //init初始化
    init = function(){
      //...
    };
    return {
      init : init
    };
  })();
  //三、功能模块
  var Func = (function(){
    var func1,
        func2,
        func3;
    func1 = function(html){
      console.log('func1');
    };
    func2 = function(str,len){
      console.log('func1');
    };
    func3 = function(str){
      console.log('func1');
    };
    return {
      func1 : func1,
      func2 : func2,
      func3 : func3
    };
  })();
  //四、工具模块
  var Tool = (function(){
    var tool1,
        tool2,
        tool3;
    tool1 = function(obj){
      //...
    };
    tool2 = function(obj){
      //...
    };
    tool3 = function(obj){
      //...
    };
    return {
      tool1 : tool1,
      tool2 : tool2,
      tool3 : tool3
    };
  })();
  //五、执行入口
  $(function(){
    Index.init();
  });
})(window);

当然，以上说的js模块化编程，更多的只是在一个js文件中的模块化写法。
对于多个js文件之间的模块化，更多地是使用模块化工具 sea.js、require.js。
详情请参考之前写过的一篇学习文章 require.js 实例入门 ，这里就不重复了。

本文所介绍的完整js代码：github