服务购

　　　　我能都知道前端模块化组件化开发时组件化和模块化的价值都在于分治，web应用系统的复杂度不断提升，兼顾开发效率和产品实际运行效率，会在开发阶段运用组件化和模块化的手段分离关注点，结合构建工具合理打包。

　　前端如果想做模块化开发，首先需要针对每一种资源（ JavaScript 、 CSS 、模板等）寻找 一种模块与集成方案，然后需要根据情况的不同选用不同的工具框架拼凑出来。 SeaJS 是一个适用于 Web 浏览器端的模块加载器。

　　而一些常用但不通用的功能做成一组文件，包括 js 和一定的 html 结构还有一个 css 文件，也可 能还有图片什么的，有时候甚至做成不用调用，直接加载就能用。 至于具体的调用方法， 大概就是 window 定义一个变量， 放入调用的这个功能的 function 初始化一个模块， 并返回这个模块闭包中的一些方法用来操作或者获取和设置一些模块闭包 内的变量。

　　去年在研究基于Backbone的框架Marionette时，想与Sea.js结合使用。现在来看这种组合是完全没有必要的。Marionette提供了模块化的组织方案，反而生拉硬扯在一起，冲突得很难受。其实把JavaScript文件一列放在HTML中也没什么问题。究竟使用什么来实现JavaScript，往往与选择的JavaScript框架有关，选Backbone可以AMD，也可以CMD。选AngularJS直接引用就行。

　　CSS模块化应该是两方面的问题--一是模块必须有一套基础样式。与JavaScript相比，CSS冲突简直是家常便饭，Shadow DOM还没成熟，原生的CSS样式隔离还在路上。所以必须有一套基础样式来规定这一套模块化组件的样式。我们可以选Bootstrap，如果闲它太重，也可以自己写。其次，每个组件必须有命名空间，避免组件间样式冲突。如果选择使用LESS、SASS等，那就比较好办，它们的缩进语法避免写很多重复的CSS代码。

　　HTML模板如果使用AngularJS，那AngularJS已经帮您解决了模板模块化的问题，AngularJS可以根据模块代码中的引用加载对应的HTML。如果使用Backbone，可以选择各种各样的模板引擎，Mustache？不过比起AngularJS就低端些，我们必须自己处理模板文件，要么通过模块加载器通过XHR请求，然后动态编译；或者将Mustache编译成JS，在当做模块加载。图片、字体？放在使用他们的模块中，该怎么引用就怎么引用。国际化文件？这些就不多说了，总之，每种文件需要选定一种开发的组织方式。

　　模块分发模块采用统一的模式来开发之后，只需选定一种包的分发方式就行了--Bower。npm不适合这样的场景，npm的版本管理太过细致了。如果同一个项目中允许出现同一模块的不同版本，事情就做的太过复杂了。

　　发布时Backbone中的模块使用AMD打包，AngularJS可以使用Grunt内联到页面中。HTML模块也没有固定的模式，没有固定的SDK来解脱我们。我们只能组合现有的工具！CSS就更不用说了，分开写，使用LESS、SASS来组织？再一次没有固定的模式没有SDK。

      关于前端模块化组件化开发的知识小编就科普到这里了，想要了解更多的咨讯，欢迎关注猪八戒服务购平台。