Легкий Javascript-фреймворк
-
22-08-2019 - |
Вопрос
Я пытаюсь создать небольшую «фреймворк» Javascript, который я могу использовать в своих сценариях Greisemonkey.мне нужно только очень базовые функции, поэтому я предпочитаю не использовать 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'
});
Решение
Напишите свои методы для работы с набор узлов, возвращенных из $
.Таким образом оба $('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
был первым, кто сделал/популяризировал.
Другие советы
Подобно тому, как вы подозревали, что возврат $ в этом случае представляет собой массив элементов, вам необходимо расширить массив с помощью setStyle или добавить расширение, когда массив заполнен, прежде чем передать массив обратно.Тогда вы не должны получить сообщение о том, что .setStyle не является функцией.Однако вам также придется убедиться, что вы обрабатываете привязку контекста объекта, когда вы выполняете такую цепочку, в противном случае this
относится к текущей области, а не к элементу вашего массива.
Функция $ возвращает массив;он должен либо возвращать сам объект элемента (d), для которого вы дополняете метод setStyle, либо просто другой объект.
Если хочешь, можешь воспользоваться моей библиотекой.
Он называется Ally, и вы можете скачать его здесь: http://github.com/AllyToolkit/Ally
Я заметил, что вы сказали, что хотите что-то легкое, а стандартная версия Ally в настоящее время содержит чуть более 1300 строк, 25 КБ без минимизации, и вы можете легко вырезать ненужные части.
Я написал его с намерением сделать его простым в изменении, но при этом очень мощным и полным полезных функций.
Сегодня вечером я выпущу вторую бета-версию.Он должен находиться в ветке релиза ( http://github.com/AllyToolkit/Ally/tree/release ) в течение следующего часа.
Если вы решите попробовать, надеюсь, вам понравится.:)