使用jQuery创建一个简单的JavaScript类

我正在尝试理解jQuery类,但它不是很顺利.

我的目标是以这种方式使用类(或者学习更好的方法)：

var player = new Player($("playerElement"));
player.InitEvents();

使用其他人的例子,这就是我尝试过的：

$.Player = function ($) {

};

$.Player.prototype.InitEvents = function () {

    $(this).keypress(function (e) {
        var key = e.which;
        if (key == 100) {
            MoveRight();
        }
        if (key == 97) {
            MoveLeft();
        }
    });
};

$.Player.prototype.MoveRight = function () {
    $(this).css("right",this.playerX += 10);
}

$.Player.prototype.MoveLeft = function () {
    $(this).css("right",this.playerX -= 10);
}

$.Player.defaultOptions = {
    playerX: 0,playerY: 0
};

最终目标是使用键盘字母A和D左右移动屏幕上的角色.

我有一种感觉,我在这个“班级”做错了
但我不确定为什么.

(对不起我的英语不好)

解决方法

一个重要的问题是你必须将传递的jQuery对象/元素分配给this.element – 或另一个this.propertyName – 以便稍后可以在实例的方法中访问它.

你也不能直接调用MoveRight()/ MoveLeft(),因为这些函数没有在作用域链中定义,而是在实例的构造函数的原型中定义,因此你需要引用实例本身来调用它们.

更新和评论的代码如下：

(function ($) { //an IIFE so safely alias jQuery to $
    $.Player = function (element) { //renamed arg for readability

        //stores the passed element as a property of the created instance.
        //This way we can access it later
        this.element = (element instanceof $) ? element : $(element);
        //instanceof is an extremely simple method to handle passed jQuery objects,//DOM elements and selector strings.
        //This one doesn't check if the passed element is valid
        //nor if a passed selector string matches any elements.
    };

    //assigning an object literal to the prototype is a shorter Syntax
    //than assigning one property at a time
    $.Player.prototype = {
        InitEvents: function () {
            //`this` references the instance object inside of an instace's method,//however `this` is set to reference a DOM element inside jQuery event
            //handler functions' scope. So we take advantage of JS's lexical scope
            //and assign the `this` reference to another variable that we can access
            //inside the jQuery handlers
            var that = this;
            //I'm using `document` instead of `this` so it will catch arrow keys
            //on the whole document and not just when the element is focused.
            //Also,Firefox doesn't fire the keypress event for non-printable
            //characters so we use a keydown handler
            $(document).keydown(function (e) {
                var key = e.which;
                if (key == 39) {
                    that.moveRight();
                } else if (key == 37) {
                    that.moveLeft();
                }
            });

            this.element.css({
                //either absolute or relative position is necessary 
                //for the `left` property to have effect
                position: 'absolute',left: $.Player.defaultOptions.playerX
            });
        },//renamed your method to start with lowercase,convention is to use
        //Capitalized names for instanceables only
        moveRight: function () {
            this.element.css("left",'+=' + 10);
        },moveLeft: function () {
            this.element.css("left",'-=' + 10);
        }
    };


    $.Player.defaultOptions = {
        playerX: 0,playerY: 0
    };

}(jQuery));

//so you can use it as:
var player = new $.Player($("#playerElement"));
player.InitEvents();

Fiddle

另请注意,JavaScript没有实际的“类”(至少在ES6实现之前),也没有方法(根据定义只与Classes关联),而是提供类似于类的甜蜜语法的构造函数.这是一篇由TJ Crowder撰写的关于JS“假”方法的精彩文章,它有点先进,但每个人都应该能够从阅读中学到新东西：
http://blog.niftysnippets.org/2008/03/mythical-methods.html

使用jQuery创建一个简单的JavaScript类

解决方法

猜你在找的jQuery相关文章