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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
js回文数的4种判断方法示例
Jun 04 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
JS文本框不能输入空格验证方法
2013/03/19 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
javascript实现连续赋值
2015/08/10 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
小程序自定义日历效果
2018/12/29 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
python 读取DICOM头文件的实例
2018/05/07 Python
Django choices下拉列表绑定实例
2020/03/13 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
计算机专业推荐信范文
2013/11/27 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
小型婚礼主持词
2015/06/30 职场文书
如何写好开幕词?
2019/06/24 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书