Javascript 模块化开发上线解决方案

最近又换部门了，好频繁地说。。。因而把这段时间搞的小工具们简单整理了一下，做了一个小的总结。此次用一个简单业务demo来向你们介绍一下Javascript模块化开发的方式和自动化合并压缩的一些本身的处理。

模块化开发已经有一些标准(AMD/CMD)并且如今也算比较普及了，其为开发人员提供了很大的方便。模块化开发能够按结构整理代码，将一些功能分小颗粒来实现，这样的代码维护起来会方便不少，也更灵活，更容易在必定程度上去知足各类需求的变动。 

好比这是demo中的代码结构：

　　

　　先说page目录，这里的每个js文件对应于一个页面，这就是页面js的入口文件，全部的功能模块经过对应的js去加载。

　　general目录就是通常的针对业务的一些功能，好比这里的picView就是一个图片查看功能，该目录的定位是与业务紧密相关。

　　common目录就是相对业务要底层一些，属于基础组件，它能够在各业务模块中使用，组成业务相关的功能。

 

　　utils目录其实就是一个函数库，也跟业务不要紧，只是实现通常经常使用小颗粒功能的封装。

　　lib目录就是放的第三方的一些库，好比jquery,requirejs

　　conf就是进行一些项目的配置

 

这样咱们就能够把各功能按其职责分别扔到相应的目录下以实现各模块的分类。

咱们在开发中的时候就能够像这样：

<script type="text/javascript" src="../js/lib/require.js"></script>
<script type="text/javascript" src="../js/conf/requireConf.js"></script>
<script type="text/javascript" src="../js/page/index.js"></script>

引入页面代码后，在页面入口文件进行开发了。

开发确实方便，不过上线的话，确定不能直接这么上线，由于从前端优化的角度上讲，通常状况下咱们是须要尽可能减小请求的。如今的状况是模块越多，咱们的请求确定也会不少，性能就会受到影响。虽然模块化加载工具已经提供了处理方法（像requireJS有r.js来进行编译），但始终仍是要依赖于require.js引导文件，这样会有点多余。因而个人处理方式就是将这些模块文件按页面合并后，再进行代码原生化处理，这要就去除了define/require的依赖，也就再也不须要引入像require.js这样的引导文件（虽然在代码编写中须要有一些约束，不过仍是能知足大部分状况吧。），使用方法就是在项目的build目录里进行grunt build就好了，具体能够在demo中尝试。

demo地址：

　　https://github.com/randomyang/javascript-module

并且你们能够根据代码里的注释本身切换不一样状况看效果。

 

最后说明一下，此次讨论的应用场景只适合单文件一次引入的时候，若是是多文件或有业务交互中异步引入的方式，暂不在此次讨论之列，这里只是给你们提供一种开发方式的选择，谢谢。