Light Javascript Framework

Question

Я пытаюсь создать небольшую Javascript-структуру, которую я могу использовать в своих скриптах greasemonkey. Мне нужны только очень базовые функции, поэтому я решил не использовать mooTools или DOMAssistant. Кроме того, я не собираюсь быть глупым и помещать DOMAssitant в скрипт Greasemonkey размером 20 КБ! Я просто хочу небольшой аккуратный фрагмент кода.

У меня небольшая проблема с кодом ниже. Я думаю, потому что я возвращаю массив в $ (), поэтому я получаю .setStyle не является сообщением об ошибке функции.

var fmini = {  
  $ : function(a) {
    var i=0,obj,d;
    var e = [];

    while (obj = arguments[i++]) {
      d = document.getElementById(obj);
      d.setStyle = fmini.setStyle;
      d.each = fmini.each;
      e.push(d);
    }

    return e;
  },
  setStyle : function(style, value) {
    if (typeof this.style.cssText !== 'undefined') {
      var styleToSet = this.style.cssText;
      if (typeof style === 'object') {
        for (var i in style) 
          if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];
      }
      else styleToSet += ';' + style + ':' + value;
      this.style.cssText = styleToSet;
    }
    return this;
  },
  each : function (functionCall) {
                for (var i=0, il=this.length; i < il; i++) 
                    functionCall.call(this[i]);
                return this;
    },
}
window.$ = fmini.$;

Я бы хотел, чтобы это работало, когда я делаю

  $('bob','amy').setStyle({
    'border' : '5px solid #ff0000',
    'background-color' : '#ccc'
    });

Answer 1

Напишите ваши методы для работы с множеством узлов, возвращаемых с $. Таким образом, $('bob').setStyle() и $('bob', 'amy').setStyle() будут работать. Я вижу, у вас есть общий forEach или each метод, который является хорошим началом.

var fmini = {
    $: function() {
        var i=0, obj;
        var e = [];
        e.setStyle = fmini.setStyle;
        e.each = fmini.each;

        while (obj = arguments[i++]) {
            e.push(document.getElementById(obj));
        }

        return e;
    },

    setStyle : function(style, value) {
        return this.each(function() {
            if (typeof this.style.cssText !== 'undefined') {
                var styleToSet = this.style.cssText;
                if (typeof style === 'object') {
                    for (var i in style) 
                        if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];
                }
                else styleToSet += ';' + style + ':' + value;
                this.style.cssText = styleToSet;
            }
        })
    }
}

Кстати, это то, что jQuery первым сделал / популяризировал.

Answer 2

Функция $ возвращает массив; он должен либо возвращать сам объект элемента (d), для которого вы увеличиваете метод setStyle, либо просто другой объект.

Answer 3

Как вы и подозревали, возвращаемое значение $ в этом случае представляет собой массив элементов, вы должны расширить массив с помощью setStyle или добавить расширение, когда массив заполняется, прежде чем передать его обратно. Тогда вы не должны получить сообщение о том, что .setStyle не является функцией. Однако вам также необходимо убедиться, что вы обрабатываете привязку контекста объекта, когда вы создаете цепочку, в противном случае this ссылается на текущую область, а не на элемент в вашем массиве.

Answer 4

Если хочешь, можешь использовать мою библиотеку.

Он называется Ally, и вы можете скачать его здесь: http://github.com/AllyToolkit/Ally

Я заметил, что вы сказали, что хотите что-то более легкое, и стандартная версия Ally в настоящее время составляет чуть более 1300 строк, 25KB не минимизирована, и вы можете легко вырезать ненужные части.

Я написал его с намерением, чтобы его было очень легко изменить, но при этом он был очень мощным и полным полезных функций.

Я выпускаю 2-ю бета-версию скоро вечером. Это должно быть в ветке релиза (http://github.com/AllyToolkit/Ally/tree/release) в течение следующего часа.

Если вы решите попробовать это, надеюсь, вам понравится. :)