神刀安全网

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

跌跌撞撞在前端的路上跑了一年,一路小打小闹在摸索中前进;没有阅历,见证不了繁华,只能偶尔站在巨人的肩膀上眺望下未来;前端类库、框架百花齐放,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里,你需要这样来定义模块:

 1 define(function(require,module,exports){ 2  3       var a=require('a');//调用(依赖)模块 4  5       module.exports=...; 6  7 }); 

关于seajs的全面介绍,自行github吧;

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

 1 define(function(require,exports,module){ 2  3    //jquery源码 4  5    module.exports=$.noConflict(true); 6  7 }); 

改造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文件过大;

现在这样写了:

 1 $(function(){ 2  3     require('../modules/header'); 4  5     require('../modules/bottom'); 6  7         //..... 8  9 }); 

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

  1 var gulp=require('gulp');  2 var browserify = require("browserify");  3 var source = require("vinyl-source-stream");  4 var streamify=require('gulp-streamify');  5 var uglify=require('gulp-uglify');  6 var buffer=require('vinyl-buffer');  7   8 gulp.task('browserify',function() {  9     return browserify('./dist/javascripts/dev/page/about.js') 10         .bundle() 11         .pipe(source('about.js')) 12         .pipe(buffer())//.pipe(streamify(uglify()))  //压缩耗时间   上线处理 13         .pipe(gulp.dest('./dist/javascripts')) 14 }); 

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

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 回首来时走过的-模块化之路

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