模块化开发

1、模块化开发

1.什么是模块化开发？

简单的说模块就是实现特定功能的一组方法。

模块化开发其实就是让JavaScript文件可以互相引用，每个文档代表一个模块，提高代码的使用频率。

---

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。

2.模块化开发的优缺点有哪些？

优点：
1.便于多人协作开发，每个部分开发不会干扰其它地方
2.便于调试修改，因为模块独立，发现问题比较容易，修改一处，也不影响别处，利于前端性能优化
3.利于代码复用，小块的代码可以更方便拿到别的项目中不加或者稍加修改使用，提高可维护性
4.便于功能的扩充，因为软件各个部分是独立的，不需要理解整个软件就可以添加功能，特别适合二次开发。
5.解决了部分恼人的命名冲突以及烦琐的文件依赖

---

缺点：
1.系统分层，调用链会很长
2.模块间通信,模块间发送消息会很耗性能

---

模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。

3.常见的模块化的写法有哪些

• 原始写法（封装函数）

        function m1(){
    　　　　//...
    　　}
    　　function m2(){
    　　　　//...
    　　}

  这种做法的缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

• 对象写法
  为了解决原始封装函数的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

        var module1 = new Object({
    　　　　_count : 0,
    　　　　m1 : function (){
    　　　  　　　//...
    　　　　},
    　　　　m2 : function (){
    　　　  　　　//...
    　　　　}
    　　});

  方法都封装在module1对象里。使用的时候，就是调用这个对象的属性。例如：module1.m1();但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如module1._count = 5;，外部代码可以直接改变内部计数器的值。

• 立即执行函数写法
  立即执行函数可以达到不暴露私有成员的目的。

        var module1 = (function(){
    　　　　var _count = 0;
    　　　　var m1 = function(){
    　　　　　　//...
    　　　　};
    　　　　var m2 = function(){
    　　　　　　//...
    　　　　};
    　　　　return {
    　　　　　　m1 : m1,
    　　　　　　m2 : m2
    　　　　};
    　　})();

  外部代码无法读取内部的_count变量。

2、模块化规范

1.模块的规范有哪些？

模块的规范有CommonJS（nodeJS）,AMD(requireJS),CMD(sea.js)

原生JavaScript中并不支持模块化开发，所以出现了一些规范，就是所说的AMD和CMD，这两种方式适合使用桌面端，可以进行异步加载，而在NodeJS中使用CommonJS是同步的，所以CommonJS并不适合桌面端。

2.CommonJS

NodeJS实现了JavaScript语言编写后台，其中使用CommonJS规范实现了模块化开发

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

3.AMD

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。

异步加载，浏览器不会假死，所以AMD比较适合浏览器环境。

4.CMD

玉伯写了seajs，就是遵循他提出的CMD规范，与AMD蛮相近的，不过用起来感觉更加方便些，最重要的是中文版。
define(function(require,exports,module){...});

3、requireJs

1.require.js的诞生，就是为了解决这两个问题：

1.实现js文件的异步加载，避免网页失去响应；
2.管理模块之间的依赖性，便于代码的编写和维护。

2.requireJS的使用步骤

1.在要使用的主页面引入requirejs文件
<script src="js/require.js" defer async="true" ></script>
defer async="true"可以解决可能造成网页失去响应的问题。

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

2.加载我们自己的代码，假定我们自己的代码文件是main.js，也放在js目录下面。
<script src="js/require.js" data-main="js/main"></script>
data-main属性的作用是，指定网页程序的主模块。

3.编写模块的依赖

    　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

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

require.config({
        //规范的模块
        paths: {
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min",
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　},
　　　　//非规范的模块
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

5.AMD模块的定义
require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。
具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

    //定义模块
    // math.js
    define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

    //加载模块
    　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});