Учебник по прототипированию JavaScript [закрыто]
У меня есть JS-скрипт с кучей функций, по большому счету это:
function id(i) {
if(document.getElementById)
return document.getElementById(i);
return;
}
Это просто экономит мне много байт при вводе документа.getElementById () каждый раз. Моя проблема заключается в том, что я часто добавляю и удаляю классы и другие атрибуты из элементов. Я хочу быть в состоянии сделать это:
id('main').addClass("someClass");
Кто-нибудь знает хорошие учебники по прототипированию Javascript, которые могут это объяснить? Спасибо.
4 ответа:
Метод, который вы ищете, - это метод цепочки. в принципе, функция " id "должна возвращать экземпляр объекта, который имеет метод" addClass " на нем. и этот метод "вернет это".
Вот учебник, который объясняет эту концепцию:
http://javascriptant.com/articles/32/chaining-your-javascript-methodsЯ также настоятельно рекомендую эту книгу, чтобы узнать больше методов, таких как этот (да, цепочка рассматривается) :-)
http://jsdesignpatterns.com/
Я должен спросить: вы рассматривали возможность просто использовать что-то вроде jQuery? Если вы это сделали, проблема просто становится:
$("#main").addClass("someClass");
И вы закончили. Если цель состоит в том, чтобы реализовать это самостоятельно (если да, то почему?) тогда вам просто нужно знать, что если элемент имеет 3 класса, фактический атрибут просто:
"one two three"
Другой аспект, конечно, это написание метода расширения.
Вы не можете достичь этого для всех браузеров, в частности, невозможно расширить методы, доступные для элемента в IE6 или 7.
Честно говоря, вы сэкономите себе кучу времени, если просто включите JQuery в свою разработку.
Лучше всего идти с рамками, если вы можете, как говорит Клетус.
Однако AnthonyWJones не совсем прав - невозможно расширить методы, доступные для объекта generic Element, но вы можете по-прежнему добавлять его к отдельным элементам.
Ваша функция id может расширить возвращаемые элементы с помощью метода addClass:
function get(id){ el = document.getElementById(id); el.addClass = function(cls){ // your addClass code here // (remember IE uses className, others use class) }; return el; }
Вы даже можете добавить его в объект Element (который автоматически добавляет его ко всем элементам на странице) для браузеров, поддерживающих это функция, а затем только добавить метод в функции id для IE - это позволит сэкономить память и немного ускорить приложение, особенно когда вы начинаете добавлять много методов элемента.
Именно таким образом MooTools решает эту проблему - стоит повторить, что лучше использовать фреймворк, где это возможно!