脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-seaJs学习笔记之javascript的冲突问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 seaJs是一个处理模块化的JS开源库，在学习seaJs之前还是要了解一下什么是JS模块化的一些概念，知道这个之后，会更好的了解seaJs的使用。
首先先看一下下面的这个问题。当你的网站开发越来越复杂的时候，会经常遇到JS冲突、浏览器性能下降，JS文件互相依赖吗?如果是在多人开发或者复杂开发的过程中，经常会遇到这些问题，那么这些问题我们可以通过JS模块化来解决。所以我们先来看一下冲突问题是如何产生的。
在多人协作或者复杂开发的时候，怎么样遇到冲突呢?假设A伙伴儿开发一个js文件可能起名字为”common.js”。这个common.js可能就写一些公用的方法，比如选项卡、拖拽和提示信息等等。common.js如下
common.js中的Javascript代码
[javascript]
function tab () {}
function Drag () {}
function tips () {}
当A伙伴儿写好这些公用的js，也就是common.js的时候，他可能就把common.js交给了B小伙伴儿去用。B小伙伴儿就在页面中引入了common.js。然后就进行下一步的操作了去写一些代码。B小伙伴儿操作的页面如下
B小伙伴儿操作的HTML代码
[htML]
<!doctyPE html>
<html dir="ltr" lang="zh-CN">
<head>
<;meta charset="utf-8">
<tITle>新建</title>
<!-- 引入A小伙伴儿写的公用JS -->
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
//B小伙伴儿写一些代码操作
</script>
</head>
<body>
</body>
</html>
有可能这个页面过了很长时间，B小伙伴儿不在维护维护这个页面了，B小伙伴儿把这个页面就交给了C小伙伴儿，让C小伙伴儿维护。C小伙伴儿没有看A小伙伴儿之前写好的common.js，有可能C小伙儿自己写了一个方法叫做“tab”。C小伙伴儿写的“tab”把A小伙伴儿在common.js中写的“tab”覆盖了，后写的要覆盖前面同名的函数。这样的话页面上就会出现一些问题。出现问题之后，C 小伙伴儿就会查找问题，他会查找问题。于是C小伙伴儿发现，他写了“tab”，common.js中也有个“tab”。C小伙伴儿就找到了A小伙伴儿，交流了一下两个“tab”的功能用法之后，说这两个“tab”起了冲突。这时候A小伙伴儿让C小伙伴儿把名字改一下，这时候C小伙伴儿心理肯定有些起伏，甚至有些崩溃。
这些还不算崩溃的，还有更崩溃的。另一个页面，D小伙伴儿同样，也是没看A小伙伴儿写的common.js，在页面中引入了一个其他网站的已经写好的插件，比如叫“d.js”。D小伙伴操作的页面如下
D小伙伴操作的HTML代码
[html]
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>新建</title>
<!-- 引入A小伙伴儿写的公用JS -->
<script type="text/javascript" src="common.js"></script>
<PRe name="code" class="html"><!-- 引入其他网站写好的插件 -->
</pre><script type="text/javascript" src="d.js"></script><script type="text/javascript">//D小伙伴儿写一些代码操作</script></head><body></body></html>
<pre></pre>
<br>
<p> 在“d.js”插件当中可能也有一个函数叫“tab”。这时候D小伙伴儿去找A小伙伴儿，可能就会使A小伙伴儿更加崩溃。为什么呢?因为D小伙伴儿说：“我发现写的插件跟你写的这个插件common.js有冲突，但是这个插件里面的内容特别多。我又不好直接去改 这个插件的内容，我怕改乱了。能不能把你的这个common.js中的‘tab’换成别的名字呢?”当出现这样问题的时候，其实是最崩溃的时候。</p>
<p> 这时候，A小伙伴儿为了避免这样的冲突，会想为了防止起冲突。添加个命名空间。A小伙伴儿重新把common.js中的函数规划了一下。A小伙伴儿写了个“common2.js”。在“common2.js”中添加命名空间，假设以“mlong”为命名空间。A小伙伴儿的“common2.js”如下</p>
<p><br>
</p>
<h1><a name="t3"></a> common2.js中的Javascript代码</h1>
<pre name="code" class="javascript">VAR mlong = {};
mlong.tab = function () {};
mlong.drag = function () {};
mlong.tips = function () {};</pre><br>
<p> 当有了命名空间之后，这时候的冲突就会大大的降低。比如D小伙伴儿再写个方法“tab”，就不会对common2.js中的“tab”起冲突了，因为前面还有个命名空间。D小伙伴操作的页面如下</p>
<p><br>
</p>
<h1><a name="t4"></a> D小伙伴操作的HTML代码</h1>
<pre name="code" class="html"><!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>新建</title>
<!-- 引入A小伙伴儿写的公用JS -->
<script type="text/javascript" src="common2.js"></script>
<script type="text/javascript">
//D小伙伴儿写的tab
function tab () {}
tab();
//A小伙伴儿写的mlong.tab
mlong.tab();
</script>
</head>
<body>
</body>
</html>
</pre><br>
<p> 看来加命名空间可以有效的防止冲突的发生。D小伙伴儿这一天也发现命名空间的好处之后，也用了个命名空间写“tab”。D小伙伴操作的页面如下</p>
<p><br>
</p>
<h1><a name="t5"></a> D小伙伴操作的HTML代码</h1>
<pre name="code" class="html"><!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>新建</title>
<!-- 引入A小伙伴儿写的公用JS -->
<script type="text/javascript" src="common2.js"></script>
<script type="text/javascript">
//D小伙伴儿写的有命名空间的tab
var mlong = {};
mlong.tab = function () {}
mlong.tab();
</script>
</head>
<body>
</body>
</html>
</pre><br>
<p> 结果D小伙伴儿用的命名空间和A小伙伴儿的命名空间重复了，这样一来冲突又会发生了。不过有公司的命名空间是很大的，在一定几率上是不会发生这种问题的，但是问题还是存在的。所以命名空间是可以降低冲突发生的，但是不能避免冲突发生。</p>
<p> 那么这个js中的命名冲突问题有没有更好的解决方案呢?请大家继续关注梦龙小站有关seaJs笔记的更新，答案将在日后的更新中揭晓。</p>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-seaJs学习笔记之javascript的冲突问题全部内容，希望文章能够帮你解决javascript代码实例教程-seaJs学习笔记之javascript的冲突问题所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。