前端模块化:AMD和CMD,后端模块化:commonJS,ES6模块化

如果你对模块化已经了解,可以直接从第三点开始阅读。

一、模块化的概念:

在进行项目分析或者编码时,先把项目进行拆分,拆分成很多的类,对象,很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型,对象,函数就是模块。就像一辆汽车是由很多的零部件组成,每个零部件就是一个小模块,而由很多零件组成的发动机之于一辆汽车可以认为是一个大模块;或者说,一台计算机,由主板,cpu,内存,硬盘,显示器,键盘等大模块组成。而一个内存或者cpu又分别由很多的小模块组成。以模块为单位管理代码,会更加独立,调试方便,维护也很方便。

 

二、模块化经历的阶段:

    1. 函数封装

这种做法的缺点很明显:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。不同js文件里有相同的全局变量,如果被引入到同一个html文件中,全局变量就会互相影响。

     2. 对象

这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系,看似不错的解决方案,但是也有缺陷,外部(对象之外)可以随意修改内部成员(属性)

对象的属性就是对象中每个方法的全局变量。

var p = {

    id:"007",

    name :"芙蓉",

    age:25,    

    eat:function(str){

        alert(this.name+"在吃"+str);

    },

    work:function(str){

        alert(this.name+“在干"+str);

    }           

}

//存在问题:

//如:对于p对象的年龄,有效取值应该是在0-150之间的整数。

//  而以下代码的执行,

p.age = 151;

都会使得项目内部出现了不合法的数据。这是程序的健壮性不好。   

所以,对于对象的成员变量(属性),应该不能被外部访问才对。

  3.  立即执行函数

可以通过立即执行函数,来达到隐藏细节的目的


var p = (function (){

    var name="芙蓉";

    var age=25;

    function eat(str){

        alert(this.name+"在吃"+str);

    }

    function setAge(age){

        if(age<0 || age>150){

            alert("亲,年龄超出有效值(0-150)的范围");

            return;

        }

        age = age;

    }

    function getAge(){

        return age;

    }

    return {

        eat:eat,

        setAge:setAge,

        getAge:getAge

    }                   

})();  

var p = (function (){

    var name="芙蓉";

    var age=25;

    function eat(str){

        alert(this.name+"在吃"+str);

    }

    function setAge(age){

        if(age<0 || age>150){

            alert("亲,年龄超出有效值(0-150)的范围");

            return;

        }

        age = age;

    }

    function getAge(){

        return age;

    }

    return {

        eat:eat,

        setAge:setAge,

        getAge:getAge

    }                   

})();  

    4. 模块化的解决方案。

  •  以上模块化存在的问题:

不管是以上哪种方式(函数,对象,立即执行函数),都存在同样的问题:

1)、html不但要引入自己需要的js文件,还需要引入js文件需要的js文件。如:a.html需要使用 b.js的代码,而由于b.js中使用了c.js里的代码。所以,在a.html中必须引入b.js和c.js。这是JavaScript语言先天性的缺陷----js文件没法引入js文件。其它编程语言(java,c#,c/c++)就不存在这个问题。

2)、引入js文件的顺序问题以及异步加载问题。

 

  • 为此出现了一些解决方案:

 1)、前端模块化

    在前端里出现了第三方的解决方案 AMD和CMD

 2)、后端模块化

    在后端里(nodeJS)出现了commonJS规范。

 

三、模块化的概念

1、导出:导出就是对外开放的,可以导出变量,常量,函数,对象等等。使用export关键字。放在export关键字后面的(即对外导出的)变量,常量,函数和对象,在其它js文件中可以使用,否则,其它js文件中是不能使用的。即只能内部使用的。

               模块化的这种思路,可以隐藏细节,开放接口

2、导入:导入就是把其它js文件引入到当前js文件里。

 

四、前端模块化:AMD和CMD

   1、ES6之前,原生不支持模块化,所以出现了第三方的解决方案,分别是AMD和CMD

       AMD: Asynchronous Module Definition,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范,由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数(RequireJS库),实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

      CMD:  ”Common Module Definition”,称为 通用模块加载规范 。一般也是用在浏览器端。浏览器端异步加载库 Sea.js 实现的就是CMD规范。

  2、AMD之requireJS

    

 1)、引入第三方库requireJS

     

 2)、html文件中引入主模块

