JavaScript用匿名閉包封裝模組

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面的代碼是我的測試代碼，注釋很重要：

/*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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More