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

电玩女神 2022-09-17 15:16 145阅读 0赞

seaJs是一个处理模块化的JS开源库，在学习seaJs之前还是要了解一下什么是JS模块化的一些概念，知道这个之后，会更好的了解seaJs的使用。

首先先看一下下面的这个问题。当你的网站开发越来越复杂的时候，会经常遇到JS冲突、浏览器性能下降，JS文件互相依赖吗?如果是在多人开发或者复杂开发的过程中，经常会遇到这些问题，那么这些问题我们可以通过JS模块化来解决。所以我们先来看一下冲突问题是如何产生的。

在多人协作或者复杂开发的时候，怎么样遇到冲突呢?假设A伙伴儿开发一个js文件可能起名字为”common.js”。这个common.js可能就写一些公用的方法，比如选项卡、拖拽和提示信息等等。common.js如下

# 　　common.js中的Javascript代码 #

function tab () {}
    
    function drag () {}
    
    function tips () {}

当A伙伴儿写好这些公用的js，也就是common.js的时候，他可能就把common.js交给了B小伙伴儿去用。B小伙伴儿就在页面中引入了common.js。然后就进行下一步的操作了去写一些代码。B小伙伴儿操作的页面如下

# 　　B小伙伴儿操作的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代码 #

<!doctype html>
    <html dir="ltr" lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <title>新建</title>
    
    <script type="text/javascript" src="common.js"></script>
     
    <script type="text/javascript" src="d.js"></script><script type="text/javascript">//D小伙伴儿写一些代码操作</script></head><body></body></html>
     
    
    
     　　在“d.js”插件当中可能也有一个函数叫“tab”。这时候D小伙伴儿去找A小伙伴儿，可能就会使A小伙伴儿更加崩溃。为什么呢?因为D小伙伴儿说：“我发现写的插件跟你写的这个插件common.js有冲突，但是这个插件里面的内容特别多。我又不好直接去改 这个插件的内容，我怕改乱了。能不能把你的这个common.js中的‘tab’换成别的名字呢?”当出现这样问题的时候，其实是最崩溃的时候。
     　　这时候，A小伙伴儿为了避免这样的冲突，会想为了防止起冲突。添加个命名空间。A小伙伴儿重新把common.js中的函数规划了一下。A小伙伴儿写了个“common2.js”。在“common2.js”中添加命名空间，假设以“mlong”为命名空间。A小伙伴儿的“common2.js”如下
     
    
    
     　　common2.js中的Javascript代码
     var mlong = {};
    
    mlong.tab = function () {};
    
    mlong.drag = function () {};
    
    mlong.tips = function () {};
    
     　　当有了命名空间之后，这时候的冲突就会大大的降低。比如D小伙伴儿再写个方法“tab”，就不会对common2.js中的“tab”起冲突了，因为前面还有个命名空间。D小伙伴操作的页面如下
     
    
    
     　　D小伙伴操作的HTML代码
     <!doctype html>
    <html dir="ltr" lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <title>新建</title>
    
    <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>
    
    
     　　看来加命名空间可以有效的防止冲突的发生。D小伙伴儿这一天也发现命名空间的好处之后，也用了个命名空间写“tab”。D小伙伴操作的页面如下
     
    
    
     　　D小伙伴操作的HTML代码
     <!doctype html>
    <html dir="ltr" lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <title>新建</title>
    
    <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>
    
    
     　　结果D小伙伴儿用的命名空间和A小伙伴儿的命名空间重复了，这样一来冲突又会发生了。不过有公司的命名空间是很大的，在一定几率上是不会发生这种问题的，但是问题还是存在的。所以命名空间是可以降低冲突发生的，但是不能避免冲突发生。
     　　那么这个js中的命名冲突问题有没有更好的解决方案呢?请大家继续关注梦龙小站有关seaJs笔记的更新，答案将在日后的更新中揭晓。