常见JS冲突一般性解决方法+EcShop JS一般性总结

2016-07-07 15:02 来源：www.chinab4c.com 作者：ecshop专家



1、一般JS冲突解决办法

a．最容易出现的就是JS 的命名冲突

①、变量名冲突

变量有全局变量和局部变量当全局变量变量和局部变量名称一致时，就会js冲突，由于变量传递数值或地址不同就会产生JavaScript错误，甚至死循环。


②、方法名冲突

函数中有很多方法，不同的js之间可能函数名一样，这就使得程序执行时不知道改调用那个方法或者哪个方法执行后的结果，最终导致程序加载失败。

③、函数名冲突

一般是命名导致JS冲突。解决方法主要是查找在加载的js中是否具有相同命名的情况，然后修改命名；

b．onload 事件冲突

如果在js中调用了window.onload = function()，同时在页面上又有body onload语句,会导致window.onload事件覆盖掉body onload事件而出现错误.

解决方法： attachEvent给onload添加所需运行的函数。

回答：
c．浏览器不兼容问题，虽然这个不属于js冲突但是也常见的js的原因之一

① document.form.item 问题
　　(1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 Fx 下运行
　　(2)解决方法: 改用 document.formName.elements["elementName"]

②集合类对象问题

(1)现有问题: 现有代码中许多集合类对象取用时使用 ()，IE 能接受，Fx 不能。
　
(2)解决方法: 改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")

③window.event

(1)现有问题: 使用 window.event 无法在 Fx 上运行
　　(2)解决方法: Fx 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通:
　　原代码(可在IE中运行):

代码:

<inputtype="button" name="someButton" value="提交
"onclick="javascript:gotoSubmit()"/>

...

<script language="javascript">

function gotoSubmit() {

...

alert(window.event);
// use window.event

...

}

</script>


新代码(可在IE和Fx中运行):

代码:

<input type="button" name="someButton" value="提交"
onclick="javascript:gotoSubmit(event)"/>

...

<script language="javascript">

function gotoSubmit(evt) {

evt = evt ? evt : (window.event ? window.event : null);

...

alert(evt);
// use evt

...

}

</script>

此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老 代码兼容。

④HTML 对象的 id 作为对象名的问题
(1)现有问题 ：在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 Fx 中不能。
　　(2)解决方法 ：用getElementById("idName") 代替 idName 作为对象变量使用。

⑤用idName字符串取得对象的问题

(1)现有问题 ：在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在Fx 中不能。

(2)解决方法 ：用 getElementById(idName) 代替 eval(idName)。

⑥变量名与某 HTML 对象 id 相同的问题
　　(1)现有问题 ：在 Fx 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
　　(2)解决方法 ：在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

⑦event.x 与 event.y 问题

(1)现有问题 ：在IE 中，event 对象有 x, y 属性，Fx中没有。

(2)解决方法 ：在Fx中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
　　event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候)，不过大多数时候是等效的。 如果要完全一样，可以稍麻烦些:
　　mX = event.x ? event.x : event.pageX;
　　然后用 mX 代替 event.x
　　 (3)其它：event.layerX 在 IE 与 Fx 中都有，具体意义有无差别尚未试验。



⑧关于frame


(1)现有问题 ：在 IE中 可以用window.testFrame取得该frame，Fx中不行
　　 (2)解决方法 ：在frame的使用方面Fx和ie的最主要的区别是: 如果在frame标签中书写了以下属性:
　　 <frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象 ，而Fx只可以通过name来访问这个frame对应的window对象，例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
　
ie: window.top.frameId或者window.top.frameName来访问这个window对象
　　 Fx: 只能这样window.top.frameName来访问这个window对象
　
另外，在Fx和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签 ，并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容 ，也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

⑨在Fx中，自己定义的属性必须getAttribute()取得

⑩在Fx中没有 parentElement parement.children 而用
　　parentNode parentNode.childNodes
　　childNodes的下标的含义在IE和Fx中不同，Fx使用DOM规范，childNodes中会插入空白文本节点。
　　一般可以通过node.getElementsByTagName()来回避这个问题。 当html中节点缺失时，IE和Fx对parentNode的解释不同，例如
　　
<form>
　　
<table>
　　
<input/>
　　
</table>
　　
</form>
　　Fx中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
　　Fx中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

鈶�const 问题
　　(1)现有问题: 在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
　　(2)解决方法: 不使用 const ，以 var 代替。
　　鈶�.. body 对象
　　Fx的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
　　鈶�. url encoding
　 在js中如果书写url就直接写&不要写&amp;例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
　　frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到 ,当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&amp;

