Có thể đạt được điều sau đây, bằng cách sử dụng jQuery: Tôi muốn tạo hai đối tượng khác nhau có chức năng khác nhau có cùng tên.sử dụng jQuery theo hướng đối tượng
var item = new foo();
item.doSomething();
var item2 = new bar();
item2.doSomething();
Hơn nữa, tôi muốn để có thể sử dụng các mục tạo ra như là "bình thường" đối tượng jQuery - ví dụ, để kéo & thả các mục và thực hiện doSomething đúng() chức năng khi kéo đã dừng lại.
Chúng tôi đã đưa ra một giải pháp cho vấn đề. Nó bao gồm 3 bước riêng biệt: đầu tiên, mục jQuery ban đầu phải được tạo ra:
var item = $.create("div");
sau đó tạo ra một thể hiện của đối tượng javascript bạn muốn tạo và sao chép tất cả các chức năng và đặc tính của nó đến mục jQuery :
$.extend(item, new foo.bar());
Cuối cùng, khởi tạo đối tượng. Lưu ý rằng hàm tạo trong bước trước không thể được sử dụng cho điều này vì đối tượng "this" là khác nhau.
item.initialize();
Sau đó, đối tượng $ (mục) có thể được sử dụng như đối tượng jQuery thông thường, có chức năng và biến cục bộ như đối tượng javascript thông thường.
item.doSomething(); var offset = $(item).offset();
Vì vậy, bạn có thể tạo đối tượng DOM có "lớp" có thể được jQuery sử dụng. BTW, chúng tôi đã sử dụng DUI để tạo không gian tên.
Hy vọng rằng ai đó sẽ tìm thấy giải pháp hữu ích. Nó làm cho mã của chúng tôi đẹp hơn nhiều.
Không chắc chắn về phần Định hướng đối tượng, nhưng jQuery đã hỗ trợ khả năng kéo và thả mà bạn mô tả.
Sử dụng JQuery để Thêm Kéo và thả Hỗ trợ http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx
Tôi vẫn còn khá mới đối với JS và jQuery, vì vậy hãy cứ bắn tôi xuống (hay còn gọi là "phê bình mang tính xây dựng"), nhưng tôi thấy rằng điều này hoạt động tốt để xây dựng các đối tượng JS. đại diện màn hình:
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);
đến từ nền OOP truyền thống hơn, và được sử dụng để sử dụng mẫu MVC, điều này rất thân thiện với tôi. mọi đề xuất chào mừng ...
Tôi thích phương pháp đơn giản hơn so với JohnnyYen et al.
Về cơ bản, tôi tạo một lớp và gán phần tử DOM cho thuộc tính.
ví dụ:
/* 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;
}
}
Lưu ý: đây là mã chưa được kiểm tra, nhưng nó minh họa quan điểm của tôi.
<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>
tham khảo: http://ajax911.com/jquery-object-oriented-plugins/
Tôi biết câu hỏi này là cũ, nhưng đây là cách tôi xây dựng mã phía khách hàng của tôi.
Tôi sử dụng khung công tác oop của riêng mình để xây dựng bộ điều khiển/ứng dụng của mình. Nếu tôi thiết lập một lớp như một singleton, nó được thực hiện trên doc đã sẵn sàng và đóng vai trò như điểm vào của tôi cho ứng dụng khách.
https://github.com/KodingSykosis/jOOP
Bất kỳ mã mà cần phải có thể truy cập toàn cầu, tôi mở rộng jQuery sử dụng $ .extend hoặc $ .fn.extend.
api.jquery.com/jQuery.extend
Xem hoặc mã phong cách trình bày, tôi sử dụng các nhà máy phụ tùng jQueryUI. Các lớp điều khiển của tôi được giao nhiệm vụ tạo ra bất kỳ phần tử nào cần thiết cho một widget để khởi tạo. Mọi thông tin liên lạc được tạo điều kiện thông qua việc sử dụng các sự kiện hoặc gọi lại.
Đây là từ 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);
sử dụng thử nghiệm
$('#test').myplugin();
var myplugin = $('#test').data('myplugin');
myplugin.publicMethod(); // prints "publicMethod() called!" to console
Ngoài ra còn có một plugin dựa trên mô hình này, Tagger dựa trên mô hình này.
Có lẽ bài đăng SO này sẽ giúp bạn bắt đầu: http://stackoverflow.com/questions/1073864/is-jquery-or-javascript-has-concept-of-classes-and-objects –