js-фреймворк, связывающий css классы и dom элементы

[Danxil]

В общем дали такое тестовое задание - "Простой js-фреймворк, связывающий css классы и dom элементы
(приминение css стилей к dom элементам). Итоговая функциональность и
интерфейсы на усмотрение".

Не могу понять чего они хотят - CSS-классы с dom-элементами связываются с помощью атрибутув, которые прекрасно устанавливаются стандартными методами JS, без фреймворков. То же самое и с применением стилей к dom-элементам. У кого какие мысли ?

[melky]

мне кажется, что тебя просят написать несколько абстракций для работы с css классами и dom элементами

но... блина, это же 3 функции, ёмаё

но так как сказано фреймворк, то эти 3 функции должны навязать свой стиль - например, как chain calls у jQuery или ООП у Mootools

[Maxmaxmaximus7]

я не буду говорить про ui и angular

[Maxmaxmaximus7]

Danxil, короче дам наводку, сделай что-то типа

<div controller='Ctrl' class='open_{isOpen}'></div>


<script>
function Ctrl() {
    this.isOpen = false
}
</script>

сделай короче что-то типа того, что мыл короче в атрибуте controller ты пишешь имя функции контроллера, а в атрибуте class ты можешь в {таких} тегах писать разные javascript выражения , которые выполняются with(инстанс_контроллера), и они туда будут подставляться, а при изменении перерисовываться.

В данном случае у тебя class должен будет стать "open_false" так как значение false при привращении в строку превратится в строку "false" и подставится на место {тега}. Например напишешь
class='my_class_{2+4}' у тебя в класс положется class='my_class_6'

Пнятна задумка?

[nerv_]

короче дам наводку

на пиво тоже дай

[Maxmaxmaximus7]

Ну еще можешь вот так вот сделать, скорее всего он это и имел ввиду

function JQ( selector ) {

    if (typeof selector === 'function') {
        addEventListener( 'DOMContentLoaded', selector );
        return;
    }


    if (!(this instanceof JQ)) {
        return new JQ( selector )
    }

    this.length = 0;

    try {

        var elements = document.querySelectorAll( selector );
        var elementsArr = elements ? Array.prototype.slice.call( elements ) : [];

        Array.prototype.push.apply( this, elementsArr );

    } catch (e) {

    }

}


JQ.prototype.each = function( handler ) {

    for (var i = 0; i < this.length; i++) {
        var element = this[i];
        var returns = handler.call( element, i );

        if (returns === false) {
            break;
        }
    }

    return this;
};



JQ.prototype.css = function( props ) {

    if (arguments.length === 2) {
        var prop = props;
        var value = arguments[1];
        props = {};
        props[prop] = value;
    }

    return this.each( function() {

        var style = this.style;
        for (var prop in props) if (props.hasOwnProperty( prop )) {
            var value = props[prop];
            style[prop] = value;
        }

    } );
};




// onload
JQ( function() {

    JQ( 'div' ).css( 'backgroundColor', 'red' );

} );

на короче, кусок jquery типа, скажешь сам сделал

[Danxil]

Maxmaxmaximus7 Понятно что ты имеешь введу, но как по мне, это скорее связь css-классов с js-переменными, а не "связь css классов и dom элементов".

На просьбу уточнить функционал ответили так "Вы знакомы с jQuery, нужен небольшой фреймворк такого плана".

Хз, может типа такого им отослать ...

function addClass(element, className)
	{
		if (!element || !className)
			return;
		
		var index, elementClassNames = [];

		if (element.className)
			elementClassNames = element.className.split(' ');

		if ((index = getElementIndex(elementClassNames, className)) == -1)
		{
			elementClassNames.push(className);
			element.className = elementClassNames.join(' ');
		}
	}

[DjDiablo]

Тебе максимуc показал фреймворк плана jQuery.

[Maxmaxmaximus7]

а где лайки мои?

[DjDiablo]

а где лайки мои?

лови