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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 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
Home Coffee Roasting
2021/03/03 咖啡文化
php4的session功能评述(一)
2006/10/09 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
angular4自定义组件详解
2017/09/28 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python链接Oracle数据库的方法
2015/06/28 Python
python实现红包裂变算法
2016/02/16 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
毕业生大学生活自我总结
2014/01/31 职场文书
应聘英语教师求职信
2014/04/24 职场文书
2014年度安全工作总结
2014/12/04 职场文书
工会积极分子个人总结
2015/03/03 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
mysqldump进行数据备份详解
2022/07/15 MySQL