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 相关文章推荐
JS获取后台Cookies值的小例子
Mar 04 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
微信小程序实现批量倒计时功能
Nov 01 Javascript
JavaScript实现省市联动效果
Nov 22 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中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
JS字符串常用操作方法实例小结
2019/06/24 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
使用python获取电脑的磁盘信息方法
2018/11/01 Python
在python中修改.properties文件的操作
2020/04/08 Python
Python数据可视化图实现过程详解
2020/06/12 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
打架检讨书800字
2014/01/10 职场文书
年终考核评语
2014/01/19 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
2014年转正工作总结
2014/11/08 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2014年营销工作总结
2014/11/22 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python
Java获取字符串编码格式实现思路
2022/09/23 Java/Android
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS