引用属性而不是 getter 和 setter

Reference to an attribute instead of getters and setters

本文关键字：getter setter 属性 引用      更新时间：2023-09-26

问题：是否有可能让对象 1 以某种方式提供 object2 的属性，不需要 getter 和 setter？所以我可以做a = object1.attribute和object1.attribute = a.

示例：我正在实现对页面上绝对定位的HTML对象的动态对齐的支持。应支持各种对齐方式 - 左，右，顶部，底部，水平中心，垂直中心甚至均匀间隔。为了减少重复代码的数量，我想出了实现类Direction的解决方案，它可以是水平的和垂直的，并且在Element方面以外观模式工作。它作为属性传递给对齐函数。同样，我正在处理左/右/中间并均匀分布区分，但为了简单起见，让我们在这里忽略它。

这是课程。

Direction = function(selector) {
    this.selector = selector;
}
Direction.prototype.get = function(element) {
    return parseInt(element.style[this.selector]);
}
Direction.prototype.set = function(element, value) {
    element.style[this.selector] = value + 'px';
}

以下是客户端可用的"常量"。

Direction.VERTICAL = new Direction('left');
Direction.HORIZONTAL = new Direction('top');

这是执行"最小"对齐（左或上）的公共方法。

alignMin = function(elements, direction) {
    var min = Number.MAX_VALUE;
    for (var i = 0; i < elements.length; i++) {
        min = Math.min(min, direction.get(elements[i]));
    }
    for (var i = 0; i < elements.length; i++) {
        direction.set(elements[i], min);
    }
}

这里的客户端演示了预期用途。

alignDivsToLeft = function() {
    alignMin(document.getElementsByTagName("div"), Direction.VERTICAL);
}

JSFiddle上的工作示例：http://jsfiddle.net/7Tpam/

再次提问：所有这些都有效，我只是想知道，如果我可以做一些事情（对值的引用？）来直接访问"代理"属性，而不是Direction.get()和Direction.set()方法，所以alignMin函数可以使用 

...
min = Math.min(min, direction.value);     // possibly with parseInt()
...

和

...
direction.value = min;                    // possibly with + 'px'
...

如果有一个简单的解决方案，那将是一种更短、更清晰、更优雅的方式，尤其是在具有更多属性（位置、尺寸等）的情况下。此外，还有好奇心的因素（仍在学习JavaScript的魔力，所以..）。

某些浏览器中的 Javascript 支持本文中所述的 getter 和 setter。

使用对象：

Direction = function(selector) {
    this._selector = selector;
}
Direction.prototype = {
    get selector(){
        return this._selector;
    },
    set selector(selector){
        this._selector = selector
    }
}

用法：

var direction = new Direction("left");
console.log(direction.selector); // getter
direction.selector = 'right' //setter

JSFiddle： http://jsfiddle.net/7Tpam/1/

这似乎是您首先描述的内容，但请注意，它没有全局支持

火狐
野生动物园 3+ （全新）
Opera 9.5 （即将推出）
来源：上文链接文章

相关文章：