前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js

问题由来,为什么要前端模块化管理:

假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js; 那我们引入Acomponent.js的时候,怎么知道要引入common.js? 看文档? demo写的往往忘掉写这些,如果类似common.js太多,那只能引入后人工排错; 事实上作为一个使用方,我并不想关心这些;

java 的maven和.net的Nuget 的引入,就是为了解决相互依赖这种问题; 使用方引入一个包,并不需要挨个引入它需要的包,完全自动管理;

而js前端模块化规范也需要类似的组件管理, AMD、CMD规范应运而生:

我的理解,maven、 nuget、 requirejs、 seajs 都是一样的东西,就是包管理器

 

看了下AMD CMD的简介,和ECMA的历史,手动记录下:

  AMD的代表require.js ,CMD的代表sea.js

两者的区别主要是加载时机,其实都是先加载再执行, 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行 

CMD 推崇依赖就近,AMD 推崇依赖前置  https://www.zhihu.com/question/20351507/answer/14859415

实际应用的话建议用require.js ,很多地方都在说seajs不行啦,比如 https://github.com/seajs/seajs/issues/1605

关于requirejs的用法就不写了,找到一个比较好的转载下到博客园来 http://www.cnblogs.com/binlin1987/articles/7060822.html

  

想了下为什么以前的项目没有引入requirejs:

    以前的项目大多这么几个js:

    jquery.js 这个不说了,必备

    easyui.js 或者 jqueryui.js 或者 kendo.js ;这个都是外部组件框架

    common.js 公司内部公用库,解决日期转换,数字精度转换等公用方法

    XXXcomm.js 公司内部组件库,架构封装的组织机构,人员管理等结构树组件

    XXXcomponent.js 偶尔easyUI,kendoUI等组件不够用的时候额外加个三方组件,不一定有

 

    这些js不多,没有依赖到必须异步延迟加载的地步;

    页面结构简单,XXXcomm.js 公司内部组件实际只有三五个,顶多依赖于jquery和common.js, 封装到了一个js文件中 ,依赖不复杂,页面头部一次引入就好,忘不掉;

    好吧,还是页面简单,js都打包了,总共十个以内的js文件,直接加到html头就可以了,不会发生漏掉js导致组件报错 :) 而且组件封装的时候,也会特别注意最好不要依赖jquery以外别的东西;再复杂点的页面,自定义组件很多,依赖太严重的时候,确实需要requirejs帮助管理,在每个组件内部写好依赖,使用方无需关注,

    往长远看,新项目启动的时候,加入requirejs比较好,学习成本不大,半天就会用了,好处多多

 

posted @ 2017-06-21 18:14  Alan大bug  阅读(410)  评论(0编辑  收藏  举报