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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
vue内置指令详解
Apr 03 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 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
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JAVA面试题 static关键字详解
2019/07/16 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
跟老齐学Python之集合的关系
2014/09/24 Python
浅析Python中的join()方法的使用
2015/05/19 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
幼儿园安全生产月活动总结
2014/07/05 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
python入门之算法学习
2021/04/22 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android