以面向对象的方式使用jQuery

dfddblmv  于 2022-12-12  发布在  jQuery
关注(0)|答案(7)|浏览(144)

使用jQuery是否可以实现以下功能:我想创建两个不同的对象,它们具有相同的名称和不同的功能。

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

此外,我希望能够将创建的项目用作“常规”jQuery对象--例如,拖放项目并在拖动停止时执行正确的doSomething()函数。

1aaf6o9v

1aaf6o9v1#

我们想出了一个解决这个问题的办法。它包括三个独立的步骤:首先,必须创建初始jQuery项:

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

然后创建要创建的javascript对象的示例,并将其所有函数和属性复制到jQuery项:

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

最后,初始化对象。请注意,上一步中的构造函数不能用于此操作,因为“this”对象不同。

item.initialize();

在这之后,对象$(item)可以像一个常规的jQuery对象一样使用,另外它还像一个常规的javascript对象一样具有函数和局部变量。

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

因此,您可以创建具有jQuery可以使用的“类”的DOM对象。顺便说一句,我们使用DUI来创建名称空间。
希望有人会发现这个解决方案有帮助。它使我们的代码更好。

wqlqzqxt

wqlqzqxt2#

我对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模式,这对我来说很友好。欢迎任何建议。

sbtkgmzw

sbtkgmzw3#

这是来自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

pw136qt2

pw136qt24#

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

5f0d552i

5f0d552i5#

我更喜欢一个比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;
    }
}

注意:这是未经测试的代码,但它说明了我的观点。

pgky5nke

pgky5nke6#

不确定对象方向部分,但是jQuery已经为您所描述的拖放功能提供了支持。

使用JQuery添加拖放支持http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

ktca8awb

ktca8awb7#

我知道这个问题已经过时了,但这就是我构建客户端代码的方式。
我使用我自己的oop框架来构建我的控制器/应用程序。如果我将一个类设置为单例,它将在文档就绪状态下执行,并作为客户端应用程序的入口点。
https://github.com/KodingSykosis/jOOP
对于任何需要全局访问的代码,我都使用$.extend或$. fn. extend来扩展jQuery。
api.jquery.com/jQuery.extend
视图或表示样式代码,我使用jQueryUI部件工厂。我的控制器类负责创建部件示例化所需的任何元素。任何通信都通过使用事件或回调来促进。
http://api.jqueryui.com/jQuery.widget

相关问题