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高级程序设计 客户端存储学习笔记
Sep 10 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jquery remove方法应用详解
Nov 22 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
URL中“#” “?” &“”号的作用浅析
Feb 04 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 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实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP抽象类 介绍
2012/06/13 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
javascript引用对象的方法
2007/01/11 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Django接收自定义http header过程详解
2019/08/23 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python中os包的用法
2020/06/01 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
如何表示python中的相对路径
2020/07/08 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
高级Java程序员面试题
2016/06/23 面试题
个性大学生自我评价
2013/12/04 职场文书
小学课改工作总结
2015/08/13 职场文书
学习心得体会
2019/06/20 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
详解MySQL的半同步
2021/04/22 MySQL
python源码剖析之PyObject详解
2021/05/18 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python
tomcat下部署jenkins的方法
2022/05/06 Servers
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python