Вызов динамической функции Javascript

#javascript #dynamic

#javascript #динамический

Вопрос:

Я хочу сделать что-то вроде Rubyish в Javascript. Я пишу оболочку для настройки стилей элементов DOM. Это будет выглядеть примерно так (в зависимости от стиля):

 ele.style.backgroundColor = someSetting
ele.style.padding = anotherSetting

Что я хотел бы сделать (и я буду использовать синтаксис Ruby для иллюстрации), так это:

 class Element
  def initialize(ele)
    @ele = ele
  end

  def setDOMElementStyle(styleSettings = {})
    styleSettings.each_pair do |styleAttribute, setting|
      @element.style.send(styleAttribute, setting)
  end

  # Other wrapper stuff for elements here
end

element = Element.new document.createElement("div")
element.setDOMElementStyle :width => '60px', :height => '2px', :top => '0px', :left => '0px'

В Javascript я могу сделать это с помощью страшного eval , но мне было интересно, есть ли более аккуратный способ справиться с этим. Вот как это сделать со злом eval .

 var Element, element;

Element = function() {
  function Element(element) {
    this.element = element;
  }
  Element.prototype.setDOMElementStyle = function(styleSettings) {
    var setting, styleAttribute;

    if (styleSettings == null) {
      styleSettings = {};
    }
    for (setting in styleSettings) {
      styleAttribute = styleSettings[setting];
      eval("@element.style."   styleAttribute   " = "   setting);
    }
  }
}

element = new Element(document.createElement("div"));
element.setDOMElementStyle({
  width: '60px',
  height: '2px',
  top: '0px',
  left: '0px'
});

Спасибо!

1. Я не уверен, зачем вам это нужно eval , можете ли вы просто использовать jQuery и .css() ? Или .style[attr]=val ?

2. Вы уже использовали [] для доступа styleSettings[setting] …

3. @DaveNewton Псевдокод для образовательных целей. Использование трюков — неправильный метод изучения языка.

4. @RobW Не уверен, почему ты мне это говоришь.

5. Он явно пытается перенести поведение ruby-иша в JS. Способ изучения JS — это не «использование jQuery» (jQuery == JS, но JS != jQuery).

Ответ №1:

Используйте квадратные скобки:

 element.style[styleAttribute] = setting

В JavaScript на каждое свойство также можно ссылаться с помощью квадратных скобок. Примеры:

 window.location.href === window["location"].href === window["location"]["href"]
    === window.location["href"]

1. [смущенная усмешка] Я вспомнил, что некоторые объекты DOM были просто враждебны к доступу как к обычным индексируемым объектам. К счастью, оказывается, я ошибался. Спасибо!