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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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
php更新mysql后获取改变行数的方法
2014/12/25 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
python mysqldb连接数据库
2009/03/16 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python 实现敏感词过滤的方法
2019/01/21 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
驾驶员安全责任书
2014/07/22 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
开学第一天的感想
2015/08/10 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
无线电通信名词解释
2022/02/18 无线电