了解Javascript的模块化开发


Posted in Javascript onMarch 02, 2015

小A是某个创业团队的前端工程师,负责编写项目的Javascript程序。

全局变量冲突

根据自己的经验,小A先把一些常用的功能抽出来,写成函数放到一个公用文件base.js中:

var _ = {

    $: function(id) { return document.getElementById(id); },

    getCookie: function(key) { ... },

    setCookie: function(key, value) { ... }

};

小A把这些函数都放在_对象内,以防过多的全局变量造成冲突。他告诉团队的其他成员,如果谁想使用这些函数,只要引入base.js就可以了。

小C是小A的同事,他向小A反映:自己的页面引入了一个叫做underscore.js的类库,而且,这个类库也会占用_这个全局变量,这样一来就会跟base.js中的_冲突了。小A心想,underscore.js是第三方类库,估计不好改,但是base.js已经在很多页面铺开,不可能改。最后小A只好无奈地把underscore.js占用的全局变量改了。

此时,小A发现,把函数都放在一个名字空间内,可以减少全局变量冲突的概率,却没有解决全局变量冲突这个问题。

依赖

随着业务的发展,小A又编写了一系列的函数库和UI组件,比方说标签切换组件tabs.js,此组件需调用base.js以及util.js中的函数。

有一天,新同事小D跟小A反映,自己已经在页面中引用了tabs.js,功能却不正常。小A一看就发现问题了,原来小D不知道tabs.js依赖于base.js以及util.js,他并没有添加这两个文件的引用。于是,他马上进行修改:

<script src="tabs.js"></script>

<script src="base.js"></script>

<script src="util.js"></script>

然而,功能还是不正常,此时小A教训小D说:“都说是依赖,那被依赖方肯定要放在依赖方之前啊”。原来小D把base.js和util.js放到tabs.js之后了。

小A心想,他是作者,自然知道组件的依赖情况,但是别人就难说了,特别是新人。

过了一段时间,小A给标签切换组件增加了功能,为了实现这个功能,tabs.js还需要调用ui.js中的函数。这时,小A发现了一个严重的问题,他需要在所有调用了tabs.js的页面上增加ui.js的引用!!!

又过了一段时间,小A优化了tabs.js,这个组件已经不再依赖于util.js,所以他在所有用到tabs.js的页面中移除了util.js的引用,以提高性能。他这一修改,出大事了,测试组MM告诉他,有些页面不正常了。小A一看,恍然大悟,原来某些页面的其他功能用到了util.js中的函数,他把这个文件的引用去掉导致出错了。为了保证功能正常,他又把代码恢复了。

小A又想,有没有办法在修改依赖的同时不用逐一修改页面,也不影响其他功能呢?

模块化

小A逛互联网的时候,无意中发现了一种新奇的模块化编码方式,可以把它之前遇到的问题全部解决。

在模块化编程方式下,每个文件都是一个模块。每个模块都由一个名为define的函数创建。例如,把base.js改造成一个模块后,代码会变成这样:

define(function(require, exports, module) {

    exports.$ = function(id) { return document.getElementById(id); };

    exports.getCookie = function(key) { ... };

    exports.setCookie = function(key, value) { ... };

});

base.js向外提供的接口都被添加到exports这个对象。而exports是一个局部变量,整个模块的代码都没有占用半个全局变量。

那如何调用某个模块提供的接口呢?以tabs.js为例,它要依赖于base.js和util.js:

define(function(require, exports, module) {

    var _ = require('base.js'), util = require('util.js');

    var div_tabs = _.$('tabs');

    // .... 其他代码

});

一个模块可以通过局部函数require获取其他模块的接口。此时,变量_和util都是局部变量,并且,变量名完全是受开发者控制的,如果你不喜欢_,那也可以用base:
define(function(require, exports, module) {

    var base = require('base.js'), util = require('util.js');

    var div_tabs = base.$('tabs');

    // .... 其他代码

});

一旦要移除util.js、添加ui.js,那只要修改tabs.js就可以了:
define(function(require, exports, module) {

    var base = require('base.js'), ui = require('ui.js');

    var div_tabs = base.$('tabs');

    // .... 其他代码

});

加载器

由于缺乏浏览器的原生支持,如果我们要用模块化的方式编码,就必须借助于一个叫做加载器(loader)的东西。

目前加载器的实现有很多,比如require.js、seajs。而JRaiser类库也有自己的加载器。

Javascript 相关文章推荐
js constructor的实际作用分析
Nov 15 Javascript
Node.js的包详细介绍
Jan 14 Javascript
jQuery中extend函数详解
Jul 13 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 #Javascript
js实现图片漂浮效果的方法
Mar 02 #Javascript
ECMAScript 5中的属性描述符详解
Mar 02 #Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 #Javascript
JavaScript数组常用方法
Mar 02 #Javascript
使用npm发布Node.JS程序包教程
Mar 02 #Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 #Javascript
You might like
PHP 缓存实现代码及详细注释
2010/05/16 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
JS常用正则表达式总结【经典】
2017/05/12 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
Python实现控制台进度条功能
2016/01/04 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python表达式的优先级详解
2020/02/18 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
微信营销策划方案
2014/02/24 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
先进教师事迹材料
2014/12/16 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
订货会邀请函
2015/01/31 职场文书
表扬信格式模板
2015/05/05 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏
Android 中的类文件和类加载器详情
2022/06/05 Java/Android