面向对象的 JavaScript 工具

Question

我一直在处理我网站的用户界面（www.swalif.com：如果你愿意，请使用 chrome 进行翻译）。不熟悉 jQuery 我从 JavaScript 开始，现在文件很大：大约 1000 行代码。此外，代码的处理和更改变得越来越复杂。

因此，我一直在寻找一种方法，可以以面向对象的方式解决此问题，从而产生具有良好架构的干净、可重用的系统。 也可以使用 JQuery 提供的功能来保持代码小。

问题是那里有很多工具，我无法决定要花时间来完成这项任务。例如mootools、prototype、jQuery 等。所以我需要有人引导我朝着正确的方向前进。

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

Answer 1

对于面向对象的 javascript 开发，我推荐 John Resig 的 Simple javascript Inheritance。它是一小段 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

Answer 2

如果您只需要组织代码而不需要库，您可以使用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);
            }
        }
    })
})

Answer 3

我认为您最好使用一个积极开发并使用 OOP 构建的框架，同时考虑到可扩展性、可重用性、混合、变异器。

这正是创建 MooTools 的原因。

也就是说，如果您不熟悉 JS，那么掌握 MooTools 将非常困难，因为它不是适合初学者的框架。再说一次，如果你掌握了 OOP 的概念，你应该没问题。

Answer 4

实际上不要使用框架来实现您的 OOP。当您处理使用 Javascript 的非常灵活的函数原型系统来实现类似 OOP 的操作的细节时，您会更深入地了解 Javascript 作为一门语言。

在此处阅读：http://phrogz.net/JS/Classes/OOPinJS.html。