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 相关文章推荐
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
js笔试题-接收get请求参数
Jun 15 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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
FleaPHP的安全设置方法
2008/09/15 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php中错误处理操作实例分析
2019/08/23 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
利用python画出AUC曲线的实例
2020/02/28 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
优秀部门获奖感言
2014/02/14 职场文书
就业协议书的作用
2014/04/11 职场文书
机关办公室岗位职责
2014/04/16 职场文书
品酒会策划方案
2014/05/26 职场文书
开学典礼策划方案
2014/05/28 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
工程质量保证书
2015/05/09 职场文书
Python进行区间取值案例讲解
2021/08/02 Python