如何让js不产生冲突,避免全局变量的泛滥,合理运用命名空间



为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在js中,通过{ }对象实现。

在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上,而是挂在次匿名函数的命名空间下,如:

  1. <script type="text/javascript">
  2. var GLOBAL={}
  3. </script>
  4. <script type="text/javascript">
  5. (function(){
  6. var a=123, a1=256;
  7. GLOBAL.A={}
  8. GLOBAL.A.str=a;
  9. })();
  10. </script>
  11. <script type="text/javascript">
  12. (function(){
  13. var b1=123, b2=256;
  14. GLOBAL.B={}
  15. GLOBAL.B.str=a;
  16. })();
  17. </script>

如果同一个匿名函数中的程序非常复杂,变量名很多,命名空间可以进一步扩展,生成二级命名空间:

  1. <script type="text/javascript">
  2. var GLOBAL={}
  3. </script>
  4. <script type="text/javascript">
  5. (function(){
  6. var a=123, a1=256;
  7. GLOBAL.A={};
  8. GLOBAL.A.CAT={};
  9. GLOBAL.A.DOG={};
  10. GLOBAL.A.CAT.name="mini";
  11. GLOBAL.A.CAT.move=function(){
  12. }
  13. GLOBAL.A.DOG.name="mini";
  14. GLOBAL.A.DOG.move=function(){
  15. }
  16. })();
  17. </script>

因生成命名空间是非常常用的功能,可以进一步将生成命名空间的功能定义成一个函数,方便调用,如下:

  1. <script type="text/javascript">
  2. var GLOBAL={}
  3. GLOBAL.namespace=function(str){
  4. var arr=str.split("."), o=GLOBAL;
  5. for(i=arr[0]=="GLOBAL"?1:0;i<arr.length; i++){
  6. o[arr[i]]=o[arr[i]] || {};
  7. o=o[arr[i]];
  8. }
  9. }
  10. </script>

调用命名空间具体操作:

  1. <script type="text/javascript">
  2. //=============================================================
  3. //     功能A
  4. //     工程师甲
  5. //     email:[email protected]     msn:[email protected]"
  6. //     2012-11-06
  7. //=============================================================
  8. (function(){
  9. var a=123, a1="hello world";
  10. GLOBAL.namespace("A.CAT");
  11. GLOBAL.namespace("A.DOG");
  12. GLOBAL.A.CAT.name="mini";
  13. GLOBAL.A.CAT.move=function(){
  14. }
  15. GLOBAL.A.DOG.name="mini";
  16. GLOBAL.A.DOG.move=function(){
  17. }
  18. GLOBAL.A.str=a;
  19. GLOBAL.A.str1=a1;
  20. })();

依次类似,无论多人的直接团队开发,还是个人的间接团队合作,都需要良好的可维护性。

1、添加必要的代码注释

2、让JS不产生冲突,需避免全局变量的泛滥,合理使用命名空间

如何让js不产生冲突,避免全局变量的泛滥,合理运用命名空间,布布扣,bubuko.com

时间: 2024-10-13 00:37:11

如何让js不产生冲突,避免全局变量的泛滥,合理运用命名空间的相关文章

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

如何避免JS变量命名冲突

先看问题: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>变量作用域问题</title> <script> //程序员a写的代码 var a=123; alert( a); </script> </head> <body> <script> //程序员b写的代码 var a=89;

ecshop transport.js 和 jquery 冲突解决办法

您提供一个简单的解决transport.js 和 jquery 方法: 在 page_header.lbi 库文件中加入如下代码,注意操作顺序: 1.先导入transport.js  文件 {insert_scripts files='transport.js,utils.js'} 2.然后导入您网站使用的jquery文件 <script language="javascript" src="您的jquery存放路径"></script> 3

js避免命名冲突

[1]工程师甲编写功能A var a = 1; var b = 2; alert(a+b);//3 [2]工程师乙添加新功能B var a = 2; var b = 1; alert(a-b);//1 [3]上一步中,工程师乙在不知情的情况下,定义了同名变量a,产生冲突.于是使用匿名函数将脚本包起来,让变量作用域控制在匿名函数之内. //功能A (function(){ var a = 1; var b = 2; alert(a+b);//3 })(); //功能B (function(){ v

jquery和其他js库起冲突的解决方法

我以为jquery只会和其他js框架如(Dojo,Prototype,ExtJs)等发生冲突 今天用了一下My97DatePicker日历控件 当我同时引入jquery.js和/My97DatePicker/WdatePicker.js时,出现错误,日历控件不可用 应该是js库发生冲突了 做了如下改动: var $j=jQuery.noConflict(); 以后用jquery的时候不再用$而是$j 这样问题就解决了.. 再分享一下我老师大神的人工智能教程吧.零基础!通俗易懂!风趣幽默!还带黄段

discuz教程:discuz模板js与jQuery冲突的解决方案

今天在做discuz模板的时候,用到jquery的时候和原来主题js冲突.这个主要是Discuz X使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突. 以下是基于之前的Discuz X和jQuery冲突的解决办法.给大家做个参考! 将jQuery的js文件jquery-1.8.0.min.js放到/static/js目录下,以下两个方法共用此文件,如不是放在该目录下,后面的代码请对应修改. 解决方法1: 修改/template/default/common/h

ECSHOP中transport.js和jquery冲突的解决方法

jQuery 和global.js 冲突 百度和google多次,根据网上的大多数建议和自己测试,解决办法如下:删除global.js 或者global.js 文件的10-13行屏蔽//Object.prototype.extend = function(object)//{// return Object.extend.apply(this, [this, object]);//}并且希望官网的人能解释下 global.js 文件的实际用处,上面的解决办法影响平台不 在html文件的最后面添加

JS高级---把局部变量变成全局变量

如何把局部变量变成全局变量? 把局部变量给window就可以了 函数的自调用---自调用函数 一次性的函数--声明的同时, 直接调用了 (function () { console.log("函数"); })(); 局部变量 页面加载后.这个自调用函数的代码就执行完了 (function (形参) { var num = 10;//局部变量 })(实参); console.log(num); 把局部变量给window, 则局部变量变成全局变量 (function (win) { var

js全局购物车加减全局变量计数

<!DOCTYPE html><html><head><meta charset="utf-8"><title>安心牧羊人</title></head><body> <p>全局变量计数.</p><button type="button" onclick="myFunction1()">-</button>