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

最新推荐文章于 2021-10-24 18:20:50 发布

云圣天

最新推荐文章于 2021-10-24 18:20:50 发布

阅读量2.4k

点赞数 4

分类专栏： seaJs学习笔记 seaJs学习笔记文章标签： seaJs学习笔记 javascript模块化 seaJs seaJs模块化 javascript的冲突问题

本文链接：https://blog.csdn.net/lee_magnum/article/details/13288773

版权

seaJs学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

seaJs学习笔记

11 篇文章 5 订阅

订阅专栏

　　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代码

<!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代码

<!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" 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>
<!-- 引入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>


　　看来加命名空间可以有效的防止冲突的发生。D小伙伴儿这一天也发现命名空间的好处之后，也用了个命名空间写“tab”。D小伙伴操作的页面如下



　　D小伙伴操作的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>


　　结果D小伙伴儿用的命名空间和A小伙伴儿的命名空间重复了，这样一来冲突又会发生了。不过有公司的命名空间是很大的，在一定几率上是不会发生这种问题的，但是问题还是存在的。所以命名空间是可以降低冲突发生的，但是不能避免冲突发生。
　　那么这个js中的命名冲突问题有没有更好的解决方案呢?请大家继续关注梦龙小站有关seaJs笔记的更新，答案将在日后的更新中揭晓。