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 ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
js实现弹幕墙效果
Dec 10 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
js 作用域和变量详解
2017/02/16 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
一份婚庆公司创业计划书
2014/01/11 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
数学系个人求职信范文
2014/01/30 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
2015年服务员工作总结
2015/04/08 职场文书
公司员工体检通知
2015/04/21 职场文书
红色经典观后感
2015/06/18 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python