используя jQuery объектно-ориентированным способом

Question

Можно ли добиться следующего, используя jQuery: Я хотел бы создать два разных объекта, которые имеют разные функции с одинаковым именем.

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

Кроме того, я хотел бы иметь возможность использовать созданные элементы как «обычные» объекты jQuery - например, перетаскивать элементы и выполнять правильную функцию doSomething (), когда перетаскивание остановлено.

Answer 1

Мы придумали решение проблемы. Он состоит из 3 отдельных шагов: во-первых, должен быть создан начальный элемент jQuery:

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

затем создайте экземпляр объекта javascript, который вы хотите создать, и скопируйте все его функции и свойства в элемент jQuery:

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

Наконец, инициализируйте объект. Обратите внимание, что конструктор на предыдущем шаге не может быть использован для этого, так как объект "this" отличается.

item.initialize();

После этого объект $ (item) можно использовать как обычный объект jQuery, плюс он имеет функции и локальные переменные, как обычный объект javascript.

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

Таким образом, вы можете создавать объекты DOM, которые имеют «класс», который может использоваться jQuery. Кстати, мы использовали DUI для создания пространств имен.

Надеюсь, кто-то найдет решение полезным. Это сделало наш код намного приятнее.

Answer 2

Я все еще довольно новичок в JS и jQuery, поэтому не стесняйтесь сбивать меня с толку (так называемая «конструктивная критика»), но я обнаружил, что это хорошо работает для создания объектов JS, предназначенных для отображения на экране. представление:

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

, исходящий из более традиционного ООП-фона и привыкший использовать шаблон MVC, для меня это очень удобно. любые предложения приветствуются ...

Answer 3

Это от Создание объектно-ориентированных плагинов jQuery

(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').myplugin();
var myplugin = $('#test').data('myplugin');
myplugin.publicMethod(); // prints "publicMethod() called!" to console

Существует также плагин, основанный на этом шаблоне, Tagger , основанный на этом шаблоне.

Answer 4

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

Ссылка: http://ajax911.com/jquery-object-oriented-plugins/

Answer 5

Я предпочитаю более простой метод, чем предложенный JohnnyYen и др.

По сути, я создаю класс и присваиваю элемент DOM свойству.

например.

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

Примечание: это непроверенный код, но он иллюстрирует мою точку зрения.

Answer 6

Не уверен насчет части «Ориентация объекта», но jQuery имеет встроенную поддержку для типа перетаскивания, который вы описываете.

Использование JQuery для добавления поддержки перетаскивания http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

Answer 7

Я знаю, что этот вопрос старый, но так я строю свой код на стороне клиента.

Я использую свою собственную платформу oop для создания своих контроллеров / приложений. Если я установлю класс как одноэлементный, он будет выполнен в режиме готовности к документации и служит моей точкой входа для клиентского приложения.

https://github.com/KodingSykosis/jOOP

Любой код, который должен быть доступен глобально, я расширяю jQuery, используя $ .extend или $ .fn.extend.

api.jquery.com / jQuery.extend

Код представления или стиля представления, я использую фабрику виджетов jQueryUI. Моим классам контроллеров поручено создавать любые элементы, необходимые для создания экземпляра виджета. Любое общение облегчается за счет использования событий или обратных вызовов.

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