usando jQuery en modo orientado a objetos

Question

Es posible lograr lo siguiente, usando jQuery: Me gustaría crear dos objetos diferentes que tengan diferentes funciones con el mismo nombre.

var item = new foo(); 
item.doSomething(); 
var item2 = new bar(); 
item2.doSomething(); 

Por otra parte, me gustaría ser capaz de utilizar los elementos creados como objetos "normales" jQuery - por ejemplo, para arrastrar & soltar los elementos y ejecutar el doSomething correcta() la función cuando se arrastra se ha detenido.

Answer 1

Hemos llegado a una solución al problema. Consta de 3 etapas separadas: en primer lugar, el elemento inicial jQuery debe ser creado:

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

continuación, crear una instancia del objeto de javascript que desea crear y copiar toda ella de funciones y propiedades para el elemento jQuery :

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

Finalmente, inicialice el objeto. Tenga en cuenta que el constructor en el paso anterior no puede usarse para esto dado que el objeto "este" es diferente.

 
item.initialize(); 

Después de esto, el objeto $ (punto) puede utilizarse como objeto regular jQuery, además de que tiene funciones y variables locales como un objeto JavaScript regular.

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

Para que pueda crear objetos DOM que tengan una "clase" que pueda usar jQuery. Por cierto, usamos DUI para crear espacios de nombres.

Esperemos que a alguien le resulte útil la solución. Hizo nuestro código mucho más agradable.

Answer 2

No estoy seguro acerca de la parte de orientación del objeto, pero jQuery tiene compatibilidad con el tipo de capacidad de arrastrar y soltar que está describiendo.

Usando jQuery para Añadir arrastrar y soltar http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

Answer 3

sigo siendo bastante nuevo en JS y jQuery, así que siéntete libre de derribarme (también conocido como "dar una crítica constructiva"), pero he descubierto que esto funciona bien para construir objetos JS destinados a tener una conexión representación en pantalla:

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

procedentes de un fondo más tradicional programación orientada a objetos, y que se utiliza para utilizar el patrón MVC, esto es agradable para mí. cualquier sugerencia bienvenida ...

Answer 4

Prefiero un método más simple que el propuesto por JohnnyYen et al.

Básicamente, creo una clase y asigno el elemento DOM a una propiedad.

por ejemplo.

/* 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; 
    } 
} 

Nota: esto es código no probado, pero ilustra mi punto.

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> 

Referencia: http://ajax911.com/jquery-object-oriented-plugins/

Answer 6

Sé que esta pregunta es antiguo, pero esto es cómo construyo mi código del lado del cliente.

Uso mi propio framework oop para construir mis controladores/aplicaciones. Si configuro una clase como singleton, se ejecuta en doc ready y sirve como mi punto de entrada para la aplicación cliente.

https://github.com/KodingSykosis/jOOP

Cualquier código que debe ser accesible a nivel mundial, extiendo jQuery utilizando el .extend $ o $ .fn.extend.

api.jquery.com/jQuery.extend

Ver o código de estilo de presentación, uso el widget de fábrica jQueryUI. Mis clases de controlador tienen la tarea de crear cualquier elemento necesario para que un widget cree una instancia. Cualquier comunicación se facilita mediante el uso de eventos o devoluciones de llamada.

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

Answer 7

Esto es de 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); 

el uso de pruebas

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

También hay un plugin basado en este patrón, Tagger basado en este modelo.