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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python从零开始创建区块链
2018/03/06 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
2014年督导工作总结
2014/11/19 职场文书
优秀教师个人材料
2014/12/15 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
教师思想工作总结2015
2015/05/13 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python