javascript自执行函数之伪命名空间封装法


Posted in Javascript onDecember 25, 2010

自执行函数:自动执行的函数。它在被解释时就已经在运行了。一般函数都是在被调用时才会执行的。
自执行函数的一般格式:(function() { 函数体 })();
而且,自执行函数中一般都会有一个function() {}形式的匿名函数。

下面的代码在window对象中创建一个命名空间 mySpace,并把自执行函数中的方法封装在mySpace命名空间之下,以便于我们调用这个自执行函数中的一些功能。

(function() { 
//根据id获取对象 
function $(id) { return document.getElementById(id); } //内部函数,在外层是不可以调用的 
function _setStyle(id, styleName, styleValue) { 
$(id).style[styleName] = styleValue; 
} 
//创建伪命名空间 
window.mySpace = {}; 
//将内部函数_setStyle封装在mySpace命名空间内 
//调用时,使用window.mySpace.setStyle(id, styleName, styleValue) 
window.mySpace.setStyle = _setStyle; 
})(); 
//下面是测试代码 
window.onload = function() { 
//将id为test的对象的文字颜色设置为红色 
window.mySpace.setStyle("test", "color", "#f00"); 
}

那么这种封装方式到底有何好处呢?

当然就是保护了自执行函数内的方法、变量、属性等。这样代码更加安全了。

如果不使用这种方法,那么,下面的方法也可以实现的。

window.mySpace = {}; 
window.mySpace.$ = function(id) { return document.getElementById(id); } 
window.mySpace.setStyle = function(id, styleName, styleValue) { 
window.mySpace.$("test").style[styleName] = styleValue; 
} 
//下面是测试代码 
window.onload = function() { 
window.mySpace.setStyle("test", "backgroundColor", "#f00"); 
window.mySpace.setStyle("test", "color", "#fff"); 
}

上面的代码和自执行函数实现的功能其实是一样的。

比较之后,我们可以发现,第二方法更加的直观,易于理解。但是少了封装过程,代码完全裸露在外。

Javascript 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
AngularJS Controller作用域
Jan 09 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 #Javascript
JQuery live函数
Dec 24 #Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 #Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 #Javascript
在JavaScript中获取请求的URL参数
Dec 22 #Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 #Javascript
jQuery Clone Bug解决代码
Dec 22 #Javascript
You might like
福利彩票幸运号码自动生成器
2006/10/09 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
军训自我鉴定怎么写
2014/02/13 职场文书
综合实践活动方案
2014/02/14 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
节约粮食标语
2014/06/18 职场文书
学校安全管理责任书
2014/07/23 职场文书
国庆节活动总结
2014/08/26 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
画展观后感
2015/06/17 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis