是否有可能实现以下,使用jQuery: 我想创建两个具有不同功能,具有相同名称的不同对象。面向对象的方式使用jQuery
3210此外,我希望能够使用创建的项目,如“常规” jQuery的对象 - 例如,拖&掉落的物品和执行正确的doSomething()函数时,拖动已停止。
是否有可能实现以下,使用jQuery: 我想创建两个具有不同功能,具有相同名称的不同对象。面向对象的方式使用jQuery
3210此外,我希望能够使用创建的项目,如“常规” jQuery的对象 - 例如,拖&掉落的物品和执行正确的doSomething()函数时,拖动已停止。
我们已经想出了一个解决问题的办法。 它由3个独立的步骤: 首先,必须创建初始的jQuery项目:
var item = $.create("div");
然后创建要创建和它的所有功能和特性复制到了jQuery项目的JavaScript对象的实例:
$.extend(item, new foo.bar());
最后,初始化对象。请注意,上一步中的构造函数不能用于此,因为“this”对象不同。
item.initialize();
在此之后,目标$(项目)可用于像一个普通的jQuery对象,再加上它具有的功能和像一个普通的JavaScript对象的局部变量。
item.doSomething(); var offset = $(item).offset();
因此,您可以使DOM对象具有jQuery可以使用的“类”。顺便说一下,我们使用DUI来创建名称空间。
希望有人会发现该解决方案有帮助。它使我们的代码更加美好。
不知道的面向对象的一部分,但jQuery的已经出炉,在支持你所描述的那种拖 - 放能力。
使用jQuery添加拖放支持 http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx
我还是很新的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);
来自一个更传统的OOP背景,并习惯于使用MVC模式,这对我很友好。任何建议欢迎...
我更喜欢比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;
}
}
注意:这是未经测试的代码,但它说明了我的观点。
<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中执行,并作为客户端应用程序的入口点。
https://github.com/KodingSykosis/jOOP
需要全局访问任何代码,我jQuery的使用$ .extend或.fn.extend $延伸。
api.jquery.com/jQuery.extend
查看或演示代码风格,我使用jQueryUI的小部件的工厂。我的控制器类负责创建小部件实例化所需的任何元素。通过使用事件或回调促进任何沟通。
这是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);
测试使用
$('#test').myplugin();
var myplugin = $('#test').data('myplugin');
myplugin.publicMethod(); // prints "publicMethod() called!" to console
还有基于这种模式,Tagger基于这种模式的插件。
也许这个SO贴子会让你开始:http://stackoverflow.com/questions/1073864/is-jquery-or-javascript-has-concept-of-classes-and-objects – 2009-07-29 16:19:43