js 模块化编程

2018-9-14    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

了解一个技术，首先要了解这个技术产生的背景及解决的问题，而不应该只是单纯的知道该怎么用。之前的状态可能就是只是为了了解而了解，并不知道实际产生的原因及带来的好处，所以今天就来总结一下。

1. 什么是模块化编程

来看百度百科的定义

模块化程序设计是指在进行程序设计时将一个大程序按照功能划分为若干小程序模块，每个小程序模块完成一个确定的功能，并在这些模块之间建立必要的联系，通过模块的互相协作完成整个功能的程序设计方法。

比如 java 的 import，C# 的 using。我的理解是通过模块化编程，可以将不同的功能独立出来，修改某个功能时不会对其他功能产生影响。

2. 为什么要模块化

来看下面一个例子 

// A.js function sayWord(type){ if(type === 1){
        console.log("hello");
    }else if(type === 2){
        console.log("world");
    }
} // B.js function Hello(){ sayWord(1);
} // C.js Hello()  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    •

假设上面三个文件，B.js 引用了 A.js 里面的内容，C.js 又引用了 B.js 里面的内容，如果编写 C.js 的人只知道引用了 B.js，那他就不会引用 A.js 就会导致程序出错，而且文件的引用顺序也不能出错。给整体代码的调试修改带来不便。

还有个问题，上述代码暴露了两个全局变量，容易造成全局变量的污染

3. AMD

AMD 即 Asynchronous Module Definition（异步模块定义）。采取异步加载的方式加载模块，模块的加载不会影响它后面的语句执行。而且只有用到的时候才会去加载相关文件，属于浏览器端的标准

假设下面这种情况 

// util.js define(function(){ return {
        getFormatDate:function(date,type){ if(type === 1){ return '2018-08-9' } if(type === 2){ return '2018 年 8 月 9 日' }
        }
    }
}) // a-util.js define(['./util.js'],function(util){ return {
        aGetFormatDate:function(date){ return util.getFormatDate(date,2)
        }
    }
}) // a.js define(['./a-util.js'],function(aUtil){ return {
        printDate:function(date){ console.log(aUtil.aGetFormatDate(date))
        }
    }
}) // main.js require(['./a.js'],function(a){ var date = new Date()
    a.printDate(date)
})
console.log(1); // 使用 // <script src = "/require.min.js" data-main="./main.js"></script>   

    

    
  • 
        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
    
    •

页面上先打印 1，然后才会打印 2018 年 8 月 9 日。因此 AMD 的加载并不会影响后续的语句执行。

如果不是异步加载会出现什么情况呢 

var a = require('a');
console.log(1) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •

后面的语句需要等待 a 加载完成才能执行，如果加载时间过长，整个程序都会卡在这。因此，浏览器不能同步加载资源，这也是 AMD 的产生背景。

AMD 是在浏览器端实现模块化开发的规范。由于该规范不是 JavaScript 原始支持的，使用 AMD 规范进行开发的时候需要引入第三方的库函数，也就是 RequireJS。

RequireJS 主要解决的问题

  • 使 JS 异步加载，避免页面失去响应
  • 管理代码之间的依赖性，有利于代码的编写和维护

下面来看看如何使用 require.js

要想使用 require.js，首先要 define 

// ? 代表该参数可选 define(id?, dependencies?, factory); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •
  • id：指的是定义的模块的名字
  • dependencies：是定义的模块所依赖模块的数组

  • factory：为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

    具体的规范说明可以参考 AMD (中文版) 
    举个例子，创建一个名为 “alpha” 的模块，使用了 require，exports，和名为 “beta” 的模块: 

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) { exports.verb = function() { return beta.verb(); //Or: return require("beta").verb();
       }
   }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

一个返回对象的匿名模块： 

