继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

花满楼的小前端a
关注TA
已关注
手记 42
粉丝 111
获赞 2213

跌跌撞撞在前端的路上跑了一年,一路小打小闹在摸索中前进;没有阅历,见证不了繁华,只能偶尔站在巨人的肩膀上眺望下未来;前端类库、框架百花齐放,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途中更酷的风景,阿弥陀佛么么哒!晚安!

打开App,阅读手记
41人推荐
发表评论
随时随地看视频慕课网APP

热门评论

上面的require引入的依赖应该都是nodejs的插件吧

现在使用前端自动化构建工具,确实省了很多事,不用自己手动去创建模块,然后使用require或者sea来加载模块,我们要善于使用工具,节省开发时间,提高开发效率

楼主,你好,你小站上那个angular和jquery的js部分是怎么实现的啊?

查看全部评论