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中filter(),not(),split()使用方法
Jul 06 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 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/07/08 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python之web模板应用
2017/12/26 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
对Django外键关系的描述
2019/07/26 Python
Pytorch之finetune使用详解
2020/01/18 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
大学生自我鉴定
2013/12/08 职场文书
安全生产标语
2014/06/06 职场文书
村道德模范事迹材料
2014/08/28 职场文书
农村党员干部承诺书
2015/05/04 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技