Учебник по прототипированию JavaScript [закрыто]


У меня есть JS-скрипт с кучей функций, по большому счету это:

function id(i) {
    if(document.getElementById)
        return document.getElementById(i);
    return;
}

Это просто экономит мне много байт при вводе документа.getElementById () каждый раз. Моя проблема заключается в том, что я часто добавляю и удаляю классы и другие атрибуты из элементов. Я хочу быть в состоянии сделать это:

id('main').addClass("someClass");

Кто-нибудь знает хорошие учебники по прототипированию Javascript, которые могут это объяснить? Спасибо.

4 2

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 решает эту проблему - стоит повторить, что лучше использовать фреймворк, где это возможно!