如何让js不产生冲突,避免全局变量的泛滥,合理运用命名空间
为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在js中,通过{ }对象实现。
在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上,而是挂在次匿名函数的命名空间下,如:
- <script type="text/javascript">
- var GLOBAL={}
- </script>
- <script type="text/javascript">
- (function(){
- var a=123, a1=256;
- GLOBAL.A={}
- GLOBAL.A.str=a;
- })();
- </script>
- <script type="text/javascript">
- (function(){
- var b1=123, b2=256;
- GLOBAL.B={}
- GLOBAL.B.str=a;
- })();
- </script>
如果同一个匿名函数中的程序非常复杂,变量名很多,命名空间可以进一步扩展,生成二级命名空间:
- <script type="text/javascript">
- var GLOBAL={}
- </script>
- <script type="text/javascript">
- (function(){
- var a=123, a1=256;
- GLOBAL.A={};
- GLOBAL.A.CAT={};
- GLOBAL.A.DOG={};
- GLOBAL.A.CAT.name="mini";
- GLOBAL.A.CAT.move=function(){
- }
- GLOBAL.A.DOG.name="mini";
- GLOBAL.A.DOG.move=function(){
- }
- })();
- </script>
因生成命名空间是非常常用的功能,可以进一步将生成命名空间的功能定义成一个函数,方便调用,如下:
- <script type="text/javascript">
- var GLOBAL={}
- GLOBAL.namespace=function(str){
- var arr=str.split("."), o=GLOBAL;
- for(i=arr[0]=="GLOBAL"?1:0;i<arr.length; i++){
- o[arr[i]]=o[arr[i]] || {};
- o=o[arr[i]];
- }
- }
- </script>
调用命名空间具体操作:
- <script type="text/javascript">
- //=============================================================
- // 功能A
- // 工程师甲
- // email:ctkl68945@gmail.com msn:ctkl68945@hotmail.com"
- // 2012-11-06
- //=============================================================
- (function(){
- var a=123, a1="hello world";
- GLOBAL.namespace("A.CAT");
- GLOBAL.namespace("A.DOG");
- GLOBAL.A.CAT.name="mini";
- GLOBAL.A.CAT.move=function(){
- }
- GLOBAL.A.DOG.name="mini";
- GLOBAL.A.DOG.move=function(){
- }
- GLOBAL.A.str=a;
- GLOBAL.A.str1=a1;
- })();
依次类似,无论多人的直接团队开发,还是个人的间接团队合作,都需要良好的可维护性。
1、添加必要的代码注释
2、让JS不产生冲突,需避免全局变量的泛滥,合理使用命名空间
如何让js不产生冲突,避免全局变量的泛滥,合理运用命名空间的更多相关文章
- 怎样让js不产生冲突,避免全局变量的泛滥,合理运用命名空间
为了避免变量之间的覆盖与冲突.能够生成命名空间.命名空间是一种特殊的前缀,在js中,通过{ }对象实现. 在不同的匿名函数中,依据功能声明一个不同的命名空间,每一个匿名函数中GLOBAL对象的属性都不 ...
- js避免命名冲突
[1]工程师甲编写功能A var a = 1; var b = 2; alert(a+b); [2]工程师乙添加新功能B var a = 2; var b = 1; alert(a-b); [3]上一 ...
- discuz教程:discuz模板js与jQuery冲突的解决方案
今天在做discuz模板的时候,用到jquery的时候和原来主题js冲突.这个主要是Discuz X使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突. 以下是基于之 ...
- JS中的作用域以及全局变量的问题
一. JS中的作用域 1.全局变量:函数外声明的变量,称为全部变量 局部变量:函数内部使用var声明的变量,称为局部变量在JS中,只有函数作用域,没有块级作用域!!!也就是说,if/for等有{}的结 ...
- JavaScript中解决jQuery和Prototype.js同时引入冲突问题
两个库同时都定义了一个叫$的函数,所以在同时使用的时候会发生冲突.jQuery( http://jquery.com/ https://jquery.org/ )中提供了一种返还$的使用权给其他js库 ...
- Js获取iframe子页面全局变量
项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...
- js文件命名冲突理解
在一个index.html文件里先后导入a.js和b.js文件a.js文件里写上var s = 2;console.log(s);b.js文件里写上var s = 5;这时a.js和b.js用了相同的 ...
- ECSHOP中transport.js和jquery冲突的解决方法
jQuery 和global.js 冲突 百度和google多次,根据网上的大多数建议和自己测试,解决办法如下:删除global.js 或者global.js 文件的10-13行屏蔽//Object. ...
- JS高级---把局部变量变成全局变量
如何把局部变量变成全局变量? 把局部变量给window就可以了 函数的自调用---自调用函数 一次性的函数--声明的同时, 直接调用了 (function () { console.log(& ...
随机推荐
- mysql 5.6.17 x64 安装
下载地址 百度网盘地址:http://pan.baidu.com/share/link?shareid=1895747668&uk=3257050114&fid=234538452 官 ...
- atitit.添加win 系统服务 bat批处理程序服务的法总结instsrv srvany java linux
atitit.添加win 系统服务 bat批处理程序服务的法总结instsrv srvany java linux 系统服务不同于普通视窗系统应用程式.不可能简简单单地通过运行一个EXE就启动视窗系 ...
- iOS学习笔记-精华整理
iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始 ...
- Maven之打包时配置文件替换
在JavaWeb项目中,使用maven打包.在打正式包时,需要手动修改数据库配置为线上环境的地址,这样每次修改起来比较麻烦. 搜索了一些资料后,大部分的做法或原理都是预先使用表达式占位符,然后在打包时 ...
- php 3种常见设计模式
1.工厂模式 <?php namespace Facebab; class Factory { static function createDatabase () { return new Da ...
- ZPL打印中文信息
博客来源:http://www.cnblogs.com/Geton/p/3595312.html 相信各位在实际的项目中,需要开发打条码模块的也会有不少,很多同行肯定也一直觉得斑马打印机很不错,但是Z ...
- 设置Tomcat编码
设置Tomcat编码 <Connector port="8080" maxThreads="150" mi ...
- C#代码像QQ的右下角消息框一样,无论现在用户的焦点在哪个窗口,消息框弹出后都不影响焦点的变化,那么有两种方法
你QQ的右下角消息框一样,无论现在用户的焦点在哪个窗口,消息框弹出后都不影响焦点的变化,那么有两种方法: 要么重写需要弹出的窗体的事件: protected override CreateParams ...
- 在VisualStudio中应该使用什么字体
转自:http://blog.csdn.net/bclz_vs/article/details/6607695 字体通常分为几个主要类型 San-Serif:无衬线字体 Serif:有衬线的字体 Mo ...
- jsp:forward response.sendRedirect
jsp中<jsp:forward page=""/>和response.sendRedirect("")两种跳转的区别 一.response.sen ...