VPF::Мне дали тестовое задание написать фреймворк

Mastodont

Дата 3.10.2012, 09:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 347
Регистрация: 18.3.2007

Репутация: нет
Всего: 1

Будущий работодатель дал мне тестовое задание - написать небольшой js-фреймворк работы с css классами dom элементов. Срок две недели на это и еще одно задание. Знакомые яваскриптеры мне сказали, что фреймворк за такой срок не напишешь. У кого другие мнения? )

Я так понял, что этот фреймворк должен просто содержать в себе функции для изменения, к примеру, цвета, размера и шрифта текста, или фона странички. Правильно?

JAYBE

Дата 3.10.2012, 15:22 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 220
Регистрация: 27.3.2008

Репутация: нет
Всего: 0

Код


(function(window, undefined) {

if(document.getElementsByClassName) {
    getElementsByClassName = function(classList, node) {   
        return (node || document).getElementsByClassName(classList)
    }
} else {
    document.getElementsByClassName = function(classList, node) {
        var node = node || document,
            list = node.getElementsByTagName('*'),
            length = list.length,
            classArray = classList.split(/\s+/),
            classes = classArray.length,
            result = [], i,j;
        for(i = 0; i < length; i++) {
            for(j = 0; j < classes; j++)  {
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i]);
                    break;
                }
            }
        }
        return result;
    }
}

Node.fn = Node.prototype;
Node.fn.addClass = function(classname){
    var re = new RegExp("(^|\\s)" + classname + "(\\s|$)", "g"), self = this;
    if(!self.getAttribute("class")) self.className="";
    if (re.test(self.className)) return
        self.className = (self.className + " " + classname).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
    return self;
}
Node.fn.removeClass = function(classname){
    var re = new RegExp("(^|\\s)" + classname + "(\\s|$)", "g"), self = this;
    self.className = self.className.replace(re, "$1").replace(/\s+/g, " ").replace(/(^ | $)/g, "");
    if (!self.className) 
        return ( self.removeAttribute("class") )
    else return self
}
Node.fn.toggleClass = function(class1, class2) {
    var self = this,
        re1 = new RegExp("(^|\\s)" + class1 + "(\\s|$)", "g");
    self.className = self.className.replace(re1, class2).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
    return self;
}

NodeList.fn = HTMLCollection.prototype || NodeList.prototype

var selfArray = ["addClass", "removeClass", "toggleClass"],
    length = selfArray.length;
while(length--) {
    var a = selfArray[length];
    NodeList.fn[a] = (function(a) {
        var Name=a;return function(classname) {
            var array = this,
                length = array.length,
                nodeList = document.createDocumentFragment();
            while(length--) {    
                //nodeList.appendChild( array[length][Name](classname) );
                array[length][Name](classname);
            }
            return array;
        }
    })(a)
}
})(window)

Он точно не подходит для IE и оказалось полезным вот это: Прототипы для Node на IE

Это сообщение отредактировал(а) JAYBE - 7.10.2012, 21:30

ksnk

Дата 3.10.2012, 16:30 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(Mastodont @ 3.10.2012, 09:50

)

написать небольшой js-фреймворк работы с css классами dom элементов

Какой забавный набор слов smile

Вероятнее всего имелось ввиду - написать "библиотеку функций" работы с атрибутами элементов, в том числе и с классами.

Фреймворк, как правило, включает в себя довольно много пользы, которую за пару недель не написать, а небольшую библиотечку - вполне.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »