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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
javascript模块化简单解析
Apr 07 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
javascript中json基础知识详解
Jan 19 Javascript
微信小程序登录时如何获取input框中的内容
Dec 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
PHP中常用数组处理方法实例分析
2008/08/30 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
js下弹出窗口的变通
2007/04/18 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JS功能代码集锦
2016/05/04 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
个人授权委托书模板
2014/09/14 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
毕业论文致谢信
2015/05/14 职场文书
负责培养人意见
2015/06/05 职场文书
教师节大会主持词
2015/07/06 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL
关于python爬虫应用urllib库作用分析
2021/09/04 Python