JS - Название свойства Доступ

Question

Я ранее размещал версию этого вопроса (JS - Constructor referencing) и выяснил ответ в пределах дубликатов, особенно Access/process (nested) objects, arrays or JSON. Отсюда у меня все еще есть нелепое время, чтобы это работало по назначению.

Учитывая следующий пример кода:

function f1(args) { 
     this.defaults = { 
      param1 : 100, 
      param2 : 900; 
     } 
     this.ranges = { 
      param1 : { min : 0, max : 500 }, 
      param2 : { min : 0, max : 1000 }; 
     } 
     this.steps = { 
      param1 : 50, 
      param2 : 100; 
     } 
    var myF1 = new f1(); 

Я прочитал на предыдущих дублей и изучение доступа неизвестных имен свойств по:

for (var propertyName in myF) { 
     newName = propertyName; 
    } 

Что мне нужно сделать, это перебирать функцию (или любую функцию) и построить входные данные диапазона HTML5 для функции (имейте в виду, что имена параметров будут сильно отличаться или случайны, поэтому я предполагаю, что мне нужно зациклиться на самом ключе. Так, в случае f1/myF1 , Сгенерированный HTML5 будет:

param1: <input type="range" name="param1" min="0" max="500" steps="50" /> 
    param2: <input type="range" name="param2" min="0" max="1000" steps="100" /> 

Примечание: Значения для диапазона =, = имя, мин =, макс = и шаг = все динамически генерируется из свойств функции.

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

Кроме того, убедитесь, что каждый параметр будет иметь значения defaults, ranges и steps, поэтому мы не должны беспокоиться о том, что уровень рандомизации или вариации THAT. Спасибо SO-JS гуру!

Answer 1

Похоже, что вы предпочли бы перебрать свойства myF1.defaults, myF1.ranges или myF1.steps, а не над свойствами самого myF1 (потому что они фиксированы).

Я не знаю, что вы пробовали, но это, как вы могли бы создать DOM элементы, которые вы хотите:

var myF1 = new f1(); 
var elements = []; 

for (var param in myF1.ranges) { 
    var input = document.createElement('input'); 
    input.type = 'range'; 
    input.name = param; 
    input.min = myF1.ranges[param].min; 
    input.max = myF1.ranges[param].max; 
    input.step = myF1.steps[param]; 
    input.value = myF1.defaults[param]; 

    var span = document.createElement('span'); 
    span.appendChild(document.createTextNode(param + ': ')); 
    span.appendChild(input); 
    elements.push(span); 
} 

Просто итерацию по свойствам ranges и доступ к тому же свойству steps и defaults , Затем вы можете делать все, что хотите, с elements. DEMO

Answer 2

Прежде всего, в вашем примере есть две ошибки.

1. открывающий кронштейн function f1(args) { не закрыт.
2. точки с запятой последней записи в this.defaults и this.steps не должны быть там.

Следующий код (опираясь на jQuery$) создать две рабочие правильно входные элементы диапазона типа, хотя код сильно зависит от заданного формата данных. Один элемент ввода получает значение путем зацикливания myF1.steps свойств, и каждое имя проверено на defaults и ranges. Вспомогательная функция applyAttr безопасно обращается к значениям с помощью другого свойстваName или прямого значения.

Работа plunker

$(document).ready(function() { 

    function f1(args) { 
    this.defaults = { 
     param1 : 100, 
     param2 : 900 
    } 
    this.ranges = { 
     param1 : { min : 0, max : 500 }, 
     param2 : { min : 0, max : 1000 } 
    } 
    this.steps = { 
     param1 : 50, 
     param2 : 100 
    } 
    } 
    var myF1 = new f1(); 

    function applyAttr(inElem, data, propName) { 
    if(data.hasOwnProperty(propName)) 
     inElem.prop(propName, data[propName]); 
    else { 
     inElem.prop(propName, data); 
    } 
    } 

    for(var stepsProp in myF1.steps) { 
    var inputElem = $('<input type="range"/>'); 
    inputElem.prop('step', myF1.steps[stepsProp]); 
    if(myF1.defaults.hasOwnProperty(stepsProp)) { 
     inputElem.prop('value', myF1.defaults[stepsProp]); 
    } 
    if(myF1.ranges.hasOwnProperty(stepsProp)) { 
     applyAttr(inputElem, myF1.ranges[stepsProp], 'min'); 
     applyAttr(inputElem, myF1.ranges[stepsProp], 'max'); 
    } 
    $('body').append(inputElem); 
    } 
});