js的命名空間要慎用

ThinkTank_引擎 2016-01-07

展開全文

四眼悶

js的命名空間要慎用

現(xiàn)在js有很多庫，如jQuery，prototype， mootools，Extjs，為了避免，$這個名字，重用，都會用到命名空間，也就如：

(function($){
     //真正的代碼在這里
})(jQuery);

這樣定義了一個命名空間就不怕，js庫有沖突。
但有些時候，命名空間卻帶來一些麻煩，特別兼容以往很就js，我所說的舊，是指，那些，html和js糾纏在一些，譬如：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">

現(xiàn)在js有很多庫，如jQuery，prototype， mootools，Extjs，為了避免，$這個名字，重用，都會用到命名空間，也就如：

(function($){
     //真正的代碼在這里
})(jQuery);

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>測試命名空間</title>
</head>
<body>
    <div>
        <a href="javascript:void(0)" onclick="test()">測試命名空間</a>
    </div>
    <script src="http://ajax./ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>      
    <script type="text/javascript">
        (function($){
             var test = function(){
                 alert("done");
             }
        })(jQuery);
    </script>
</body>
</html>

對于那些不懂命名空間的人來說，他們以為，會輸出一個提示框。但并不是這樣，這會報錯，錯誤是找不到test這個function。
你會很異或，我不是明明寫了嗎，就在那里??！
沒錯你是寫了，但在命名空間里寫，不是在全局上面寫了。
首先要明白，a便簽中的onclick事件是全局的，它點擊觸發(fā)的test()function也是全局，但你所寫test()卻是在命名空間。所以它會找不到。
其次，你要明白什么叫命名空間，
其實命名空間，說得簡單點，是一個已經(jīng)執(zhí)行了的匿名函數(shù)。
所寫test()function，其實是在一個匿名函數(shù)里面，test()是一個局部函數(shù)，并不是一個全局函數(shù)。
如何避免這種情況出現(xiàn)
簡單快捷的時候，你把那個函數(shù)移到命名空間外，讓它變成一個全局函數(shù)，那么html中的點擊，鼠標(biāo)，鍵盤時間就能看得到。
但我并不鼓勵這樣做，一是你的函數(shù)會用到$符號，著會和其他庫沖突，二是，你無法再調(diào)用命名空間里的東西，包括變量，對象和函數(shù)。
其實按照MVC的模式，我提倡，把html和js分離，如

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>測試命名空間</title>
</head>
<body>
    <div>
        <a href="javascript:void(0)" id="nameTestBtn">測試命名空間</a>
    </div>
    <script src="http://ajax./ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>      
    <script type="text/javascript">
        (function($){
             var test = function(){
                 alert("done");
             }
             $('#nametest').click(test);
        })(jQuery);
    </script>
</body>
</html>

如此一來，就能解決庫的沖突，和找不到function的錯誤！