一般Fx无法识别js中的&amp;
　　鈶�. nodeName 和 tagName 问题
　　(1)现有问题: 在Fx中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
　
有问题(具体情况没有测试，但我的IE已经死了好几次)。
　　(2)解决方法: 使用 tagName，但应检测其是否为空。
　　鈶�元素属性：IE下 input.type属性为只读，但是Fx下可以修改

鈶�document.getElementsByName() 和 document.all[name] 的问题
　　(1)现有问题: 在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。

鈶�待续…

d．触发事件（onmousemove、onclick）
e．火狐浏览器对一些js屏蔽、过滤
2、养成良好的js代码编写习惯
①. 总是使用 ‘var’
在javascript中，变量不是全局范围的就是函数范围的，使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function-level）的变量，需总是前置”var”关键词，下面的例子将强调不这样做潜在的问题。
不使用 Var 造成的问题
var i=0; // This is good - creates a global variable
function test() {
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
test();
alert(i); // The global variable i is now 10!
因为变量函数中变量 i 并没有使用 var 使其成为函数级的变量，在这个例子中它引用了全局变量。总是使用 var 来声明全局变量是一个很多的做法，但至关重要的一点是使用 var 定义一个函数范围的变量。下面这两个方法在功能上是相同的：
正确的函数
function test() {
var i=0;
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
正确的函数
function test() {
for (var i=0; i<10; i++) {
alert("Hello World!");
}
}
②. 特性检测而非浏览器检测
一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个，总的来说，是一个非常糟的实践。更好的方法是使用特性检测，在使 用一个老浏览器可能不支持的高级的特性之前，首先检测（浏览器的）是否有这个功能或特性，然后使用它。这单独检测浏览器版本来得更好，即使你知道它的性 能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html找到一个深入讨论这个问题的文章。
例子：
If (document.getElementById) {
var element = document.getElementById('MyId');
}
Else {
alert('Your browser lacks the capabilities required to run this script!');
}

③. 使用方括号记法

当访问由执行时决定或者包括要不能用”.”号访问的对象属性，使用方括号记法。如果你不是一个经验丰富的Javascript程序员，总是使用方括号是一个不错的做法,对象的属性由两种固定的方法来访问：”.”记法和”[ ]“方括号记法：“.”号记法
MyObject.property“[ ]“方括号记法MyObject["property"]

使用”.”号，属性名是硬代码，不能在执行时改变。使用”[ ]“方括号，属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码，也可能是变量，甚至可以是一个调回一个字母串值的函数。如果一个属性名在执行产生，方括号是必须，如果你有 “value1″, “value2″, 和 “value3″这样的属性，并且想利用变量 i=2来访问

这个可以运行：

MyObject["value"+i]

这个不可以：

MyObject.value+i

并且在某些服务器端环境（PHP、Struts等）下，Form 表单被附加了 [ ] 号来表示 Form 表单在服务器端必须被当作数组来对待。如此，用”.”号来引用一个包含 [ ] 号的字段将不会执行，因为 [ ] 是引用一个 Javascript 数组的语法。所以，[ ] 号记法是必须的：

这个可以运行：

formref.elements["name[]"]

这个不可以：

formref.elements.name[]

推荐使用”[ ]“方括号记法是说当其需要时（明显地）总是使用它。当不是严格需要使用它的时候，它是一个私人的偏好和习惯。一个好的经验原则是，使用”.”号记法访问标准的对象属性，使用”[ ]“方括号记法访问由页面定义的对象属性。这样，document["getElementById"]() 是一个完美可行的”[ ]“方括号记法用法，但 document.getElementById() 在语法上是首选，因为 getElementById 是一个 DOM 规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性，哪个属性名是由上下文所定义的，在代码中显得清晰明了：

document.forms["myformname"].elements["myinput"].value

这里，forms 是 document 的一个标准属性，而表单名 myformname 则是由页面所定义的。同时，elements 和 value 属性都是由规范所定义的标准属性。而 myinput 则是由页面所定义的。这页是句法让人非常容易理解（代码的内容），是一个推荐遵循的习惯用法，但不是严格原则。

④避免 ‘eval’

在Javascript中，eval()功能是一个在执行期中执行任意代码的方法。在几乎所有的情况下，eval 都不应该被使用。如果它出现在你的页面中，则表明你所做的有更好的方法。举一个例子，eval 通常被不知道要使用方括号记法的程序员所使用。
原则上，”Eval is evil（Eval是魔鬼）”。别使用它，除非你是一个经验丰富的开发者并且知道你的情况是个例外。


⑤.. 正确地引用表单和表单元素

所有的 html 表单都应该有一个 name 属性。对于 XHTML 文档来说，name 属性是不被要求的，但 Form 标签中应有相应有 id 属性，并必须用 document.getElementById() 来引用。使用像 document.forms[0] 这样的索引方法来引用表单，在几乎所有情况下，是一个糟糕的做法。有些浏览器把文档中使用 form 来命名的元素当作一个可用的 form 属性。这样并不可靠，不应该使用。

下面这个例子用使用方括号和正确的对象引用方法来展示如何防止错误地引用一个表单的input：

正确引用表单 Input：

document.forms["formname"].elements["inputname"]

糟糕的做法:

document.formname.inputname

如果你要引用一个函数里的两个表单元素，较好的做法是先引用这个form对象，并将其储存在变量中。这样避免了重复查询以解决表单的引用：

var formElements = document.forms["mainForm"].elements;

formElements["input1"].value="a";

formElements["input2"].value="b";

当你使用 onChange 或者其他类似的事件处理方法，一个好的做法是总是通过一个引来把 input 元素本身引用到函数中来。所有 input 元素都带有一个对包含其在内的Form表单有一个引用：

<input type="text" name="address">

function validate(input_obj) {// 引用包含这个元素的form


var theform = input_obj.form;// 现在你可以不需要使用硬代码来引用表单自身


if (theform.elements["city"].value=="") {


alert("Error");


}

}


通过对表单元素的引用来访问表单的属性，你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。这是一个非常好的做法，因为函数变得可重用。
避免 ‘with’

Javascript 中的 with 声明在一个作用域的前端插入一个对象，所以任何属性/变量的引用将会倚着对象被首先解决。这通常被用作一个避免重复引用的快捷方法：
使用 with 的例子：

with (document.forms["mainForm"].elements) {


input1.value = "junk";


input2.value = "junk";
}

但问题在于程序员并没有方法来验证 input1 或 input2 实际上已经被当作 Form 元素数组的属性来解决。它首先以为这些名来检测属性，如果找不到，它将会继续（向下）检测这个作用域。最后，它在全局对象中尝试把input1 和 input2 作为一个全局对象来对待，而这以一个错误作为结尾。
变通的方法是：创建一个引用来减少引用的对象，并使用它来解决这些引用。
使用一个引用：

var elements = document.forms["mainForm"].elements;

elements.input1.value = "junk";

elements.input2.value = "junk";

⑥. 在锚点中使用 “onclick” 替代 “javascript: Pseudo-Protocol”
如果你想在 <a> 标签中触发Javascript 代码，选择 onclick 而非 JavaScript: pseudo-protocol；使用 onclick 来运行的 Javascript 代码必须返回 ture 或者false（or an expression than evalues to true or false [这句要怎么翻译呢? 我是这样理解的：一个优先性高于true 或 false 的表达式]）来返回标签本身：如果返回 true，则锚点的 href 将被当作一个一般的链接；如果返回 false，则 href 会被忽略。这就是为什么”return false;” 经常被包含在 onclick 所处理代码的尾部。

正确句法：

<a href="javascript_required.html">go</a>

在这个实例中，”doSomething()” 函数(定义于页面的某个角落)将在被点击时调用。href 将永远不会被启用了Javascript 的浏览器访问。在你可以提醒Javascript 是必须的、而用户未启用之的浏览器中，文档 javascript_required.html 才会被加载。通常，当你确保用户将会开启 Javascript 支持，为尽量简化，链接将只包含 href=”#”。而这个做法是不被鼓励的。通常有一个不错的做法是：可以提供没用启用 javascript 一个返回本地的页面。

有时，众多想要分情况来访问一个链接。例如，当一个用户要离开你的一个表单页面，而想先验证来确保没有东西被改变。在这个情况下，你的 onclick 将会访问一个返回询问链接是否应该被遵循的函数：
有条件的链接访问:

<a href="/">Home</a>


function validate() {


return prompt("Are you sure you want to exit this page?");

}

在这个实例中，validate() 函数必须只返回 ture 或 false。ture 的时候用户将被允许问题 home 页面，或 false 的时候链接不被访问。这个例子提示确认（其行为），以访问 ture 或 false，这完全由用户点击”确实”或者”取消”决定。

下面是一些”不应该”的例子。如果你在自己的页面中看到下面这样的代码，这是不正确的，需要被修改：

什么是不应该做的：

<a href="javascript:doSomething()">link</a>

<a href="#">link</a>

<a href="#">link</a>

<a href="#">link</a>

⑦. 使用一元 ‘+’ 号运算符使类型转向Number
在Javascript中，”+”号运算符同时充当数学加号和连接符。这会在form表单的域值相加时出现问题，例如，因为Javascript是 一个弱类型语言，form 域的值将会被当作数组来处理，而你把它们”+”一起的时候，”+”将被当成连接符，而非数学加号。
有问题的例子:

<form name="myform" action="[url]">

<input type="text" name="val1" value="1">

<input type="text" name="val2" value="2">

</form>


function total() {

var theform = document.forms["myform"];


var total = theform.elements["val1"].value + theform.elements["val2"].value;


alert(total); // 这个将会弹出 "12", 但你想要的是 3!
}

解决这个问题，Javascript 需要一个提示来让它把这些值当做数字来处理。你可以使用”+”号来把数组转换成数字。给变量或者表达式前置一个”+”号将会强制其当作一个数字来处理，而这也将使得数学”+”得以成功应用。
修改好的代码：

function total() {


var theform = document.forms["myform"];


var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);


alert(total); // This will alert 3

}

⑧避免 document.all

document.all 是由Microsoft 的 IE 所引进的，并不是一个标准的 Javascript DOM 特性。尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码，（而）还有很多浏览器是不支持的。
并没有理由其他方法都不适用，而一个老的IE浏览器（<5.0）需要支持，而在Javascript中使用 document.all 作为一个折衷方法。 你并不需要使用 document.all 来检测其是不是IE浏览器，因为其他浏览器现在一般都支持。

只把 document.all 当做最后的选择：

if (document.getElementById) {


var obj = document.getElementById("myId");

}

else if (document.all) {


var obj = document.all("myId");

}

一些使用 document.all 的原则：

同尝试其他方法

当其作为最后的选择

当需要支持 5.0 版本以下的 IE 浏览器

总是使用 “if (document.all) { }” 来查看是否支持.

⑨.不要在脚本代码块中使用HTML注释

在 Javascript 的旧日子（1995）里，诸如 Netscape 1.0 的一些浏览器并不支持或认识 <script> 标签。所以，当 Javascript 第一次被发布，需要有一个技术来让实些代码不被当做文本显示于旧版浏览器上。有一个”hack” 是在代码中使用 HTML 注释来隐藏这些代码。
使 HTML 注释并不好：

<script language="javascript">

<!--



// code here

//-->

</script>

在今天，没有任何一个常用的浏览器会忽略掉 <script> 标签。因此，再没必要隐藏 Javascript 源代码。事实上，它还可以因为下面的理由，被认为是无益的：
在 XHTML 文档中，源代码将向所有浏览器隐藏并被渲染成无用的（内容）；
– 在 HTML 注释并不允许 ，这个会让任何递减操作将失效。

⑩避免乱用全局命名空间

一般很少需要全部变量和函数。全局使用将可能导致 Javascript 源文件文档冲突，和代码中止。因此，一个好的做法是在一个全局命名空间内采用函数性的封装。有多个方法可以完成这个任务，有此相对比较复杂。最简单的方法是创建一个全局对象，并把属性和方法指派给这个对象：

创建一个命名空间：

var MyLib = {}; // global Object cointainer

MyLib.value = 1;

MyLib.increment = function() { MyLib.value++; }

MyLib.show = function() { alert(MyLib.value); }


MyLib.value=6;

MyLib.increment();

MyLib.show(); // alerts 7

命名空间也可以使用 Closures（闭包?） 来创建，并且 Private Member Variables （私有变量?） 也可以伪装于 Javascript中。

鈶�避免同步的 ‘ajax’ 调用

当使用”Ajax”请求时，你要么选择异步模式，要么使用同步模式。当浏览器行为可以继续执行，异步模式将请求放在后台执行，同步模式则会等待请求完成后才继续。
应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器，直至请求返回。一旦服务器忙，并需要一段时间来完成请求，用户的浏览器（或者 OS）将不能做任何其他的事，直至请求超时。
如果你觉得自己的情况需要同步模式，最大的可能是你需要时间来重新想一下你的设计。很少（如果有的话）实际上需要同步模式的 Ajax 请求。

鈶�.使用 JSON

当需要将数据结构存储成纯文本，或者通过 Ajax 发送/取回数据结构，尽可能使用 JSON 代替 XML。JSON (JavaScript Object Notation) 是一个更简洁有效的数据存储格式，并且不依赖任何语言（and is a language-neutral）。

鈶�使用正确的 <script> 标签

不造成在 <script> 中的使用LANGUAGE 属性。一个合适的方式是创建如下的 Javascript 代码块：

<script type="text/javascript">

// code here

</script>

自己总结 有部分是自己搜集的资料如果有误望指教。

太厉害了，正需要，但是我怎么消化啊。

好贴 要支持 呵呵