有沒有更好的方法來創建一個jQuery的面向對象類？

Question

我使用jquery extend函數來擴展一個類的原型。

例如：

MyWidget = function(name_var) { 
    this.init(name_var); 
} 

$.extend(MyWidget.prototype, { 
    // object variables 
    widget_name: '', 

    init: function(widget_name) { 
    // do initialization here 
    this.widget_name = widget_name; 
    }, 

    doSomething: function() { 
    // an example object method 
    alert('my name is '+this.widget_name); 
    } 
}); 


// example of using the class built above 
var widget1 = new MyWidget('widget one'); 
widget1.doSomething(); 

有沒有更好的方式來做到這一點？有沒有更簡單的方法來創建上面的類，只有一個語句而不是兩個？

Answer 1

我很喜歡John Resig的Simple JavaScript Inheritance。

var MyWidget = Class.extend({ 
    init: function(widget_name){ 
    this.widget_name = widget_name; 
    }, 

    doSomething: function() { 
    alert('my name is ' + this.widget_name); 
    } 
}); 

注：以上展示的「類」對象中不包括jQuery的本身 - 這是來自jQuery的先生本人25行代碼段，上述文章中提供。

Answer 2

jQuery不提供該功能。但Prototype呢，通過Class.create。

Answer 3

要總結一下我迄今瞭解到：

這是基礎功能，使Class.extend（）jQuery中（由John Resig的從Simple JavaScript Inheritance複製）工作：

// Inspired by base2 and Prototype 
(function(){ 
    var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; 

    // The base Class implementation (does nothing) 
    this.Class = function(){}; 

    // Create a new Class that inherits from this class 
    Class.extend = function(prop) { 
    var _super = this.prototype; 

    // Instantiate a base class (but only create the instance, 
    // don't run the init constructor) 
    initializing = true; 
    var prototype = new this(); 
    initializing = false; 

    // Copy the properties over onto the new prototype 
    for (var name in prop) { 
     // Check if we're overwriting an existing function 
     prototype[name] = typeof prop[name] == "function" && 
     typeof _super[name] == "function" && fnTest.test(prop[name]) ? 
     (function(name, fn){ 
      return function() { 
      var tmp = this._super; 

      // Add a new ._super() method that is the same method 
      // but on the super-class 
      this._super = _super[name]; 

      // The method only need to be bound temporarily, so we 
      // remove it when we're done executing 
      var ret = fn.apply(this, arguments);  
      this._super = tmp; 

      return ret; 
      }; 
     })(name, prop[name]) : 
     prop[name]; 
    } 

    // The dummy class constructor 
    function Class() { 
     // All construction is actually done in the init method 
     if (!initializing && this.init) 
     this.init.apply(this, arguments); 
    } 

    // Populate our constructed prototype object 
    Class.prototype = prototype; 

    // Enforce the constructor to be what we expect 
    Class.constructor = Class; 

    // And make this class extendable 
    Class.extend = arguments.callee; 

    return Class; 
    }; 
})(); 

一旦你已經運行這段代碼執行時，則使下面的代碼從insin's answer可能：

var MyWidget = Class.extend({ 
    init: function(widget_name){ 
    this.widget_name = widget_name; 
    }, 

    doSomething: function() { 
    alert('my name is ' + this.widget_name); 
    } 
}); 

這是一個不錯的，乾淨的解決方案。但我很想看看是否有人有一個解決方案，不需要添加任何東西給jQuery。

Answer 4

這是早已不復存在死了，但如果別人搜索jQuery的創建類 - 檢查這個插件： http://plugins.jquery.com/project/HJS

Answer 5

爲什麼不直接使用簡單的面向對象的JavaScript本身提供... jQuery的前長時間？

var myClass = function(){}; 
myClass.prototype = { 
    some_property: null, 
    some_other_property: 0, 

    doSomething: function(msg) { 
     this.some_property = msg; 
     alert(this.some_property); 
    } 
}; 

然後你只需要創建一個類的實例：

var myClassObject = new myClass(); 
myClassObject.doSomething("Hello Worlds"); 

簡單！

Answer 6

我發現這個網站令人印象深刻的一個喲在javascript Here