JavaScript 和 jQuery 中的 Java 式 OOP 失败

Question

我正在做一个项目，我真的在尝试编写面向对象的 JavaScript 代码。我刚刚开始阅读Douglas Crockford's JavaScript: The Good Parts，我很快就开始意识到用 JavaScript 编写 Java 式 OOP 将是一项艰巨的任务。

到目前为止，我已经写了类似以下的内容...

// index.html
$(document).ready(function() {

   $().SetUpElements();
});

// this is in a different js file
$.fn.SetUpElements = function() {

    // do stuff here
    $().UpdateElement();
};

// this is in yet another different js file
$.fn.UpdateElement = function() {

   // do stuff here
   var element = new Element(id, name); // continue doing work
};

function Element(id, name) {

   var id = id;
   var name = name;

   // other stuff
};

... 我希望对象/函数尽可能地重构和解耦；我想尽可能多地重用代码。我将很多代码分布在不同的 .js 文件中，目的是将特定的相关代码组合在一起，就像用 Java 编写不同的类一样。

随着我对 jQuery 的了解越来越多，我意识到符号 $.fn.foo = function() { ... }; 实际上是将这个 foo 函数添加到所有 jQuery 对象的原型中。这是我应该做的事情吗？我是否以某种方式滥用了 jQuery？

我会很感激关于如何改进我在 JavaScript 中的 OOP 方法的建议，我很想看到对讨论这个主题的资源/教程/文章/等的引用。即使选择了答案，也请随时提供反馈。我正在寻找你的建议......这就是我发布的原因:)

** 注意：我不是在开发 jQuery 插件。我正在开发一个网络应用程序并大量使用 jQuery。

Answer 1

如果不是 jquery 插件，我会这样写：

    var app = {
      init: function(){
        app.SetUpElements();
      },
      SetUpElements: function() {
        return 'something';
      }, 
      etc: function() {

      }
    };
   $(document).ready(app.init);

Answer 2

关于在 Javascript 中做 OO 你应该看Douglas Crockford's Advanced Javascript lessons

Answer 3

我会说您创建方法的第一种方式是滥用 jQuery。 jQuery.fn.foo 语法通常保留给作用于 DOM 元素的函数，但您通过使用空的 jQuery 对象将它们用作静态函数。

如果你想在 jQuery 命名空间下创建静态函数，你可以这样做：

jQuery.foo = function(){};

然后通过以下方式调用它：

jQuery.foo();

代替：

jQuery.fn.foo = function(){};

它允许你这样做：

jQuery('#someElementId').foo();

在 OOP 方面。有许多不同的方法（模块模式、原型、工厂......）。我通常处理它的方式是创建一个类作为静态函数，然后使用关键字new 调用它

(function($){
    var undefined;

    $.ClassName = function(options){
        var self = this;
        var cfg = $.extend(true, {}, this.defaults, options);

        // ********************
        // start:private
        // ********************
        function _init(){

        };

        // ********************
        // start:public
        // ********************
        this.methodName = function(){

        };

        _init();
    };

    $.ClassName.prototype.defaults = {};
})(jQuery);

在重用功能方面，有一个阈值，在此阈值之后，解耦比任何事情都更有害。确保在模块化和组织之间保持适当的平衡。

Answer 4

如果您正在开发插件，通常最好尽量避免污染 jQuery 和全局命名空间/原型。

看看this documentation on jQuery's website，它很好地解释了如何提供对各种可重用功能的访问，同时只在 jQuery 对象上声明一个名称。

我看到使用的另一种方法是在 jQuery 命名空间上为您的插件提供单个 init 函数，然后在全局命名空间中提供额外的插件特定名称，这提供了对函数的更直接访问/成员等。Galleria plug-in 是一个很好的例子，说明了如何做好这件事。检查他们的文档，以及他们设置插件结构的方式。

编辑

在看到你不是制作插件之后：我所说的许多东西仍然适用于一般的 jQuery 开发（实际上，适用于一般的开发）。

在您的特定情况下，由于您在进行函数调用时没有使用 jQuery 选择器，因此这些函数可能很容易附加到您自己制作的原型上，该原型可以放置在全局命名空间中。

就命名空间而言，请查看有关此问题的公认答案，以了解如何正确执行此操作的示例：How do I declare a namespace in JavaScript?

这里是 JavaScript 中 OO 的一个很好的资源。我在尝试理解这个概念时使用了这篇文章：http://mckoss.com/jscript/object.htm

Answer 5

看起来您将所有代码都编写为 jQuery 插件？我不会那样做的。创建您自己的命名空间。

将所有内容放在不同的文件中的目的是什么？除非它们是用于特定页面的脚本，否则只会让管理变得更加困难。这些看起来都像一般的库函数。除非你认为你想在一个页面上加载一些，但不是全部，否则将它们全部放在一个文件中。

面向对象的编程并不意味着跨文件分割东西。这只是组织，当您不需要某个页面上的所有内容时，应该将内容分成不同的文件。

Answer 6

正如大多数人已经提到的，除非您明确创建公共插件，否则不要使用 jQuery 自定义函数。而是使用简单的对象表示法或像Module Pattern 这样更健壮的东西来创建自己的命名空间。如果您想变得疯狂，您可以在 API 之上使用 API，通过使用 Dean Edward's Base 来获得更经典的 OO 模式。最终目标是从 jQuery API 中提取您的功能和设计需求。这样一来，如果您需要将某些东西移植到 Mootools 或 Prototype 上，完成起来会容易得多。