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 冒号 使用说明
Jun 06 Javascript
jquery 常用操作方法
Jan 28 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
简单的JS轮播图代码
Jul 18 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
JavaScript实现电灯开关小案例
Mar 30 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实现的Redis多库选择功能单例类
2017/07/27 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JavaScript常用工具函数库汇总
2020/09/17 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python实现挑选出来100以内的质数
2015/03/24 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
经管应届生求职信
2013/11/17 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
《故乡》教学反思
2014/04/10 职场文书
园林系毕业生求职信
2014/06/23 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2015年路政工作总结
2015/05/22 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android