seaJs學習筆記之javascript的衝突問題

時間 2019-11-07

標籤 seajs 學習筆記 javascript 衝突問題欄目 JavaScript 简体版

原文原文鏈接

seaJs是一個處理模塊化的JS開源庫，在學習seaJs以前仍是要了解一下什麼是JS模塊化的一些概念，知道這個以後，會更好的瞭解seaJs的使用。　　首先先看一下下面的這個問題。當你的學習教程網站開發愈來愈複雜的時候，會常常遇到JS衝突、瀏覽器性能降低，JS文件互相依賴嗎?若是是在多人開發或者複雜開發的過程當中，常常會遇到這些問題，那麼這些問題咱們能夠經過JS模塊化來解決。因此咱們先來看一下衝突問題是如何產生的。　 javascript

[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>