jQuery OOP基础 [英] jQuery OOP basics

问题描述

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

I want to start developing jQuery games, thus I need to learn jQuery OOP. I have some (enough) experience with C++ OOP (developed some games).

我知道我可以用jQuery对象"替换C ++类"，但是我不知道它是如何工作的.

I know that I can replace the C++ "class" with jQuery "objects" but I don't know how exactly that works.

jQuery还具有像C ++这样的更高级的选项"吗? (抽象类/对象，惯性等等)

Also does jQuery have more advanced "options" like C++ ? (abstract classes/objects, inheirtance, etc... )

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

Can you guys explain that to me? (or give me the link to some good javascript OOP tutorials).

推荐答案

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

OOP programming in JavaScript can be done in many ways. There are a lot of patterns around.

我将向您展示两个，一个对象继承的实现和一个对象组合的实现.

I will show you two, an Implementation of object inheritance and an implementation of object composition.

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

This does have absolutely nothing to do with jQuery. jQuery should be used for DOM manipulation and event manipulation. You shouldn't make your core objects and constructors based on jQuery objects. In a game jQuery's role is reading keyboard input and optionally rendering your graphics into the DOM (If you're not using the <canvas> for some reason).

实时示例

继承

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引用构造函数中的对象.

Here were defining a Constructor function that you can call to create a new object. You refer to the object inside the constructor with this.

您可以向构造函数的原型添加(静态)方法和变量，这些方法和变量将被对象继承.

You can add (static) methods and variables to the prototype of the Constructor that will be inherited by the object.

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函数，该函数将构造函数的原型设置为其他构造函数的实例.这意味着该父对象的所有方法和属性都可以在子对象上使用

You may use an inherits function which set's the prototype of a constructor function to an instance of a different constructor. This means that all the methods and properties of that parent object are available on the child

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

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

This is JavaScripts prototypical inheritance. Basically you set the prototype of a function to a particular object. Then when you use the function to create objects those objects implement the prototype.

组成

实际上并不需要使用原型，也可以使用对象组合.此方法的确需要很好地理解this状态，您可以了解其他地方.

Using the prototype isn't actually neccesary you can also use object composition instead. This method does require a good understanding of the this state which you can read about elsewhere.

我要作弊并将一些繁琐的帮助程序函数委派给 underscore.js

I'm going to cheat and delegate some of the tedious helper functions to 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的调用委派给我们自己的构造函数对象.这仅适用于方法，但这不应该成为问题，因为您实际上不应该具有公共字段.

Here the SecondConstructor creates an instance of Constructor for itself rather then inheriting from it. It then binds the reference of this on all the methods of that constructor object so that we can delegate the call to mymethod to our own constructor object. This only works for methods but that shouldn't be an issue because you really shouldn't have public fields.

这篇关于jQuery OOP基础的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！