回首来时走过的-模块化之路

跌跌撞撞在前端的路上跑了一年，一路小打小闹在摸索中前进；没有阅历，见证不了繁华，只能偶尔站在巨人的肩膀上眺望下未来；前端类库、框架百花齐放，Nodejs的火热，各路大侠的苦心钻研，无疑将前端工作推向了一个新的高度；前端生态圈的内含不断扩展和丰富，上次看过阿里人对于大前端的研讨，也算是给我这个小前端打了一剂强心针，为了记住这个大前端，我特意将我小站的404页做成这个口号了，大伙一不小心点进去了，勿笑，让我继续追随大神们的脚步，好好看看前端的独特风景吧！

1、那时候，天太蓝，不知道模块化是什么

还记得最开始学JS时，模仿别人的动画特效，叫Move.js；Move.start(obj,{attr:val});然后拿着这个js到处模仿别人的banner，再后来，模拟了个验证码、瀑布流、分页、编辑器什么的，都是单独弄个文件，需要时引用；现在想来，这个可能就是模块化的雏形吧；现在想来，那时天真瞎弄的，其实原生JS还是挺有意思的；现在想来，自从jQuery以后，说好的原生Javascript呢？快被jQuery惯坏了哇！不过jQuery的插件应该也是一种模块化的做法；看吧，模块化其实就在你代码里，你只是以一种随心所意的方式在实践它；

2、终于，模块化的规范化

基于Commonjs规范，衍生出两大分支：（1）、AMD规范及其代表：Requirejs；（2）、CMD规范及其代表：Seajs；二者都是很好的前端模块化解决方案，关于这二者，各自都能唠几天几夜，不多说了；像上面说的你用的那么随心所意，那么在偏大项目和团队协作的情况下，很多时候，意想不到的问题总会时不时的来教你重新做人，比如：比如命名冲突、文件依赖、一堆堆的js文件难以统一管理和维护、同时会牵扯出一些前端的性能问题；而requirejs和seajs能帮你很好的解决这些困扰，当你遵循其模块化的规范开发时，你依然可以随心所意、依然可以按照你的路子潇洒的写JavaScript；

比如在seajs里，你需要这样来定义模块：

define(function(require,module,exports){

      var a=require('a');//调用（依赖）模块

      module.exports=...;

});

关于seajs的全面介绍，自行github吧；

对了，现在还离不开jQuery及其插件，先将jquery改造成符合CMD规范的吧：

define(function(require,exports,module){

   //jquery源码

   module.exports=$.noConflict(true);

});

改造jquery的插件稍复杂：参考（好好的用好seajs吧！）

哎呀，终于走上了前端的模块化之路，记得在（关于前端结构调整的一次实践）这篇博客里，提到过基于seajs，我将全站只src两个文件：seajs和mainjs；大概意思是每个页面一个主模块，全站以mainjs作为主模块，并由mainjs代理全站的各大模块，实现页面不滥加js，并由你统一管理，感觉爽爽的！

可是后来，基于nodejs，我移情别恋了，我更喜欢nodejs那套搞法，于是在前端开发环境里引入nodejs；由Nodejs组织前端开发环境，同样划分模块， 但是是按照Nodejs的模块化规范，这样就将javascript引入到Nodejs端了，最后由Gulp一键打包、 压缩到预上线文件夹；参见：（Browserify让你的Javascript游走于前后端）

3、投入Nodejs的怀抱，将模块化进行到底

Nodejs的世界里一切皆模块；

在Nodejs中使用的是Commonjs中定义的模块机制，每个Javascript文件就是一个模块，模块与文件之间是一一对应的关系；模块通过exports来对外提供接口，包括属性和方法，调用者使用require来加载模块并使用模块提供的接口；Browserify作为Nodejs与浏览器之间的桥梁，把Javascript扩展到Nodejs端，并改写NPM模块使浏览器也能使用数量众多的NPM模块，同时Browserify也很好的解决了模块之间的依赖，可以很好的将应用模块及依赖模块打包成一个Javascript文件；

现在你可以像写Nodejs程序一样来写JavaScript了，像require NPM模块一样require你的JavaScript模块了；

global.$=$=require('jquery');

为了防止可能出现页面中的jquery代码块，我还是没有在nodejs里require('jquery')，而是按照之前的做法，直接src进来，其他页面可以取缓存，也可以防止gulp browserify后js文件过大；

现在这样写了：

$(function(){

    require('../modules/header');

    require('../modules/bottom');

        //.....

});

好好一看其实比seajs还简单，只多了个require，不用define那个wrapper了，当然必要的话module.exports还是可用的；重点是写好gulp browserify，他将帮你一键处理文件依赖、压缩到指定目录，然后你丢到服务器就是；

var gulp=require('gulp');
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var streamify=require('gulp-streamify');
var uglify=require('gulp-uglify');
var buffer=require('vinyl-buffer');

gulp.task('browserify',function() {
    return browserify('./dist/javascripts/dev/page/about.js')
        .bundle()
        .pipe(source('about.js'))
        .pipe(buffer())//.pipe(streamify(uglify()))  //压缩耗时间   上线处理
        .pipe(gulp.dest('./dist/javascripts'))
});

事情就是这么个事情，情况就是这么个情况，反正我更喜欢这种搞法，回归最初的写法，当然封装的很完整那最好了，将JavaScript与Nodejs联系到一起是不是很酷！

回首来时走过的-模块化之路，走过了三个阶段，最终还是投入了Nodejs的怀抱，现在我可以不用rquirejs了，可以不用seajs了，模块化依旧在进行中，期待JavaScript与Nodejs途中更酷的风景，阿弥陀佛么么哒！晚安！