前端web学习之路(一) 避免js冲突

来源:互联网 发布:last game 软件 编辑:程序博客网 时间:2024/05/02 02:02

接触前端已经有一段时间了现在写写关于前端js编程的总结吧

一、避免js冲突

首先说说变量命名的冲突,一般多为全局变量,当一个html文件中引入多个js文件时而每个js文件中有相同的变量的时候则会发生冲突:后引入js文件的变量会覆盖前面存在的。
解决办法如下:

1、  一种简单有效的方法就是用匿名函数把脚本包起来,让变量的作用域在匿名函数之内,写法如下:
Function(){
       //代码
}()
这是一种很巧妙的形式首先定义了一个匿名的function然后立即调用。
Ps:用匿名函数把脚本包起来,可以有效控制全局变量,避免冲突。
好的 看起来这是很好的解决办法 是不是?现在假设假设A程序员写了一个脚本,然后B程序员想调用A程序员写的脚本里面定义的变量。但是在这种通过匿名函数包裹起来的方式下,是行不通的。这个时候我们应该想想别的对策。

2、  我们可以使用全局作用域变量来传递需要跨脚本的变量,我们可以在添加全局变量,但是我们要考虑到全句变量的数量问题,所以我们采用hash对象作为全局变量。如下形式:
var GLOBAL={};
//添加的变量方法如下
GLOBAL.str=”xxx”;
这样就可以添加全局变量了
但是在想想要是有很多程序员一起工作每个都添加全局变量那么还是回冲突的所以我么应该设置一个方法用来检测该全局变量是否存在同时存在并且是否重复挂载在GlOBAL下面。

3、  在这里我们引进命名空间的说法,即每个程序员在写自己的脚本的时候都为自己命名一个命名空间把需要传递的变量挂载在这下面。
下面是使用命名空间解决冲突的完整代码:
var  GLOBAL={};
GLOBAL.namespace=function(str){
   var arr=str.split(“.”),0=CLOBAL;
   for(i=(arr[0] == “GLOBAL”)?1 : 0; I <arr.length; i++){
      o[arr[[i]] = o[arr[i]] || {};
      o =o[arr[i]];
   }
}
ps:添加必要的注释,可以大大提高代码的可维护性,对于团队合作来说更是十分有必要。
通过合理的添加注释以及使用命名空间,可以很好的避免js冲突。

0 0