utiliser jQuery de manière orientée objet

Est-il possible d'atteindre les objectifs suivants, à l'aide de jQuery:
Je voudrais créer deux objets différents qui ont différentes fonctions avec le même nom.

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

En outre, je voudrais être en mesure d'utiliser les éléments créés comme "régulier" jQuery objets - par exemple, pour le drag&drop les items et d'exécuter le bon doSomething() fonction lorsque vous faites glisser l'a arrêté.

source d'informationauteur JohnnyYen

jquery oop

16

Nous avons trouvé une solution au problème.
Il se compose de 3 étapes distinctes:
tout d'abord, la première jQuery élément doit être créé:
```
var item = $.créer("div"); 
```
ensuite créer une instance de l'objet javascript vous souhaitez créer et copier l'ensemble de fonctions et de propriétés de l'élément jQuery:
```
$.étendre( point, new foo.bar() ); 
```
Enfin, d'initialiser l'objet. Notez que le constructeur lors de l'étape précédente ne peut pas être utilisé pour ce, depuis le "présent" de l'objet est différent.
```
élément.initialiser(); 
```
Après cela, l'objet $(item) peut être utilisé comme un objet jQuery, et en plus il a les fonctions et les variables locales comme un objet javascript.
```
élément.doSomething(); 
var offset = $(item).offset(); 
```
De sorte que vous pouvez faire DOM objets qui ont une "classe" qui peut être utilisé par jQuery.
BTW, nous avons utilisé la conduite avec facultés affaiblies à créer des espaces de noms.

J'espère que quelqu'un trouvera la solution utile. On fait de notre code est beaucoup plus agréable.
5

je suis encore assez nouveau pour JS et jQuery, donc n'hésitez pas à me tirer vers le bas (aka 'fournir des critiques constructives'), mais j'ai trouvé que cela fonctionne bien pour la construction d'objets JS destiné à avoir une représentation à l'écran:
```
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);
```
à venir à partir d'une approche plus traditionnelle de la programmation orientée objet arrière-plan, et d'être utilisé à l'aide du modèle MVC, c'est très sympa pour moi. toutes les suggestions de bienvenue...

C'est à partir de Bâtiment Orienté Objet 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 d'utilisation

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

Il y a aussi un plugin basé sur ce modèle, Tagger basé sur ce modèle.

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

Référence: http://ajax911.com/jquery-object-oriented-plugins/

1

Pas sûr au sujet de l'Orientation de l'Objet de la partie, mais jQuery a cuit au four d'une prise en charge pour le type de glisser-déposer, vous décrivez.

À l'aide de JQuery pour Ajouter faites Glisser et Déposez le Soutien
http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

Je préfère une méthode plus simple que posé par JohnnyYen et coll.

En gros, j'ai créer une classe et de lui attribuer l'élément DOM à une propriété.

par exemple.

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

Note: ceci est du code non testé, mais il illustre bien mon point.

0

Je sais que cette question est vieux, mais c'est la manière dont je construis mon côté client code.

- Je utiliser mon propre cadre de la programmation orientée objet pour construire mon contrôleurs/apps. Si je définis une classe comme un singleton, il est exécuté sur la doc prêt et me sert de point d'entrée pour l'application cliente.

https://github.com/KodingSykosis/jOOP

Tout le code qui doit être accessible partout dans le monde, j'adresse à l'aide de jQuery $.de prolonger ou de $.fn.prolonger.

api.jquery.com/jQuery.extend

Vue ou le style de présentation de code, j'utilise le jQueryUI widget de l'usine. Mes classes de contrôleur sont chargés de la création de tous les éléments requis pour un widget pour instancier. Toute la communication est facilitée par l'utilisation des événements ou des rappels.

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

Vous devez vous connecter pour publier un commentaire.