Question

我正在尝试将Brandon Kelly的AC.VR类（Prototype）翻译成jQuery插件。

Here是他的例子的链接（不幸的是只在Safari中工作）。

我成功地完成了基础工作。我遇到的问题是脚本的速度，加速度和摩擦部分的鼠标事件历史记录。

以下是原型代码的简短摘录：

.
.
.
makeInteractive: function(){
    this.bindGrabStart = this.onGrabStart.bind(this);
    this.bindGrabChange = this.onGrabChange.bind(this);
    this.bindGrabEnd = this.onGrabEnd.bind(this);
},
onGrabStart: function(event){
    this.grabHistory = $A([ event ]);
    this.grabHistoryInterval = setInterval(this.updateGrabHistory.bind(this), 10);
},
onGrabChange: function(event){
    this.onGrabChange.clientX = event.clientX;
    this.onGrabChange.clientY = event.clientY;
},
updateGrabHistory: function(){
    var func = this.onGrabChange.clientX ? this.onGrabChange : this.onGrabStart;
    this.grabHistory.unshift({ clientX: func.clientX, clientY: func.clientY });
    if (this.grabHistory.length > 3) {
        this.grabHistory.splice(3);
    }
},
.
.
.

，这是我的jQuery翻译：

.
.
.
var makeInteractive = function(){
    $(document).bind("mousedown", function(event) { obj.onGrabStart(event) }, false);
    $(document).bind("mousemove", function(event) { obj.onGrabChange(event) }, false);
    $(document).bind("mouseup", function(event) { obj.onGrabEnd(event) }, false);
}

this.onGrabStart = function(event){
  ???
}

this.onGrabChange = function(event){
    this.onGrabChange.clientX = event.clientX;
    this.onGrabChange.clientY = event.clientY;
};

this.updateGrabHistory = function(event){
    var func = this.onGrabChange.clientX ? this.onGrabChange : this.onGrabStart;
    this.grabHistory.filter({ clientX: func.clientX, clientY: func.clientY });
    if (this.grabHistory.length > 3) {
        this.grabHistory.splice(3);
    }
};
.
.
.

基本上问题是：如何在jQuery中处理grabHistory（数组对象？）？

这条线让我最为困惑：

this.grabHistory = $A([ event ]);

我刚刚找到这个页面，它解释了一下$ A函数： http://www.learn-javascript-tutorial.com/PrototypeJS.cfm#Dollar_A_Function

我很感激每一个建议。

Answer 1

official documentation说：

<强> $A

$A(iterable) → actualArray

接受类似数组的集合（任何带有数字索引的集合）并返回其等价物作为实际的Array对象。此方法是Array.from的便捷别名，但是是转换为数组的首选方法。

$A的主要用途是根据可以作为数组传递的任何内容获取实际的Array对象（例如，由众多DOM返回的NodeList或HTMLCollection个对象方法，或函数中预定义的参数引用。）

你想要一个实际数组的原因很简单：Prototype扩展了Array以配备了许多额外的方法，并且还在Enumerable模块中混合，这带来了另一大堆漂亮的方法。因此，在Prototype中，实际的Arrays胜过你可能获得的任何其他集合类型。

这听起来像一个非常原型的用法，可能不需要将1：1翻译成jQuery。在jQuery中，jQuery对象本身拥有所有强大的方法，类似数组的集合和Array-instances之间的区别通常并不重要。

Answer 2

让您感到困惑的一条线实际上是在$A使用不需要的地方，可以安全地删除它：

this.grabHistory = [event];

$A是一个辅助函数，用于从类似数组的对象（例如DOMCollection或arguments对象）生成实数组。 / p>

表达式$A([event])简直是多余的，因为您实际上构建的是一个实数组，它有一个元素event对象 - 文字[event]那样做 - 。

术语 array-like 表示包含数字属性和length属性的对象，但实际上不是数组 - 它不会从{{1}继承方法} - 。

无论如何，Array.prototype函数的实现非常简单（你可以看到实际的PrototypeJS实现here）：

$A

如何将原型的$ A（）函数转换为jquery？

2 个答案: