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 相关文章推荐
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JS实现网页烟花动画效果
Mar 10 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
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php关联数组快速排序的方法
2015/04/17 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP文件操作详解
2016/12/30 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
php自动加载代码实例详解
2021/02/26 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
内科护士实习自我鉴定
2013/10/17 职场文书
工作中的自我评价如何写好
2013/10/28 职场文书
教师学习培训邀请函
2014/02/04 职场文书
建设工地安全标语
2014/06/07 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
小学元宵节活动总结
2015/02/06 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL