以面向对象的方式使用 jQuery

Posted 2023-02-23

【中文标题】以面向对象的方式使用 jQuery

【英文标题】：using jQuery in object-oriented way

【发布时间】：2010-11-15 03:16:06

【问题描述】：

是否可以使用 jQuery 实现以下目标： 我想创建两个具有相同名称的不同功能的不同对象。

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

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

【问题讨论】：

也许这篇 SO 帖子可以帮助您入门：***.com/questions/1073864/…

【参考方案1】：

我们已经想出了解决问题的办法。 它由 3 个独立的步骤组成： 首先，必须创建初始 jQuery 项：

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

然后创建一个您想要创建的 javascript 对象的实例，并将它的所有函数和属性复制到 jQuery 项：

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

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

item.initialize();

在此之后，对象 $(item) 可以像普通的 jQuery 对象一样使用，而且它像普通的 javascript 对象一样具有函数和局部变量。

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

因此，您可以制作具有可供 jQuery 使用的“类”的 DOM 对象。 顺便说一句，我们使用 DUI 来创建命名空间。

希望有人会发现该解决方案很有帮助。它使我们的代码变得更好。

【参考方案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);

来自更传统的OOP背景，习惯使用MVC模式，这对我来说很友好。欢迎任何建议...

【参考方案3】：

这是来自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 基于此模式。

【参考方案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/

【参考方案5】：

不确定面向对象部分，但 jQuery 已经内置了对您所描述的那种拖放功能的支持。

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

【参考方案6】：

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

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

【参考方案7】：

我知道这个问题很老，但这是我构建客户端代码的方式。

我使用自己的 oop 框架来构建我的控制器/应用程序。如果我将一个类设置为单例，它会在文档就绪时执行，并用作客户端应用程序的入口点。

https://github.com/KodingSykosis/jOOP

任何需要全局访问的代码，我都使用 $.extend 或 $.fn.extend 扩展 jQuery。

api.jquery.com/jQuery.extend

查看或演示样式代码，我使用 jQueryUI 小部件工厂。我的控制器类的任务是创建小部件实例化所需的任何元素。通过使用事件或回调来促进任何通信。

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