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 相关文章推荐
DOM精简教程
Oct 03 Javascript
javascript 三种编解码方式
Feb 01 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
JavaScript中的各种宽高属性的实现
May 08 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
javascript里的条件判断
2007/02/27 Javascript
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
javascript的this关键字详解
2019/05/20 Javascript
python mysqldb连接数据库
2009/03/16 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
小班重阳节活动方案
2014/02/08 职场文书
二年级评语大全
2014/04/23 职场文书
兴趣小组活动总结
2014/05/05 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
授权委托书
2014/09/17 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
公司离职证明标准样本
2014/10/05 职场文书
三峡大坝导游词
2015/01/31 职场文书
2015年大学生实习评语
2015/03/25 职场文书
小学班级管理心得体会
2016/01/07 职场文书
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