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

StackOverflow https://stackoverflow.com/questions/1351527

Вопрос

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

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

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

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

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

Это было полезно?

Решение

техника, которую вы ищете, — это цепочка методов.по сути, функция «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 не совсем прав: невозможно расширить методы, доступные в универсальном объекте 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 — это сэкономит память и ускорит работу приложения. немного, особенно когда вы начинаете добавлять много методов Element.

Именно такое поведение MooTools решает эту проблему — стоит повторить, что лучше использовать фреймворк там, где это возможно!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top