2013-12-18 3 views
3

Вопрос: Возможно ли, чтобы объект1 предоставлял атрибут объекта2 таким образом, чтобы не нужны геттеры и сеттеры? Поэтому я мог сделать 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, так ..).

+0

Я получаю большую часть этого вопроса, но если у вас просто есть 'min = Math.min (min, direction.value)', как он узнает, из какого элемента вы хотите получить значение min 'value'? – Jamiec

+0

В равной мере с 'direction.value = min;' вы больше не передаете ссылку на какой элемент, который вы пытаетесь установить. – Jamiec

+0

@Jamiec Oh. Это правда. Таким образом, пример не очень хорош, чтобы продемонстрировать то, что я хотел достичь. Во всяком случае, ради вопроса, пожалуйста, не обращайте внимания на этот факт, и либо я придумаю какой-нибудь лучший пример, либо просто представьте, что атрибут 'element' был передан там« как-то »:) – Erlik

ответ

1

Javascript в некоторых браузерах поддерживает getters and setters as described in this article

Используя свои объекты:

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/

Это, казалось бы, в первую очередь, чтобы быть что вы описали в г, но имейте в виду, что не имеет глобальной поддержки

Firefox
Safari 3+ (Brand New)
Opera 9.5 (Скоро)
Источник: выше связанный статью

+0

О, это именно то, рыбалка для. Я просто не мог это сделать. Благодаря! – Erlik

Смежные вопросы