如何組織的jQuery在我的應用程序

Question

所以我得到的地方，我需要利用揭示模塊模式或對象文本模式，或者是他們相同的模式呢？我不知道。我瞭解揭示模塊模式使用閉包，但我的知識還不深。揭示模塊模式我已經研究過，並且有點熟悉它。

我現在的情況是我使用jqGrid，我想將常見設置和事件函數合併到一個core.js或global.js文件中，然後重用所有這些設置和回調函數（如onSortCol func）每次我創建一個新的jqGrid。我希望能夠添加或編輯jqGrid的默認設置/選項，這使我不知道如何使用對象字面模式或揭示模塊模式將其設置爲global.js文件中的默認設置。

我看這篇文章了：

http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

而且很快我想更好地瞭解一下這個代碼是這樣做的：

var myFeature = { 
    config : { 
     wrapper : '#myFeature', 
     container : 'div', 
     urlBase : 'foo.php?item=' 
    }, 

    init : function(config) { 
     $.extend(myFeature.config, config); 
     $(myFeature.config.wrapper).find('li'). 
      each(function() { 
       myFeature.getContent($(this)); 
      }). 
      click(function() { 
       myFeature.showContent($(this)); 
      }); 
    }, 

    buildUrl : function($li) { 
     return myFeature.config.urlBase + $li.attr('id'); 
    }, 

    getContent : function($li) { 
     $li.append(myFeature.config.container); 
     var url = myFeature.buildUrl($li); 
     $li.find(myFeature.config.container).load(url); 
    }, 

    showContent : function($li) { 
     $li.find('div').show(); 
     myFeature.hideContent($li.siblings()); 
    }, 

    hideContent : function($elements) { 
     $elements.find('div').hide(); 
    } 
}; 

$(document).ready(function() { myFeature.init(); }); 

就讓我們先從初始化函數。首先，配置「成員」是myFeature對象中的一個對象，是否正確的措辭？其次，init「成員」也是myFeature對象字面值中的一個對象，或者因爲它是一個函數，它的概念化方式與myFeature的配置「成員」不同？第三，配置的範圍可以傳遞給init函數，就像它在myFeature對象中那樣？展望這個代碼在我希望有做這在我的doc.ready：

$(document).ready(function() { 
    var myF = new myF(); //new keyword not needed but can declared to emulate familiar 
    object oriented programming concepts is what I think 
    myF.init(myF.config); //I know I don't have to do this and this doesn't even make exact 
    sense but just trying to express how my brain is working on this right now 
}); 

我會從那裏開始，看看我得到了什麼樣的答案，並相應地調整我的問題。

UPDATE 所以配置和init是可以傳遞一個可選的配置對象，以免被覆蓋並追加傳遞配置到目標myFeature.Config我的功能和init（）的性質。

下一個問題，在init執行有$ .extend（myFeature.config，配置）。爲什麼不是$ .extend（this.config，config）行？這是我認爲我想要使用揭示模塊模式的地方，因爲我可以定義一個名爲「self」的變量，並在整個包含myFeature的成員中引用這個。我不明白在對象字面模式中，init屬性如何在函數內訪問myFeature。看來我的功能是全局範圍和它的所有屬性和本身可以由任何人在任何時候訪問，我知道這是JavaScript的性質，但...

提前感謝！

Answer 1

首先，這些「成員」是屬性。

「一個對象是屬性的集合，並且有一個原型對象，原型可能是空值。 ^{ECMA 4.3.3 object}

接着，init僅僅是一個函數，被分配給myFeature對象屬性init。函數的核心也是對象brief demo。

函數是一個「對象類型的構件，其是標準的內置功能構造的一個實例，並且可以被調用作爲子程序。除了它的命名屬性，功能包含可執行代碼和狀態，確定它在調用時的行爲。「

第三，如果您希望包含任何其他屬性，則傳入的config的範圍是。 jQuery的擴展（$.extend(obj1,obj2)）從obj2（一個對象）獲取屬性，然後將它們放在obj1上（也是一個對象，並且總是預先配置myFeature.config）simple demo。

Answer 2

要回答你的問題：

下一個問題，在init執行有$ .extend（myFeature.config，配置）。爲什麼不是$ .extend（this.config，config）行？這是我認爲我想要使用揭示模塊模式的地方，因爲我可以定義一個名爲「self」的var，並在整個包含myFeature的成員中引用此變量。我不明白在對象字面模式中，init屬性如何在函數內訪問myFeature。看來我的功能是全局範圍和它的所有屬性和本身可以由任何人在任何時候訪問，我知道這是JavaScript的性質，但...

JavaScript並變量提升，這意味着解釋器會做2通過你的腳本塊。第一遍將把任何函數和變量聲明提升到腳本塊的頂部。第二遍將執行在腳本塊中聲明的任何初始化。下面的自執行腳本塊很容易演示如何起吊。

// Original function block 
var foo = 'string1'; 
(function() { 
    alert(foo); // alerts undefined 
    var foo = 'string2'; 
})(); 


// First pass, hoisting variables 
var foo = 'string1'; 
(function() { 
    // The var `foo` is hoisted to 
    // the top of the script block 
    var foo; 
    alert(foo); 
    foo = 'string2'; 
})(); 

一旦吊裝完成，代碼將被執行。當地var foo已被懸掛並在alert函數之上聲明，因此當alert試圖訪問foo時，它是undefined，因爲它是已聲明的但未初始化的。變量myFeature get被掛起，不管它是全局還是包含在它自己的閉包中。這使它可以與對象字面值中包含的其他屬性一起使用。

另外要注意的是，使用new運算符不需要對象字面模式實例化。你也不會得到私人方法或屬性。 $.extend(myFeature.config, config);myFeature可以存在，myFeature.config可能不存在。在運行時向對象字面值myFeature添加或覆蓋當前屬性或方法也很容易。你可以在這裏閱讀更多關於不同的JS模式：http://addyosmani.com/resources/essentialjsdesignpatterns/book/