這是什么JavaScript編碼風格？

Question

我正在努力維護具有以下編碼風格的ASP.NET MVC應用程序。 該觀點有：

<script type="text/javascript">

    $(document).ready(function() {

        SAVECUSTOMERS.init();
    });
</script>

這里包含一個js文件：

var SAVECUSTOMERS = (function() {

    init = function () {

        $("#saveCust").bind("click", OnSave);
        $("#cancel").bind("click", OnCancel);

    },

    OnSave= function() {

        //Save Logic;

    },

    OnCancel = function() {
                //Cancel logic;

    }

    return { init: init };

})();

1. 這是JS編碼風格的最佳實踐嗎？ 意圖是非突兀的JS嗎？
2. 什么是SAVECUSTOMERS？ 我知道有不同的方法在javascript中創建類（根據此鏈接 ），但此樣式不屬於列出的任何類別
3. 我在哪里可以找到有關這種JS編碼風格的更多信息？

Answer 1

1）使用$（document）.ready（或來自另一個庫的類似函數）函數被認為是JavaScript中的標准實踐。 首先，它確保您的JavaScript在已完成評估/構建DOM的頁面上執行。 並且它還在識別DOM實際上准備就緒時抽象出一些瀏覽器實現的不一致性。 但我假設你主要是指第二個代碼塊。

你看到的是，SAVECUSTOMERS被分配了一個自動執行匿名函數的結果。 這樣做有幾個原因，最常見的是能夠控制匿名函數內的函數和數據的范圍和“命名空間”。 這是因為JavaScript具有詞法范圍，而不是塊級范圍。

在JavaScript中使用這些自調用函數的做法非常普遍

但是代碼本身有幾個問題。 變量init，OnSave和OnCancel被聲明為全局變量（因為省略了var關鍵字）。 這在很大程度上違背了將它們包裝在自我調用函數中的目的。 此外，該函數的內容使用對象分配語法和標准表達式語法的混合，這將導致語法錯誤。

此外，通過僅返回init函數，onSave和onCancel函數已通過使用閉包被有效地“隱藏”或變為“私有”。 這有助於保持名稱空間的清潔和封裝。

如果我正在編寫這段代碼（這里有一些個人的貢獻，有幾種方法可以實現simliar），那么它看起來像這樣：

var SaveCustomers = (function($) {
    var init = function () {
        $("#saveCust").bind("click", onSave);
        $("#cancel").bind("click", onCancel);
    };

    var onSave = function() {
        //Save Logic;
    };

    var onCancel = function() {
        //Cancel logic;
    }

    return { init: init };

})(jQuery);

關於上述的一些注意事項：

• 我使用var關鍵字聲明變量。 這使它們的范圍保持在本函數的本地（你也可以在技術上使用命名函數聲明）

• 我將jQuery作為自調用函數中的參數傳遞，並將其作為函數調用中的參數賦值給$。 這保護了函數內部的$變量，以便我們知道它引用了jQuery，並且還沒有被也使用$的二級庫所驅動。

2）SAVECUSTOMERS是一個基本的JavaScript對象，它有一個名為'init'的屬性，其值是一個函數，由執行中的init聲明定義。

3）不確定如何回答這個問題 - 理解JavaScript最佳實踐的最佳選擇是閱讀已知具有高質量的其他JavaScript代碼，例如jQuery源代碼，Prototype或Underscore等。

Answer 2

這種風格被稱為jquery ...你檢查過JQuery網站，看看它...

Answer 3

這在javascript中稱為自調用函數 。 我在下面給出的一篇文章。 你可以在谷歌上獲得更多。

http://2007-2010.lovemikeg.com/2008/08/17/a-week-in-javascript-patterns-self-invocation/

如果你指的是$編程，那么它與JQuery有關，其他答案也提供了鏈接。

Answer 4

它正在使用JQuery庫 。

JQuery包含一個名為$()的函數，它允許您使用類似CSS的語法從DOM中選擇元素。

$(document).ready位是一個標准的JQuery方法，用於確保封裝的代碼僅在頁面加載完成后運行。 這是確保事件正確附加到相關DOM對象所必需的。

將函數用作其他函數的參數的位稱為“閉包”，它是編寫Javascript的一種非常常見的方式，但特別是在使用JQuery時，它使用簡單易用的方法和最少的代碼。這種編碼風格。

請參閱此頁面： http ： //blog.morrisjohns.com/javascript_closures_for_dummies，以便初學者討論閉包在Javascript中的工作方式以及如何編寫它們（請注意，此頁面根本不看JQuery;閉包是一個Javascript功能，被JQuery大量使用，但你不需要JQuery來編寫閉包）

Answer 5

這是使用jQuery處理事件的常用方法。

基本上發生的是您檢查文檔是否已加載

 $(document).ready(function() {

        SAVECUSTOMERS.init();
    });

當你開始將你的綁定添加到按鈕或它們可能是什么時。

Answer 6

SAVECUSOMTERS中代碼的目的是模仿對象中的私有屬性和公共屬性。 由於JS默認不支持這些，因此這個自調用函數執行並返回一定數量的屬性。 在這種情況下，它返回'init'方法。 盡管您看到OnSave和OnClick，但您會發現根本無法訪問它們。 它們是“私有的”，僅在該函數內部使用。

$()函數是一個名為jQuery http://jquery.com的javascript庫的一部分。它是一個非常全面的庫，主要用於DOM操作。

$（document）.ready（）函數是jQuery連續輪詢頁面直到加載的一種方式。 如果是，則執行內部的javascript。

Answer 7

1. 目標是擁有公共和私人職能。 OnSave和OnCancel是私有函數，只能在自執行匿名(function() { ... } ())范圍內訪問，它返回一個公共訪問init函數的對象。

2. SAVECUSTOMERS成為上述函數返回的對象，即{ init: init } ，一個具有一個方法init的對象，可以訪問該閉包內的函數。

3. 你可以閱讀Douglas Crockford的Javascript：The Good Parts或Stoyan Stefanov的Javascript模式

其他說明：

• $()函數屬於jQuery庫
• 存在語法錯誤，因為函數應該由; 不,因為它們在一個函數內，而不是一個對象。