Я ищу возможности для создания функции / класса

Question

Я создал функцию «field» для установки и получения значения поля (HTML Input).

var field = {
    set: function (id, value) {
        if (typeof value === 'undefined') {
            value = '';
        }
        $('#' + id).val(value);
    }
    , get: function (id) {            
        return $('#' + id).val();
    }
}

Это позволяет my устанавливать / получать значение ввода:

field.set('myinput','hello');
var v = field.get('myinput');
alert(v);

Пока все хорошо. Сейчас я ищу способы расширить мою «функцию», чтобы установить значение или атрибут поля (или изменить другие свойства в будущем, такие как высота, цвет, видимость и т. Д.)

Синтаксис должен выглядеть следующим образом:

field.value.set('myinput','hello'); // myinput is the id of an input element
var v = field.value.get('myinput');

field.attr.set('myinput','name','value');
var v = field.attr.get('myinput','name');

Какие существуют возможности для создания такой функции / класса?

Answer 1

Объявите дополнительные атрибуты value и attr в ваших field, и каждая функция set и get возвращает соответствующий метод jQuery:

var field = {
  set: function (id, value) {
    if (typeof value === 'undefined') {
      value = '';
    }
    $('#' + id).val(value);
  }, get: function (id) {            
    return $('#' + id).val();
  },
  value: {
    set: (id, value) => {
      return $('#' + id).val(value);
    },
    get: (id) => {
      return $('#' + id).val();
    },
  },
  attr: {
    set: (id, attrib, value) => {
      return $('#' + id).attr(attrib, value);
    },
    get: (id, attrib) => {
      return $('#' + id).attr(attrib);
    },
  },
};
field.value.set('foo', 'newinput');
field.attr.set('foo', 'name', 'def');
console.log(field.attr.get('foo', 'name'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo" name="abc">