主模块就是html文件所(直接)依赖的模块(文件),使用script标签的data-main属性。假如html需要依赖的文件是main.js , 则代码如下:

如果main.js需要引入其它js文件,那怎么办?我们就需要知道如何定义模块,如何引入模块。

即html文件的最终代码是:<

!DOCTYPE html>





    

    

    

    Document





    





  3)、主模块引入其它模块(就是导入)main.js代码

假如,main.js引入的是person.js。那么 main.js 里的写法如下:


//require :引入其它模块 

//require函数的第一个参数:是引入的模块名,是数组

//requrie函数的第二个参数,是回调函数,回调函数的参数,

//对应到模块里的return。 即 p 对应着js/person.js里的return。

require(["js/person.js"],function(p){

    document.getElementById("btn01").onclick = function(){

       p.eat("方便面");

       p.work();

    }

});

 4)、定义模块(person.js)

导出用return,引入别的模块,在define的第一个参数写就行。

假如,main.js引入的是person.js。则person.js里的代码写法如下:


// 这表示当前模块不依赖其它模块

define([],function(){

    var name ="张三疯";

    var age = 12;

    

    return {

        eat:function(str){

            alert(name+"在吃"+str);

        },

        work:function(){

            alert(name+"在努力地工作……");

        }

    }

});

  5)、如果person.js模块还需要其它模块(如:dog.js)的话,怎么办?

5.1)、修改一下,person.js的代码。


//define :定义模块

//define 函数的第一个参数:是引入(依赖)的模块名,是数组

//define 函数的第二个参数,是回调函数,回调函数的参数,

// 对应到模块里的return。 即 d 对应着js/dog.js里的return。



define(["js/dog.js"],function(d){

    var name ="张三疯";

    var age = 12;

    

    return {

        eat:function(str){

            alert(name+"在吃"+str);

        },

        work:function(){

            alert(name+"在努力地工作……");

        },

        lookDoor:function(){

            d.lookDoor();

        }

    }

});

5.2)、增加一个dog.js的代码。


//这表示当前模块不依赖其它模块

define(function(){

    var name ="大黄";

    

    return {

        lookDoor:function(){

            alert(name+"在看门");

        }

    }

});

3、CMD之seaJS

   1)、引入seaJS(在html里):







    

    

    

    Document





    







  2)、主模块的引入:

 3)、主模块引入其它模块(main_sea.js代码),

假如main_sea.js引入person_sea.js

//在主模块里,用seajs引入其它模块,用seajs.use函数。

seajs.use(["person_sea"],function(p){

    document.getElementById("btn01").onclick = function(){

        p.eat("方便面");

        p.work();

        p.lookDoor();

     }

});

 4)、模块的定义(person_sea.js):

//seajs中定义模块,用define函数。

//引入其它模块:不在第一个参数,使用回调函数里的requrie;

//导出本模块的属性或者方法:使用回调函数里的exports

define(function(require,exports) {

    var name ="张三疯";

    var age = 12;

    //对外导出(开发)eat函数

    exports.eat = function(str){

        alert(name+"在吃"+str);

    };

    

    //对外导出(开发)work函数

    exports.work = function(){

        alert(name+"在努力地工作……");

    };



    //此时需要dog模块,所以,用require引入。

    let d = require("dog_sea");

    exports.lookDoor=function(){

        d.lookDoor();

    }

});

dog_sea.js的代码。

define(function(require,exports) {

    var name ="大黄";

    exports.lookDoor=function(){

        alert(name+"在看门");

    }

});

4、总结一下,使用模块化的步骤:

1、定义模块

 1.1)、引入别的模块

 1.2)、对外导出本模块的哪些属性和方法

2)、主模块引入其它模块

3)、html引入主模块

 

5、对比AMD和CMD的区别:

5.1)、定义模块

 都使用的都是define函数

 5.1.1)、引入别的模块

 AMD:

在define函数的第一个参数

 define([依赖的模块列表],function(引入模块的变量名列表){});

 CMD:

在define函数的第二个参数(回调函数)的require参数。

 define(function(require,exports){

    let d = require("dog");//引入dog模块

 });

 5.1.2)、对外导出本模块的哪些属性和方法

