Question

我重新设计一个旧脚本，先将其设为OOP，然后再使用jQuery。我知道之前有人问这个问题，但答案似乎不适合我的情况。或者，如果没有jQuery知识，我就无法获得它。

这个工作脚本根据mousevents调整DIV的大小，它们在它们之间传递一个布尔属性。但是方法通过对象名称引用属性，这是我理解的糟糕的OOP。我在＆＃34; init＆＃34;中看到了很多答案。功能和重命名＆＃34;这个＆＃34;我理解，但我无法将这些解决方案与我的剧本联系起来：

See my Fiddle.

PositionXY = {
    baseX : undefined,
    baseY : undefined,
    isRepositionable : true,

    detectBasePosition : function (e) {

        "use strict";
        PositionXY.isRepositionable = true;   // bad OOP
        e = e || window.event;    // crossbrowser event acces
        if (this.currentStyle){   // IE
            if (e.clientX || e.clientY) {
                PositionXY.baseX = e.clientX - this.currentStyle.width.replace(/px/,"");
                PositionXY.baseY = e.clientY - this.currentStyle.height.replace(/px/,"");   
            }
        } else if (window.getComputedStyle){  // Mozilla
            if (e.pageX || e.pageY) {
                PositionXY.baseX = e.pageX - document.defaultView.getComputedStyle(this,null).getPropertyValue("width").replace(/px/,"");
                PositionXY.baseY = e.pageY - document.defaultView.getComputedStyle(this,null).getPropertyValue("height").replace(/px/,"");
            }
        }
    },
    startPositionAdjustment : function (e) {

        "use strict";
        if (PositionXY.isRepositionable) {   // bad OOP
            e = e || window.event;           // crossbrowser event acces
            if (e.clientX || e.clientY) {    // IE
                this.style.width = e.clientX - PositionXY.baseX + "px";
                this.style.height = e.clientY - PositionXY.baseY + "px";
            } else if (e.pageX || e.pageY) {  // Mozilla 
                this.style.width = e.pageX - PositionXY.baseX + "px";
                this.style.height  = e.pageY - PositionXY.baseY + "px";
            }
        } else return;
    },
    stopPositionAdjustment : function () {

        "use strict";
        PositionXY.isRepositionable = false;    // bad OOP
    }
};


var elm = document.getElementById("x");
elm.onmousedown = PositionXY.detectBasePosition;
elm.onmousemove = PositionXY.startPositionAdjustment;
elm.onmouseup = PositionXY.stopPositionAdjustment;

Answer 1

您可以在函数中使用this，但您必须确保正确bind事件处理程序：

 var elm = document.getElementById("x");
 elm.onmousedown = PositionXY.detectBasePosition.bind(PositionXY);
 elm.onmousemove = PositionXY.startPositionAdjustment.bind(PositionXY);
 elm.onmouseup = PositionXY.stopPositionAdjustment.bind(PositionXY);

但是，使用this获得的唯一优势是能够在更改PositionXY的初始值时将PositionXY重新别名为其他变量，这可能永远不会发生。

使用IIFE，您还可以在保持初始设计简洁的同时克服这个问题：

var YourObject = (function () {
    var YourObject = {
        someProperty: 'test',
        someFunction: function () {
            console.log(YourObject.someProperty);
        }
    };

    return YourObject;
})();

从充当事件处理程序的多个方法引用对象属性

1 个答案: