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:地址栏载入脚本代码
Oct 13 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
JS实现随机抽选获奖者
Nov 07 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/12/07 PHP
php简单统计中文个数的方法
2016/09/30 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
详解Python字符串对象的实现
2015/12/24 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
2015年双拥工作总结
2015/04/08 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
pytorch中的model=model.to(device)使用说明
2021/05/24 Python