Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Мне дали тестовое задание написать фреймворк


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

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

Автор: JAYBE 3.10.2012, 15:22
Код

(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 и оказалось полезным вот это: http://forum.vingrad.ru/forum/topic-239562/unread-1.html

Автор: ksnk 3.10.2012, 16:30
Цитата(Mastodont @  3.10.2012,  09:50 Найти цитируемый пост)
 написать небольшой js-фреймворк работы с css классами dom элементов

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

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

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)