Можно ли выполнить следующее, используя jQuery: Я хотел бы создать два разных объекта, которые имеют разные функции с тем же именем.
var item = new foo();
item.doSomething();
var item2 = new bar();
item2.doSomething();
Кроме того, я хотел бы использовать созданные элементы как "обычные" объекты jQuery - например, перетащить и сбросить элементы и выполнить правильную функцию doSomething(), когда перетаскивание остановлено.
Мы придумали решение проблемы. Он состоит из 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. BTW, мы использовали DUI для создания пространств имен.
Надеюсь, кто-то найдет решение полезным. Это сделало наш код намного приятнее.
Я все еще довольно новичок в 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, для меня это удобно. любые предложения приветствуются...
Это из Создание объектно-ориентированных плагинов 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 data
element.data('myplugin', myplugin);
});
};
})(jQuery);
Использование теста
$('#test').myplugin();
var myplugin = $('#test').data('myplugin');
myplugin.publicMethod(); // prints "publicMethod() called!" to console
Там также есть плагин, основанный на этом шаблоне, Tagger на основе этого шаблона.
Не уверен в части ориентации объекта, но у jQuery есть поддержка, поддерживаемая той возможностью перетаскивания, которую вы описываете.
Использование JQuery для добавления поддержки перетаскивания http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx
Я предпочитаю более простой метод, чем Джонниен и др.
В принципе, я создаю класс и присваиваю элемент 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;
}
}
Примечание: это непроверенный код, но он иллюстрирует мою точку.
<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>
Я знаю, что этот вопрос старый, но вот как я создаю код на стороне клиента.
Я использую свою собственную инфраструктуру oop для создания своих контроллеров/приложений. Если я устанавливаю класс как одноэлементный, он выполняется на doc ready и служит в качестве точки входа для клиентского приложения.
https://github.com/KodingSykosis/jOOP
Любой код, который должен быть доступен по всему миру, я расширяю jQuery, используя $.extend или $.fn.extend.
api.jquery.com/jQuery.extend
Код стиля представления или презентации, я использую виджет jQueryUI factory. В классах контроллеров задаются задачи создания любых элементов, необходимых для создания экземпляра виджета. Любое общение облегчается за счет использования событий или обратных вызовов.