Question

我正试图从Prototype转移到jQuery，最后一件事我无法弄清楚如何在新库中做到。

这是我以前用Prototype做的事情：

MyClass = Class.create();

MyClass.prototype = {
  initialize: function(options) {
  }
}

然后我可以创建一个新的MyClass：

var mc = new MyClass({});

jQuery是否有像Prototype的Class.create()这样的东西？如果没有，如何在没有图书馆的情况下获得同样的东西？

Answer 1

我使用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();

注意：我向related question询问了同一主题。

Answer 2

jQuery使用标准的javascript功能来创建新类。

网上有一些很好的例子，但我建议你查看David Flanagan的书籍Javascript：The Definitive Guide。

Object-Oriented JavaScript

JavaScript and Object Oriented Programming (OOP)

我道歉，我完全误解了你原来的帖子。我猜你真的想知道如何扩展jQuery $对象。这很容易实现，有很多插件用于这样做。 jQuery网站上有一个教程：Getting Started With jQuery

但基本上，你使用


 jQuery.fn.foobar = function() {
   // do something
 };

Answer 3

jQuery没有定义OOP原语，所以你是独立的。但是用简单的JavaScript很容易做到你想做的事情：

MyClass = function(options){
  // whatever were in your initialize() method
};

您可以像以前一样创建实例：

var mc = new MyClass({});

如果你曾经在原型中有更多的东西，你可以像以前一样添加它们：

MyClass.prototype = {
  // no need for initialize here anymore
  /*
  initialize: function(options) {
  },
  */

  // the rest of your methods
  method1: function() { /*...*/ },
  method2: function() { /*...*/ }
}

或者，您可以动态添加方法：

$.extend(MyClass.prototype, {
  method1: function() { /*...*/ },
  method2: function() { /*...*/ }
});

最后，您可以提供自己的班级创建者：

var CreateClass = function(){
  return function(){ this.initialize.apply(this, arguments); };
};

// the rest is a copy from your example

MyClass = CreateClass();

MyClass.prototype = {
  initialize: function(options) {
  }
}

var mc = new MyClass({});

Answer 4

在JavaScript中，如果与'new'关键字一起使用，常规函数将充当构造函数。

所以你可以做到，

function MyClass(options)
{
   this.options = options;
};

MyClass.prototype.initialize = function() { } ;

MyClass.prototype.sayHello = function() { alert('Hello!'); };

var item = new MyClass( { id : 10 } );
item.sayHello(); //alerts Hello!
alert(item.options.id); //alerts 10.

我建议您尝试了解JavaScript的实际工作原理。尝试understand prototype inheritance as opposed to class based inheritance。对JavaScript的良好理解将帮助您充分利用该语言的强大功能。

Answer 5

您基本上可以从原型的源代码中复制相关部分，并保留有关扩展的部分。 http://github.com/sstephenson/prototype/blob/add69978e09653808aedec43ed551df22818ee30/src/lang/class.js

jQuery没有这样的对象创建和扩展系统，因为整个系统似乎依赖于jQuery链接（对于jeresig：抱歉，如果我弄错了）。所以你必须创建自己的系统。

为了获得一个想法，Douglas Crockford有一个众所周知的模式，用于在JavaScript中创建对象和继承。 http://javascript.crockford.com/prototypal.html

Answer 6

John Resig的一个很好的解决方案： Simple JavaScript Inheritance

Answer 7

您可以使用标准JavaScript：

MyClass = function(options) {
  console.log(options);
};

var mc = new MyClass([1,2,3]);

您可以使用jQuery提供继承：http://docs.jquery.com/Utilities/jQuery.extend#deeptargetobject1objectN

Answer 8

你可以尝试JS.Class（可移植的，模块化的JavaScript类库） - http://jsclass.jcoglan.com/

Answer 9

我认为，有一种更简单的方法......

    function Dashboard() {
    var dashboard = this;
    dashboard.version = 'Version 0.1';
    dashboard.__init = function() {
            console.log('init');
    };
    dashboard.__init();
}
var dash = new Dashboard();

will log 'init'

Answer 10

从来没有做过，但我想看看一些插件，比如Thickbox可能会有所帮助。

Answer 11

John Resig的精彩Classy Query插件提供了您正在寻找的内容：

http://ejohn.org/blog/classy-query/

如何使用jQuery在JavaScript中获取基于类的对象？

11 个答案: