JavaScript中的Java-esque OOP和jQuery失敗

Question

我正在開發一個項目，我真的想編寫面向對象的JavaScript代碼。我剛開始閱讀Douglas Crockford's JavaScript: The Good Parts，我很快就意識到在JavaScript中編寫Java-esque OOP將是一項艱鉅的任務。

到目前爲止，我已經寫了類似如下的...

// index.html 
$(document).ready(function() { 

    $().SetUpElements(); 
}); 

// this is in a different js file 
$.fn.SetUpElements = function() { 

    // do stuff here 
    $().UpdateElement(); 
}; 

// this is in yet another different js file 
$.fn.UpdateElement = function() { 

    // do stuff here 
    var element = new Element(id, name); // continue doing work 
}; 

function Element(id, name) { 

    var id = id; 
    var name = name; 

    // other stuff 
}; 

...的想法是，我希望對象/函數進行重構和脫鉤儘可能多地;我想盡可能多地重複使用代碼。我已經將很多代碼分佈在不同的.js文件中，旨在將特定的相關代碼分組在一起，就像您將使用Java編寫不同的類一樣。

由於我已經瞭解了更多關於jQuery的知識，我意識到$.fn.foo = function() { ... };這個符號實際上是將這個foo函數添加到所有jQuery對象的原型中。這是我應該做的事嗎？我以某種方式濫用jQuery？

我將不勝感激關於如何改進我在JavaScript中使用面向對象的方法的建議，我很樂意看到有關源/教程/文章/等的參考資料......討論此主題。即使選擇了答案，也請隨時提供反饋意見。我正在尋找你的建議......這就是我發佈的原因:)

**注意：我沒有開發jQuery插件。我正在開發一個Web應用程序，並大量使用jQuery。

Answer 1

我會說你創建方法的第一種方式是濫用jQuery。 jQuery.fn.foo語法通常保留給作用於DOM元素但通過使用空的jQuery對象使用它們作爲靜態函數的函數。

如果你想在jQuery的命名空間下創建靜態函數，你可以這樣做：的

jQuery.foo(); 

代替：

jQuery.foo = function(){}; 

然後通過調用它

jQuery.fn.foo = function(){}; 

這允許你這樣做：

jQuery('#someElementId').foo(); 

就OOP而言。有很多不同的方法（模塊模式，原型，工廠...）。我一般路徑選擇，就是創建一個類的靜態函數，然後用關鍵字new

(function($){ 
    var undefined; 

    $.ClassName = function(options){ 
     var self = this; 
     var cfg = $.extend(true, {}, this.defaults, options); 

     // ******************** 
     // start:private 
     // ******************** 
     function _init(){ 

     }; 

     // ******************** 
     // start:public 
     // ******************** 
     this.methodName = function(){ 

     }; 

     _init(); 
    }; 

    $.ClassName.prototype.defaults = {}; 
})(jQuery); 

調用它在重複使用功能方面，有一個門檻之後去耦比什麼都不利。確保您保持模塊化和組織的正確平衡。

Answer 2

如果您正在開發插件，通常最好儘可能避免污染jQuery和Global命名空間/原型。

看看this documentation on jQuery's website，它給出瞭如何提供對各種可重用功能的訪問的絕佳解釋，同時只聲明jQuery對象上的單個名稱。

我見過的另一種方法是爲jQuery名稱空間上的插件提供一個init函數，然後在Global名稱空間中提供一個額外的插件專用名稱，該名稱提供了對函數的更直接訪問/會員等Galleria plug-in是如何做到這一點很好的例子。檢查他們的文檔，以及他們設置插件結構的方式。

編輯

看到，你是不是製作一個插件後：很多的，我說仍適用於一般的jQuery開發的東西（真的，到總體的發展）。

在您的具體情況中，由於您沒有在進行函數調用時使用jQuery選擇器，因此這些函數可能很容易附加到您自己製作的原型上，這些原型可放置在全局名稱空間。

至於命名空間去，看看接受的答案對這個問題對於如何正確地做到這一點的例子：How do I declare a namespace in JavaScript?

這裏是在JavaScript OO一個很好的資源。我用這篇文章試圖環繞的概念，我的頭的時候：http://mckoss.com/jscript/object.htm

Answer 3

在參考在Javascript做OO你應該看Douglas Crockford's Advanced Javascript lessons

Answer 4

看起來你正在編寫所有的代碼爲jQuery插件？我不會那樣做。創建你自己的名字空間。

將所有內容放入不同文件的目標是什麼？除非它們是用於特定頁面的腳本，否則這會使事情管理變得更加困難。這些都看起來像通用庫函數。除非你認爲你想在一個頁面上加載一些，但不是全部，然後把它們全部放在一個文件中。

面向對象的編程並不意味着跨文件分割東西。這只是組織，當你不需要某些頁面上的所有內容時，你應該把事情分解成不同的文件。

Answer 5

如果它不是一個jQuery插件，我會寫這樣的事：

var app = { 
     init: function(){ 
     app.SetUpElements(); 
     }, 
     SetUpElements: function() { 
     return 'something'; 
     }, 
     etc: function() { 

     } 
    }; 
    $(document).ready(app.init); 

Answer 6

由於大部分已經提到過，除非你明確地創建一個公共插件，不使用jQuery自定義函數。相反，請使用簡單的對象表示法創建自己的名稱空間，或者更類似Module Pattern的其他類型。如果你想變得瘋狂，你可以使用API​​上的API來使用Dean Edward's Base來獲得更經典的OO模式。最終目標是從jQuery API中提取您的功能和設計要求。這樣，如果您需要將某些東西移植到Mootools或Prototype，那麼完成起來會更簡單。