define(["alpha"], function (alpha) { return {
         verb: function(){ return alpha.verb() + 2;
         }
       };
   }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

一个没有依赖性的模块可以直接定义对象： 

define({
     add: function(x, y){ return x + y;
     }
   }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

如何使用

AMD 采用 require 语句加载模块 

require([module],callback); 

    

    
  • 
        1
    
    •
  • module：是一个数组，里面的成员是要加载的模块
  • callback：加载成功之后的回调函数

例如 

require(['./a.js'],function(a){ var date = new Date()
    a.printDate(date)
}) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

具体的使用方法如下 

// util.js define(function(){ return {
        getFormatDate:function(date,type){ if(type === 1){ return '2018-08-09' } if(type === 2){ return '2018 年 8 月 9 日' }
        }
    }
}) // a-util.js define(['./util.js'],function(util){ return {
        aGetFormatDate:function(date){ return util.getFormatDate(date,2)
        }
    }
}) // a.js define(['./a-util.js'],function(aUtil){ return {
        printDate:function(date){ console.log(aUtil.aGetFormatDate(date))
        }
    }
}) // main.js require(['./a.js'],function(a){ var date = new Date()
    a.printDate(date)
}) // 使用 // <script src = "/require.min.js" data-main="./main.js"></script>  

    

    
  • 
        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
    
    •

假设这里有 4 个文件，util.js，a-util.js 引用了 util.js，a.js 引用了 a-util.js，main.js 引用了 a.js。

其中，data-main 属性的作用是加载网页程序的主模块。

上例演示了一个主模块最简单的写法，默认情况下，require.js 假设依赖和主模块在同一个目录。

使用 require.config() 方法可以对模块的加载行为进行自定义。require.config() 就写在主模块（main.js）的头部，参数是一个对象，这个对象的 paths 属性指定各个模块的加载路径 

require.config({
    paths:{ "a":"src/a.js", "b":"src/b.js" }
}) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

还有一种方法是改变基础目录（baseUrl） 

require.config({

　　　　baseUrl: "src",

　　　　paths: { "a": "a.js", "b": "b.js",

　　　　}

　　}); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

4. CommonJS

commonJS 是 nodejs 的模块化规范，现在被大量用在前端，由于构建工具的高度自动化，使得使用 npm 的成本非常低。commonJS 不会异步加载 JS，而是同步一次性加载出来

在 commonJS 中，有一个全局性的方法 require()，用于加载模块，例如 

const util = require('util'); 

    

    
  • 
        1
    
    •

然后，就可以调用 util 提供的方法了 

const util = require('util'); var date = new date();
util.getFormatDate(date,1); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

commonJS 对于模块的定义分三种，模块定义（exports），模块引用（require）和模块标示（module）

exports() 对象用于导出当前模块的变量或方法，唯一的导出口。require() 用来引入外部模块。module 对象代表模块本身。

举个栗子 

// util.js module.exports = {
    getFormatDate:function(date, type){ if(type === 1){ return '2017-06-15' } if(type === 2){ return '2017 年 6 月 15 日' }
    }
} // a-util.js const util = require('util.js')
module.exports = {
    aGetFormatDate:function(date){ return util.getFormatDate(date,2)
    }
} 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    •

或者下面这种方式 

 // foobar.js // 定义行为 function foobar(){ this.foo = function(){ console.log('Hello foo');
        } this.bar = function(){ console.log('Hello bar');
          }
 } // 把 foobar 暴露给其它模块 exports.foobar = foobar; // main.js //使用文件与模块文件在同一目录 var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar' 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    •

5. ES6 Module

ES6 模块的设计思想是尽量静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，而 CommonJS 和 AMD 模块都只能在运行时确定这些关系。如 CommonJS 加载方式为 “运行时加载”，ES6 的加载方式为 “编译时加载” 或者静态加载，即 ES6 可以在编译时就完成模块加载，效率比 CommonJS 模块的加载方式高。

ES6 模块自动采用严格模式，不管有没有在模块头部加上 “use strict”。

ES6 export 语句输出的接口与其对应的值是动态绑定关系，即通过该接口可以取到模块内部实时的值。而 CommonJS 模块输出的是值的缓存，不存在动态更新。

ES6 与 CommonJS 模块的差异

  • CommonJS 模块输出的是一个值的复制，ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
  • CommonJS 中的 this 指向当前模块，ES6 模块 this 为 undefined

第二个差异是因为 CommonJS 加载的是一个对象（即 Module.exports 属性），该对象只有在脚本运行结束时才会生成，而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

总结

CommonJS 采用了服务器优先的策略，使用同步方式加载模块，而 AMD 采用异步加载的方式。所以如果需要使用异步加载 js 的话建议使用 AMD，而当项目使用了 npm 的情况下建议使用 CommonJS。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。


分享本文至：
« UI设计中亮色的优点和缺点 三年来，新的创新和发明有哪些？ »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档