webpack3.0 前端工程化

原文链接: https://segmentfault.com/a/1190000014155077

模块化思想

  • 命名空间
    库名.类别名.方法名
  • 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 前端工程化)