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