【问题标题】:jQuery OOP basicsjQuery OOP 基础知识
【发布时间】:2011-07-05 06:54:29
【问题描述】:

我想开始开发 jQuery 游戏,因此我需要学习 jQuery OOP。我对 C++ OOP(开发了一些游戏)有一些(足够的)经验。

我知道我可以用 jQuery“对象”替换 C++“类”,但我不知道它是如何工作的。

jQuery 是否也有更高级的“选项”,例如 C++? (抽象类/对象、继承等...)

你们能给我解释一下吗? (或者给我一些好的 javascript OOP 教程的链接)。

【问题讨论】:

  • 首先要做的就是说服自己,JavaScript 与 C++ 的不同远大于相似之处。
  • 是的,我知道,但是 OOP 在所有编程语言中都是“相同的”(+ / - ),只是语法不同:D
  • 哦,请注意,jQuery 只是一个 JavaScript 库——它不是一种独特的语言。您应该做的是学习 JavaScript 语言,然后学习 jQuery API(或您选择的任何其他工具包;jQuery 不是唯一的选择)。
  • @Cristy 这个说法绝对不正确——JavaScript 中的面向对象编程在基本方面与 C++ 中的面向对象编程有很大不同。
  • @Cristy:下一个阶段是正确学习 JavaScript。 developer.mozilla.org/en/JavaScript/Guide,尤其是developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects

标签: jquery oop


【解决方案1】:

JavaScript 中的 OOP 编程可以通过多种方式完成。周围有很多模式。

我将向您展示两个,对象继承的实现和对象组合的实现。

这确实与 jQuery 无关。 jQuery 应该用于 DOM 操作和事件操作。你不应该让你的核心对象和构造函数基于 jQuery 对象。在游戏中,jQuery 的作用是读取键盘输入并选择性地将图形渲染到 DOM 中(如果由于某种原因你没有使用 <canvas>)。

Live example

继承

var Constructor = function(name) {
    this.name = name
};

Constructor.prototype.mymethod = function() {
    alert("my name is : " + this.name);
};

var obj = new Constructor("foo");
obj.mymethod(); // my name is : foo

这里定义了一个Constructor 函数,您可以调用它来创建一个新对象。您使用this 引用构造函数内的对象。

您可以将(静态)方法和变量添加到将由对象继承的构造函数的原型中。

function inherits(child, parent) {
    var f = new Function;
    f.prototype = parent.prototype;
    f.prototype.constructor = parent;
    child.prototype = new f;
    child.prototype.constructor = child;
}

您可以使用inherits 函数,它将构造函数的原型设置为不同构造函数的实例。这意味着该父对象的所有方法和属性在子对象上都可用

var SecondConstructor = function(name) {
    this.name = name + "bar";
};
inherits(SecondConstructor, Constructor);
var obj = new SecondConstructor("foo");
obj.mymethod(); // my name is : foobar

这是 JavaScript 的原型继承。基本上,您将函数的原型设置为特定对象。然后,当您使用该函数创建对象时,这些对象将实现原型。

作曲

实际上并不需要使用原型,您也可以使用对象组合来代替。这种方法确实需要很好地理解this 状态,您可以阅读有关elsewhere 的信息。

我要作弊并将一些乏味的辅助函数委托给underscore.js

var Constructor = function(name) {
    this.name = name;

    this.mymethod = function() {
        alert("my name is : " + this.name);
    };
};

var SecondConstructor = function(name) {
    var constructor = new Constructor(name + "bar");
    _.bindAll(constructor);
    _.extend(this, {
        "mymethod": constructor.mymethod
    });
};

var obj = new SecondConstructor("foo");
obj.mymethod();

这里 SecondConstructor 为自己创建一个 Constructor 实例,而不是从它继承。然后它将this 的引用绑定到该构造函数对象的所有方法上,以便我们可以将对mymethod 的调用委托给我们自己的构造函数对象。这仅适用于方法,但这不应该成为问题,因为您确实不应该拥有公共字段。

【讨论】:

  • 非常感谢。真的很感激:D
  • @Cristy 我个人推荐第二个,并采用更实用的方法,例如 python/ruby 而不是 C++。
  • 仅供参考,在您的继承示例中,您在构造函数中显示“this.myname”,然后在方法中将其称为“this.name”。
【解决方案2】:

OOP 在所有编程语言中都相同。 C++ 中的对象是类的实例,而类是完全编译时的构造。 Javascript 没有类,只有对象。

可以以类似于类的方式使用 Javascript,使用范围规则、原型链和特殊的“this”引用,但这些是强加于语言的习语,而不是语言的一部分。并且有很多不同的类风格的常用习语,以及无数自创的习语。

在我看来,javascript 和 C++/C#/Java/etc. 之间的关键区别最好通过探索范围规则来理解。什么变量在代码中的任何点都在范围内,特殊的“this”引用指向什么对象,什么时候,什么是理解的关键,当尝试使用 javascript 时。

【讨论】:

  • 了解原型继承也很重要。
【解决方案3】:

作为说明,我最近开始使用Processing.js,它允许声明类 C++ - 比如,只需使用 'class' 。

后期编辑(2014 年 6 月):

Processing.js 非常适合让项目顺利进行,而无需 JavaScript OOP 进行斗争。但是当我开始开发更大的项目时,我注意到 Processing.js 是一个过于抽象的层次,实际上值得自己编写 OOP 位和整个代码结构。

我现在使用PIXI.js 作为我的画布渲染器/交互库,并使用上面提到的一些 OOP 技巧以更简洁的方式构建我的代码。

【讨论】:

    猜你喜欢
    • 2014-06-19
    • 2011-08-28
    • 1970-01-01
    • 2014-04-16
    • 2018-05-25
    • 2014-11-28
    • 2014-02-14
    • 2023-04-10
    • 1970-01-01
    相关资源
    最近更新 更多