Jump to content
  • 0

Удаление и добавление классов


Bassline
 Share

Question

Занимаюсь изучением javascript путем изобретения детских велосипедов. Решил написать функции, которые ищут, добавляют и удаляют классы у тэгов. Регулярные выражение пока не осилил, поэтому обходился циклами и массивами.

 

Подскажите, как можно оптимизировать, сократить или ускорить этот код?

 

http://jsfiddle.net/UZ3DQ/

window.onload = function(){        classRemove('добавитьКласс', 'найтиПоКлассу', 'найтиПоТэгу');    classAdd('удалитьКласс', 'найтиПоКлассу', 'найтиПоТэгу');       function classAdd(desiredClass, searchClass, searchTags) {        var pointElements = searchElements(searchClass, searchTags);        outer:        for (var i = 0; i < pointElements.length; i++) {            var classWords = pointElements[i].className.split(' ');            var classString = '';            for (var j = 0; j < classWords.length; j++) {                if (classWords[j] == '') {                    classWords.splice(j, 1);                    j--;                };            };            for (var k = 0; k < classWords.length; k++) {                if (classWords[k] == desiredClass) {                    break outer;                };            };            classWords.push(desiredClass);            classString = classWords.join(' ');            pointElements[i].className = classString;        }    }    function classRemove(desiredClass, searchClass, searchTags) {        var pointElements = searchElements(searchClass, searchTags);        for (var i = 0; i < pointElements.length; i++) {            var classWords = pointElements[i].className.split(' ');            var classString = '';            for (var j = 0; j < classWords.length; j++) {                if (classWords[j] == desiredClass || classWords[j] == '') {                    classWords.splice(j, 1);                    j--;                };            };                            classString = classWords.join(' ');            pointElements[i].className = classString;        }    }    function searchElements(desiredClass, desiredTag) {        var allTags = document.body.getElementsByTagName(desiredTag);        var rightTags = [];        var classWords = [];        for (var i = 0; i < allTags.length; i++) {            classWords = allTags[i].className.split(' ');            for (var j = 0; j < classWords.length; j++) {                 if (classWords[j] == desiredClass) {                    rightTags.push(allTags[i]);                    break;                };            };        };        return rightTags;    };}
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
classAdd

1. имя функции должно начинаться с глагола или быть глаголом (потому, что функция - это действие)

2. если функция, как заявлено в ее названии "addClass" добавляет класс, то она должна делать ТОЛЬКО это

 

Подскажите, как можно оптимизировать, сократить или ускорить этот код?

Использовать встроенное API:

element.classList.add('className');element.classList.remove('className');

http://caniuse.com/classlist

 

Если таковое не поддерживается необходимым браузером, использовать полифил

  • Like 1
Link to comment
Share on other sites

  • 0

вставлю свои пять копеек.

Вы спрашивали про ускорить: свойство length — динамическое, а значит оно будет высчитываться на каждой итерации цикла. Во избежании этого, его значение можно присваивать переменной, которая будет управлять остановкой счётчика.

Ещё у вас во вложенных циклах j выступает в роли инкремента и декремента одновременно. Возможно алгоритм работает правильно, но это не очень хорошая практика.


ЗЫ и как справедливо заметил @nerv, функции перегружены. Т.е. addClass должна принимать 2 аргумента: "кому_добавить", "какой_класс_добавить".
Это в случае если она функция. Если бы она была методом объекта, на который спроецирован  элемент из html-разметки (DomElement, например, либо их коллекция, как это часто бывает в jQuery), ей следовало принимать 1 параметр: имя класс который хотим добавить. Посмотрите в сторону объектов. С ними легче реализовать удобные и красивые интерфейсы, чем на функциях.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy