面向對象的方式使用jQuery

Question

是否有可能實現以下，使用jQuery： 我想創建兩個具有不同功能，具有相同名稱的不同對象。

​​3210

此外，我希望能夠使用創建的項目，如「常規」 jQuery的對象 - 例如，拖&掉落的物品和執行正確的doSomething（）函數時，拖動已停止。

Answer 1

我們已經想出了一個解決問題的辦法。 它由3個獨立的步驟： 首先，必須創建初始的jQuery項目：

 
var item = $.create("div"); 

然後創建要創建和它的所有功能和特性複製到了jQuery項目的JavaScript對象的實例：

 
$.extend(item, new foo.bar()); 

最後，初始化對象。請注意，上一步中的構造函數不能用於此，因爲「this」對象不同。

 
item.initialize(); 

在此之後，目標$（項目）可用於像一個普通的jQuery對象，再加上它具有的功能和像一個普通的JavaScript對象的局部變量。

 
item.doSomething(); 
var offset = $(item).offset(); 

因此，您可以使DOM對象具有jQuery可以使用的「類」。順便說一下，我們使用DUI來創建名稱空間。

希望有人會發現該解決方案有幫助。它使我們的代碼更加美好。

Answer 2

不知道的面向對象的一部分，但jQuery的已經出爐，在支持你所描述的那種拖 - 放能力。

使用jQuery添加拖放支持 http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

Answer 3

我還是很新的JS和jQuery，可以隨意拍我失望（又名「提供建設性的批評」），但我發現這非常適用於建築JS對象爲了有一個片屏幕表示：

function SomeClass (params) { 
    // other properties and functions... 

    this.view = function() { 
     var e = $('<div />', { 
      'class': 'someClass' 
     }); 
     return e; 
    }(); 
} 

var someClassInstance = new SomeClass(params); 
$('#someClassContainer').append(someClassInstance.view); 

來自一個更傳統的OOP背景，並習慣於使用MVC模式，這對我很友好。任何建議歡迎...

Answer 4

我更喜歡比JohnnyYen等人提出的更簡單的方法。

基本上，我創建一個類並將DOM元素分配給一個屬性。

例如。

/* CONSTRUCTOR: Tile */ 
function Tile(type, id){ 
    this.type = type; 
    this.id = id; 
    this.DOM = $('#' + id); 
} 

/* METHOD: nudge */ 
Tile.prototype.nudge = function(direction){ 
    var pos = this.DOM.offset(); 
    var css_top = this.DOM.css("top"); 
    var top = css_top.substring(0 , css_top.indexOf('px')); 
    var css_left = this.DOM.css("left"); 
    var left = css_left.substring(0 , css_left.indexOf('px')); 
    var width = this.DOM.width(); 
    var height = this.DOM.height(); 

    switch(direction){ 
    case 'up': 
     this.DOM.css({ "top": (+top - 75) + "px" }); 
    break; 
    case 'left': 
     this.DOM.css({ "left": (+left - 75) + "px" }); 
    break; 
    case 'right': 
     this.DOM.css({ "left": (+left + 75) + "px" }); 
    break; 
    case 'down': 
     this.DOM.css({ "top": (+top + 75) + "px" }); 
    break; 
    } 
} 

注意：這是未經測試的代碼，但它說明了我的觀點。

Answer 5

<script type="text/javascript">// <![CDATA[ 
//Lets consider it as our class wrapper 
(function($) { 

    $.fn.testClass = function(initvar) { 

     this.testMethod = function(status) { 
      this.test = status; 

      //lets call a method of a class 
      this.anotherMethod(); 
     }; 

     this.anotherMethod = function() { 
      alert("anotherMethod is called by object " + this.test); 
     }; 

     this.getVars = function() { 
      alert("Class var set in testMethod: I am object " + this.test + "\nClass var set in constractor: " + this.class_var); 
     }; 

     //lets init some variables here, consider it as a class constractor 
     this.class_var = initvar; 

     //THIS IS VERY IMPORTANT TO KEEP AT THE END 
     return this; 
    }; 

})(jQuery); 


$(function() { 

    //Now lets create objects 
    var object1 = $(document.body).testClass("1"); 
    var object2 = $(document.body).testClass("2"); 

    //lets call method testMethod 
    object1.testMethod("1"); 
    object2.testMethod("2"); 

    //lets lets see what we have at the end 
    object1.getVars(); 
    object2.getVars(); 

}); 
// ]]></script> 

參考：http://ajax911.com/jquery-object-oriented-plugins/

Answer 6

我知道這個問題是舊的，但是這是我建立我的客戶端代碼。

我使用我自己的oop框架構建出我的控制器/應用程序。如果我將一個類設置爲單例，它將在doc中執行，並作爲客戶端應用程序的入口點。

https://github.com/KodingSykosis/jOOP

需要全局訪問任何代碼，我jQuery的使用$ .extend或.fn.extend $延伸。

api.jquery.com/jQuery.extend

查看或演示代碼風格，我使用jQueryUI的小部件的工廠。我的控制器類負責創建小部件實例化所需的任何元素。通過使用事件或回調促進任何溝通。

http://api.jqueryui.com/jQuery.widget

Answer 7

這是Building Object-Oriented jQuery Plugins

(function($){ 
    var MyPlugin = function(element, options){ 
    var elem = $(element); 
    var obj = this; 
    var settings = $.extend({ 
     param: 'defaultValue' 
    }, options || {}); 

    // Public method - can be called from client code 
    this.publicMethod = function(){ 
     console.log('public method called!'); 
    }; 

    // Private method - can only be called from within this object 
    var privateMethod = function(){ 
     console.log('private method called!'); 
    }; 
    }; 

    $.fn.myplugin = function(options){ 
    return this.each(function(){ 
     var element = $(this); 

     // Return early if this element already has a plugin instance 
     if (element.data('myplugin')) return; 

     // pass options to plugin constructor 
     var myplugin = new MyPlugin(this, options); 

     // Store plugin object in this element's data 
     element.data('myplugin', myplugin); 
    }); 
    }; 
})(jQuery); 

測試使用

$('#test').myplugin(); 
var myplugin = $('#test').data('myplugin'); 
myplugin.publicMethod(); // prints "publicMethod() called!" to console 

還有基於這種模式，Tagger基於這種模式的插件。