AMD:

用return

CMD:

在define函数的第二个参数(回调函数)的exports参数。

5.2)、主模块引入其它模块

AMD:

require函数

     require([引入的其它模块列表],function(其它模块对应的变量名列表){

     });

CMD:

 seajs.use([引入的其它模块列表],function(其它模块对应的变量名列表){

});

5.3)、html引入主模块(假如主模块是main.js)

AMD:  

     1)、script标签的 data-main

      

      2)、也可以使用script标签引入主模块。

      即:

      

      

CMD:  

    script标签引入主模块

    

    

 

5.4)、模块路径问题:

AMD:

基准路径是html的文件夹

     define(["js/dog.js"],function(d){})

CMD:

就是js文件的文件夹,

      let d = require("dog_sea");

5.5)、依赖方面:

5.5.1). 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible(尽可能的懒惰)

5.5.2). CMD 推崇依赖就近,AMD 推崇依赖前置。

5.5.3)如下代码示例:

 a模块依赖b模块和c模块的代码格式

  1. 、AMD

a.js的代码:

define(['./b', './c'], function(b, c) { // 依赖必须一开始就写好
             b.doSomething()


         c.doSomething()

    })

  1. 、CMD的代码:

a.js

define(function(require,exports,module){

var  b = require(“b");

………………

var  c = require(“c");

………………

});

四、后端模块化:commonJS

 

commonJS是后端模块化的解决方案,在nodeJS中有使用(nodeJS是js做后端的技术,相当于php,jsp,aspx)。

 

咱们曾经写的webpack就是用的commonJS规范。

 

1、导出:

module.expors={

     Name:‘张三疯’,

     Eat:function(){

 

     }

}

2、导入

    Require();

 

五、ES6的模块化:

 1、原生支持模块化了

ES6中新增的模块化,即从ES6开始,原生js支持模块化了,不需要第三方的模块化库,现在很多浏览器也支持ES6了。

  2、模块化的两个概念

1)、导出(export关键字):导出就是对外开放的,可以导出变量,常量,函数,对象等等。使用export关键字。放在export关键字后面的(即对外导出的)变量,常量,函数和对象,在其它js文件中可以使用,否则,其它js文件中是不能使用的。即只能内部使用的。

在用export导出时,可以导出多个

如:person.js文件(模块)里,如下:

//导出字符串

export var str = "hello";

//导出函数

export var fun = function(){

    alert("我是函数");

}

//导出对象

export const p =  {

    "id":"007",

    "name":"张三疯",

    "eat":function(){

        alert("吃");

        ff();

    }

}

//此函数没有使用export关键字导出,所以,只能在当前js文件内部使用

function ff(){

    alert("我只能在当前js被使用");

}

2)、导入(import):导入就是把其它js文件引入到当前js文件里。使用关键字import。

 

在使用import导入(export导出的)时,要使用花括号,

如:import {str,fun,p} from './person.js';

 

在index.js文件中,引入模块person.js;

//导入时,需要使用{},这是解构赋值。

import {str,fun,p} from './person.js';

window.onload = function(){

    document.getElementById("btn01").onclick = function(){

        console.log(str);

        fun();

        console.log(p.id);

        p.eat();

    }

}

3)、在html文件中引入index.js(注意: type="module")
注意:js中使用了模块化的关键字import,在引入时,script标签的type属性的值必须写成module。即:

 



    





注意:测试以上代码时,google浏览器要求放在服务器上进行 ,否则,就会有跨域问题。

4)、export defaultexport 有什么区别:

  1. 、export与export default均可用于导出常量、函数、文件、模块等
  2. 、在一个文件或模块中,export可以有多个,export default仅有一个,而且export default在导出是不需要变量名,相当于匿名的。
  3. 、通过export方式导出,在导入时要加{ },export default则不需要。

代码示例:

模块定义:dog.js

export default {

    "name":"大黄",

    "eat":function(){

        alert("吃");

    }

}

导入模块:

import d from './dog.js';

window.onload = function(){

    document.getElementById("btn01").onclick = function(){

        console.log(d);

        d.eat();

    }

}

你可能感兴趣的:(模块化)