JavaScript中的OOP和jQuery失败

我正在开发一个项目，并且我正在尝试编写面向对象的JavaScript代码。 我刚开始阅读道格拉斯克罗克福德的JavaScript：The Good Parts，我很快就开始意识到用JavaScript编写Java-esque 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插件。 我正在开发一个Web应用程序，并大量使用jQuery。

---

我会说你创建方法的第一种方式是滥用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);

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

---

如果它不是一个jQuery插件，我会写这样的东西：

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

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

---

参考在JavaScript中做OO，你应该看道格拉斯克罗克福德的高级Javascript课程

链接地址: http://www.djcxy.com/p/17073.html

上一篇: esque OOP in JavaScript and a jQuery fail

下一篇: How to isolate my javascript code to prevent collisions?