Javascript模块化编程(一)模块的写法最佳实践


Posted in Javascript onJanuary 17, 2013

随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。
Javascript模块化编程(一)模块的写法最佳实践 
网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。

Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)

Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。本文总结了当前"Javascript模块化编程"的最佳实践,说明如何投入实用。虽然这不是初级教程,但是只要稍稍了解Javascript的基本语法,就能看懂。
Javascript模块化编程(一)模块的写法最佳实践 
一、原始写法
模块就是实现特定功能的一组方法。
只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

 function m1(){ 

//... 

} 

function m2(){ 


//... 

}

上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。
这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。
二、对象写法
为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。
var module1 = new Object({ 

_count : 0, 


m1 : function (){ 



//... 


}, 


m2 : function (){ 



//... 


} 

});

上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。
module1.m1();

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。
module1._count = 5;

三、立即执行函数写法
使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE),可以达到不暴露私有成员的目的。
var module1 = (function(){ 

var _count = 0; 


var m1 = function(){ 



//... 


}; 


var m2 = function(){ 



//... 


}; 


return { 



m1 : m1, 



m2 : m2 


}; 

})();

使用上面的写法,外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined

module1就是Javascript模块的基本写法。下面,再对这种写法进行加工。
四、放大模式
如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。
var module1 = (function (mod){ 

mod.m3 = function () { 



//... 


}; 


return mod; 

})(module1);

上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。
五、宽放大模式(Loose augmentation)
在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。
var module1 = ( function (mod){ 

//... 


return mod; 

})(window.module1 || {});

与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。
六、输入全局变量
独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
var module1 = (function ($, YAHOO) { 

//... 

})(jQuery, YAHOO);

上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

这个系列的第二部分,将讨论如何在浏览器环境组织不同的模块、管理模块之间的依赖性。
(完)

Javascript 相关文章推荐
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
js实现秒表计时器
Dec 16 Javascript
用vue写一个日历
Nov 02 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 #Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 #Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 #Javascript
JavaScript控制Session操作方法
Jan 17 #Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 #Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 #Javascript
jquery选择器的选择使用及性能介绍
Jan 16 #Javascript
You might like
模仿OSO的论坛(五)
2006/10/09 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
python中的全局变量用法分析
2015/06/09 Python
Python每天必学之bytes字节
2016/01/28 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python实现图像拼接
2020/03/05 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
党委工作总结2015
2015/04/27 职场文书
工程主管竞聘书
2015/09/15 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技