面向对象的JavaScript工具

Question

我一直在处理我的网站用户界面（www.swalif.com：如果需要，可以使用Chrome进行翻译）。由于不熟悉jQuery，我最初使用JavaScript编写，现在文件非常大：约有1000行代码。此外，代码越来越复杂，难以处理和更改。

因此，我正在寻找一种以面向对象的方式解决这个问题的方法，以便得到一个干净、可重用的系统和良好的架构。同时，使用JQuery提供的功能可以使代码更加简洁。

问题在于有很多工具可供选择，我无法决定要投入时间来完成这项任务的工具，例如mootools、prototype、jQuery等。因此，我需要有人指引我走向正确的方向。

这是我们的网站www.swalif.com。欢迎提出任何其他建议。

- Imran Omar Bukhsh

---

我建议您首先阅读使用对象。 - Felix Kling

你想使用框架重写所有的JavaScript代码，还是只是重构代码？ - Jon Abaca

@Jon Abaca：不介意重写代码。 - Imran Omar Bukhsh

我建议您在提到工具列表时使用JQuery：它有非常完善的文档支持，有很多插件可用，并且不会像Prototype或Mootools那样更改/污染全局空间和主机对象方法。对于对象继承，您只需选择任何现有的“extend”实现即可。 - BiAiB

Answer 1

对于面向对象的JavaScript开发，我建议使用John Resig的简单JavaScript继承。它是一小段JavaScript代码，允许您定义类、派生自基类和覆盖方法。

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});
var Ninja = Person.extend({
  init: function(){
    this._super( false );
  },
  dance: function(){
    // Call the inherited version of dance()
    return this._super();
  },
  swingSword: function(){
    return true;
  }
});

var p = new Person(true);
p.dance(); // => true

var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true

// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

- Jakub Konecki

Answer 2

我认为你最好选择一个积极开发、以面向对象编程(OOP)为基础、具有可扩展性、可重用性、混合(mixings)和变异(mutators)特点的框架。

这正是为什么MooTools被创建出来的原因。

话虽如此，如果你不熟悉JS，那么理解MooTools将会非常困难，因为它不是面向初学者的框架。不过，如果你掌握了OOP的概念，那么应该没有问题。

- Oskar Krawczyk

Answer 3

不要使用框架来实现面向对象编程。当你处理使用JavaScript的非常灵活的函数原型系统来实现类似面向对象操作的细节时，你会更加深入地了解JavaScript作为一种语言。

在这里阅读相关内容：http://phrogz.net/JS/Classes/OOPinJS.html。

- Chris W.

---

我赞同这个观点，尝试在JS中手动定义类和继承并理解其工作原理确实非常有帮助。 - BiAiB

为什么要重复造轮子？虽然知道它是如何工作的很好，但完全正确地实现面向对象编程并不容易。 - Konstantin Weitz

Answer 4

如果您只需要组织代码而不需要库，可以使用http://code.google.com/p/joose-js/。否则，请使用您正在使用的库的oop模型。

简单示例

Module("Test", function (m) {
    Class("Point", {
        has: {
            x: {
                is:   "rw",
                init: 0
            },
            y: {
                is:   "rw",
                init: 0
            }
        },
        methods: {
            clear: function () {
                this.setX(0);
                this.setY(0);
            }
        }
    })
})

- Konstantin Weitz

---

好的，列表中又添加了以下内容：mootools、prototype、Jquery和Juice。 - Imran Omar Bukhsh

JavaScript非常灵活。它赋予你选择的权力。Juice是其中一个选项，将为你提供强大且易于编写的面向对象编程。 - Konstantin Weitz