`
阿尔萨斯
  • 浏览: 4169980 次
社区版块
存档分类
最新评论

JavaScript用匿名闭包封装模块

 
阅读更多

下面的代码是我的测试代码,注释很重要:

/*global window,jQuery,validate_email,masterUI,$,rest*/
/** Enable ECMAScript "strict" operation for this function. See more:                                                                                                             
 * http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/                                                                                                                 
 * http://stackoverflow.com/questions/5020479/what-advantages-does-using-functionwindow-document-undefined-windo                                                                 
 * Q1: Why are window and document being fed instead of just being accessed normally?                                                                                            
 * A1: Generally to fasten the identifier resolution process, having them as local variables can help (although IMO the performance improvements may be negligible).             
 * A2: Passing the global object is also a widely used technique on non-browser environments, where you don't have a window identifier at the global scope, e.g.:                
 * (function (global) {                                                                                                                                                          
 *  //..                                                                                                                                                                         
 * })(this); // this on the global execution context is the global object itself                                                                                                 
 * A3: Passing window and document allows the script to be more efficiently minified                                                                                             
 *                                                                                                                                                                               
 * Q2: Why the heck is undefined being passed in?                                                                                                                                
 * A1: This is made because the undefined global property in ECMAScript 3, is mutable, meaning that someone could change its value affecting your code, for example:             
 * undefined = true; // mutable                                                                                                                                                  
 * (function (undefined) {                                                                                                                                                       
 * alert(typeof undefined); // "undefined", the local identifier                                                                                                                 
 * })(); // <-- no value passed, undefined by default                                                                                                                            
 * If you look carefully undefined is actually not being passed (there's no argument on the function call),                                                                      
 * that's one of the reliable ways to get the undefined value, without using the property window.undefined.                                                                      
 *                                                                                                                                                                               
 */
(function(window, document, undefined) {
    "use strict";
    window.test = {
        init: function () {
            "use strict";
            alert("ok");
        }
    };

})(window, document);// no undefined parameter here to avoid using mutable window.undefined changed by other guy
1.说明,参考了一篇文章和stackoverflow上的一个帖子

2.(function(){})() 这种代码写在独立的js文件里,当js文件被html加载的时候,该函数就会执行。实际上创建了windows.text对象。

以后html代码就可用test.init的形式调用方法。

测试html部分代码如下:

  <head>
    <title>AppEngine SDK</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../master/script/third_party/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../master/plugin/jquery-validation-1.9.0/jquery.validate.js"></script>
    <script type="text/javascript" src="../../master/plugin/artDialog4.1.6/jquery.artDialog.js"></script>
    <script type="text/javascript" src="../../master/script/app/test.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
      test.init();
      })
    </script>
  </head>

3.Jslint会报两个问题,一是关于undefined的,没找到什么好方法,任它抱怨吧。另一格式最后调用方式要改成:

}(window, document));
无所谓了,就任由它吧。只要功能正常就行。

最后推荐一篇文章,前面的基础部分非常清晰的描述了anonymous closures 的使用。搞JavaScript的朋友看看会很有帮助。

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics