seaJs学习笔记之javascript的冲突问题

seaJs是一个处理模块化的JS开源库，在学习seaJs之前还是要了解一下什么是JS模块化的一些概念，知道这个之后，会更好的了解seaJs的使用。　　首先先看一下下面的这个问题。当你的学习教程网站开发越来越复杂的时候，会经常遇到JS冲突、浏览器性能下降，JS文件互相依赖吗?如果是在多人开发或者复杂开发的过程中，经常会遇到这些问题，那么这些问题我们可以通过JS模块化来解决。所以我们先来看一下冲突问题是如何产生的。　

[html] view plaincopyprint?
<!doctype html>  
<html dir="ltr" lang="zh-CN">  
<head>  
<meta charset="utf-8">  
<title>www.xuexijc.com</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中的命名冲突问题有没有更好的解决方案呢?请大家继续关注www.xuexijc.com有关seaJs笔记的更新，答案将在日后的更新中揭晓。</p>  
<br>

来源：oschina

链接：https://my.oschina.net/u/1411768/blog/179435

标签

seajs

javascript

脚本

html代码