前端模块化 、包管理器、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比较好,学习成本不大,半天就会用了,好处多多