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

  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笔记的更新,答案将在日后的更新中揭晓。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值