js的命名空间要慎用

ThinkTank_引擎 2016-01-07

展开全文

四眼闷

js的命名空间要慎用

现在js有很多库，如jQuery，prototype， mootools，Extjs，为了避免，$这个名字，重用，都会用到命名空间，也就如：

(function($){
     //真正的代码在这里
})(jQuery);

这样定义了一个命名空间就不怕，js库有冲突。
但有些时候，命名空间却带来一些麻烦，特别兼容以往很就js，我所说的旧，是指，那些，html和js纠缠在一些，譬如：

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

现在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事件是全局的，它点击触发的test()function也是全局，但你所写test()却是在命名空间。所以它会找不到。
其次，你要明白什么叫命名空间，
其实命名空间，说得简单点，是一个已经执行了的匿名函数。
所写test()function，其实是在一个匿名函数里面，test()是一个局部函数，并不是一个全局函数。
如何避免这种情况出现
简单快捷的时候，你把那个函数移到命名空间外，让它变成一个全局函数，那么html中的点击，鼠标，键盘时间就能看得到。
但我并不鼓励这样做，一是你的函数会用到$符号，着会和其他库冲突，二是，你无法再调用命名空间里的东西，包括变量，对象和函数。
其实按照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的错误！