如何实现前端模块化开发？

1、 前端如果想做模块化开发，首先需要针对每一种资源（JavaScript、CSS、模板等）寻找一种模块与集成方案，然后需要根据情况的不同选用不同的工具框架拼凑出来。 SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS，可以更好地组织 JavaScript 代码。 不知道别人怎么做的，我自己现在的做法是，基本通用的功能做成一个js文件，js生成html标签和style样式，只需要一个div带上id调用一下就ok了，比如图片上传。而一些常用但不通用的功能做成一组文件，包括js和一定的html结构还有一个css文件，也可能还有图片什么的，有时候甚至做成不用调用，直接加载就能用。

2、至于具体的调用方法，大概就是window定义一个变量，放入调用的这个功能的function初始化一个模块，并返回这个模块闭包中的一些方法用来操作或者获取和设置一些模块闭包内的变量。JavaScript目前比较拿的出手的，也就是JavaScript的模块化，比如AMD或者CMD等等，分别可以使用RequireJS和SeaJS。去年在研究基于Backbone的框架Marionette时，想与Sea.js结合使用。现在来看这种组合是完全没有必要的。Marionette提供了模块化的组织方案，反而生拉硬扯在一起，冲突得很难受。其实把JavaScript文件一列放在HTML中也没什么问题。究竟使用什么来

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

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

5、本管理太过细致了。如果同一个项目中允许出现同一模块的不同版本，事情就做的太过复杂了。发布上线发布上线必须一个以终为始的过程。如果你不追求网站或者应用的速度，那就把那些开发文件直接丢到生产服务器上去吧。别说，我还真见过这样的商用的网站。如果讲究一些方案，资源合并成数个文件，代码线上组合和运行方式完全可以与本地开发不一样。只需要功能在就行。JavaScript代码打成一个文件，或者两个？都行。如果使用RequireJS，那RequireJS提供了打包的工具，打包成几个文件，什么粒度，都行。如果是Sea.js也有对应的工具。就算文件都是一个一个列出来，我们也总是可以打出来你想要的文件。CSS等等其他

6、资源都是如此，就算开发时各自不同的结构模式，打包时都是可以打的。至于上线CDN，版本号缓存什么的并不在本文的讨论范围之内。总结前端模块没有什么特效药。唯一要遵守的原则就是， 比起Node.js来讲，每种资源必须要有一种自己的开发和上线组织方式 （Node.js开发和上线都是一致的），开发和上线完全可以是两种方式，大可不必人云亦云，只要适合可以随意组合；CSS在CSS Scoped Style正式使用之前，应该有一套基础样式和沙盒（模块样式命名空间）。每个模块中的HTML怎么办，如果我们使用的框架是Backbone，注定我们要将HTML模板转换成JavaScript模块，或者使用模块加载器的插件来实现。如果我们使用AngularJS，那倒是可以交由AngularJS。发布时Backbone中的模块使用AMD打包，AngularJS可以使用