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之一(对象的组成)
Jun 11 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
js验证账户名是否重复
May 26 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
11个PHP 分页脚本推荐
2011/08/15 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
ext 代码生成器
2009/08/07 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
Python pass 语句使用示例
2014/03/11 Python
python小技巧之批量抓取美女图片
2014/06/06 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
2014全国两会心得体会
2014/03/17 职场文书
中国好声音华少广告词
2014/03/17 职场文书
投资意向书范本
2014/04/01 职场文书
务虚会发言材料
2014/12/25 职场文书
结婚保证书
2015/01/16 职场文书
安全员岗位职责
2015/02/10 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
单位病假条范文
2015/08/17 职场文书
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS