频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
seaJs学习笔记之javascript的冲突问题
2013-11-28 16:36:40           
收藏   我要投稿
  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>  

点击复制链接 与好友分享!回本站首页
相关TAG标签 笔记 问题
上一篇:Extjs4中表单登录功能,实现登录成功跳转页面
下一篇:javascript解析人体运动
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站