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 base64编码实现代码
Dec 02 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
微信小程序 同步请求授权的详解
2017/08/04 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python创建进程fork用法
2015/06/04 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
详解Python IO编程
2020/07/24 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
linux面试题参考答案(10)
2013/11/04 面试题
业务员的岗位职责
2014/03/15 职场文书
六五普法规划实施方案
2014/03/21 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
横店影视城导游词
2015/02/06 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书