webpack3.0 前端工程化

模块化思想

命名空间
库名.类别名.方法名
commonjs
一个文件为一个模块，模块内的变量是不能被外界直接访问到的，只能通过module.exports暴露模块接口，外界通过require引入模块，require是同步执行的。commonjs是在nodejs服务端执行的。

    var xx=require('./router');
    exports=module.exports=createApp;

amd
async module definition
使用define定义模块
使用require来引用模块
RequireJs
将所有依赖前置

define(
    //module name 可以省略
    "alpha",
    //dependence 可能是一个也可为多个
    ["require","exports","beta"],
    //module exports 
    function(require,exports,beta){
        exports.verb=function(){
            return beta.verb();
            return require("beta").verb();
         }
    }
);

cmd
common module definition
一个文件一个模块
使用define定义模块
使用require来引用模块
seaJS
尽可能懒执行

//所有模块都通过define来定义
define(function(require, exports,module){
    //通过require引入依赖
    var $=require('jquery');
    var Spinning=require('./spinning');
    
    //通过exports对外暴露接口
    exports.doSomething=...
    
    //或者通过 module.exports 提供整个接口
    module.exports=...
});

区别
知识点1：AMD/CMD/CommonJs是JS模块化开发的标准，目前对应的实现是RequireJs/SeaJs/nodeJs.
知识点2：CommonJs主要针对服务端，AMD/CMD主要针对浏览器端，所以最容易混淆的是AMD/CMD。
知识点3 : AMD/CMD区别，虽然都是并行加载js文件，但还是有所区别，AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。
知识点4：AMD/CMD的优缺点.一个的优点就是另一个的缺点，可以对照浏览。

            AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。
            AMD缺点：**并行加载，异步处理**，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。
            CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。
            CMD缺点：执行等待时间会叠加。因为每个文件执行时是**同步执行**（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。

知识点5：如何使用？CommonJs的话，因为nodeJs就是它的实现，所以使用node就行，也不用引入其他包。AMD则是通过

webpack3.0 前端工程化

模块化思想

你可能感兴趣的:(webpack3.0 前端工程化)