Estoy tratando de pasar de Prototype a jQuery y hay una última cosa que no puedo entender cómo hacer en la nueva biblioteca.

Esto es lo que solía hacer con Prototype:

MyClass = Class.create();

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

Entonces podría crear un nuevo MyClass con:

var mc = new MyClass({});

¿Tiene jQuery algo como el Class.create() de Prototype? Y si no, ¿cómo obtengo el mismo tipo de cosas sin una biblioteca?

6
Phil Kulak 1 ago. 2009 a las 05:19

11 respuestas

La mejor respuesta

Utilizo la función jquery extender para extender un prototipo de clase.

Por ejemplo:

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();

Nota: pedí un relacionado pregunta sobre este mismo tema.

15
Community 23 may. 2017 a las 10:29

JQuery usa la funcionalidad estándar de JavaScript para crear nuevas clases.

Hay algunos buenos ejemplos en la web, pero recomendaría mirar los libros de David Flanagan Javascript: The Definitive Guide.

JavaScript orientado a objetos

Programación Orientada a Objetos y JavaScript (OOP)


Pido disculpas, entendí mal tu publicación original. Supongo que realmente quieres saber cómo extender el objeto jQuery $. Esto es fácilmente factible, hay una gran cantidad de complementos para hacerlo. Hay un tutorial en el sitio jQuery para hacer esto: Comenzando con jQuery

Esencialmente, sin embargo, usas


 jQuery.fn.foobar = function() {
   // do something
 };
5
Jeremiah Peschka 17 sep. 2008 a las 03:01

Básicamente, puede copiar la parte relevante del código fuente del prototipo y dejar las partes sobre la extensión. http://github.com/sstephenson/prototype/blob/ add69978e09653808aedec43ed551df22818ee30 / src / lang / class.js

JQuery no tiene un sistema para la creación y extensión de objetos, ya que todo el sistema parece depender del encadenamiento de jQuery (a jeresig: lo siento si me equivoco). Por lo tanto, debe crear su propio sistema de todos modos.

Para tener una idea, Douglas Crockford tiene un patrón bien conocido para crear objetos y herencia en JavaScript. http://javascript.crockford.com/prototypal.html

1
Mehmet Duran 1 ago. 2009 a las 01:31

El fantástico plugin Classy Query de John Resig proporciona exactamente lo que estás buscando:

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

-1
Eduardo Scoz 14 mar. 2009 a las 20:39

Creo que hay una manera más fácil ...

    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'
0
user3106724user3106724 1 abr. 2014 a las 07:44

Una buena solución de John Resig: Herencia JavaScript simple

1
justmoon 2 ago. 2009 a las 12:10

JQuery no define las primitivas OOP, por lo que está solo. Pero es fácil hacer lo que quieras con JavaScript simple:

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

Y puede crear instancias como solía hacerlo:

var mc = new MyClass({});

Si solía tener más elementos en el prototipo, puede agregarlos como solía hacerlo:

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

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

Alternativamente, puede agregar sus métodos dinámicamente:

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

Y finalmente puedes proporcionar tu propio creador de clase:

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({});
3
Eugene Lazutkin 1 ago. 2009 a las 01:45

En JavaScript, una función regular actúa como un constructor si se usa con la palabra clave 'new'.

Entonces puedes hacer,

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.

Te sugiero que intentes comprender cómo funciona realmente JavaScript. Intente entender la herencia del prototipo en lugar de la herencia basada en la clase. Una buena comprensión de JavaScript lo ayudará a explotar el poder del lenguaje.

2
Community 23 may. 2017 a las 12:10

Puedes usar JavaScript estándar:

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

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

Puede usar jQuery para proporcionar herencia: http://docs.jquery.com/Utilities/ jQuery.extend # deeptargetobject1objectN

0
Justin Johnson 1 ago. 2009 a las 01:31

Puede probar JS.Class (biblioteca de clases JavaScript modular y portátil) - http://jsclass.jcoglan.com/

0
patie 13 dic. 2012 a las 20:08

Nunca lo hice, pero imagino que mirar algunos de los complementos como Thickbox podría ser útil.

-1
Greg Ogle 17 sep. 2008 a las 03:00