Очень лекий DOM-helper

[tsigel]

Очень много пишу под мобильные приложения. jQuery туда лучше не пихать (наше приложение само по себе безумно прожорливое и там можно много чего оптимизировать), так как каждый байт памяти и функция стека на счету

Нам не требутеся писать что-то под старые или странные браузеры, поэтому в том что я выложу нет поддержки ie < 9 и возможно чего-то ещё. То что я делаю ориентировано на нормальные современные браузеры и браузеры поднимаемые внутри мобильных платформ (webkid (если iOs, то прошивка 6.0+))

Сам хелпер должен быть очень легкий и не прожерливый, потому я сознательно не делал хранение созданных объектов! (Это могу пояснить подробнее)

К сему хелперу (до либы ему далеко но мне того и не надо) есть нормальный интерфейс под ts.

Есть ужатый вариант.

Если тема кому-то понравится - добавлю нормальных доков (не понравится добавлю только себе )

Сама либа: ссылка.

Не пинайте сильно

[tsigel]

Примеры использования очень просты и напоминают jQuery. Я сознательно не стал реализовывать бешенные селекторы из jQ (мне это не требуется), но некоторое расширение апи планируется. Код до безобразия прост и расширение апи может производиться каждым по желанию

Промер:

$("#some").css({"width": "100500px"}).hide().show().append("<trololo>").append(document.querySelector(".some"));

Список методов:
html([html]), addClass(className), hasClass(className), removeClass(className), toggleClass(className), append(string|HTMLElement|Lite),click(handler), hover(handlerEnter, handlerOut), on(event, handler), off([event], [handler]), css(string|object, [value]), attr(name, [value]), find(selector), children(), hide(), show(), remove(), offset(), parent(), width([value]), height([value])

Методы find и children возвращают коллекцию

[Octane]

var Collection = function (arr) {
    arr.forEach(function (elem) {
        this.push(elem);
    }.bind(this));
};

У forEach есть 2-й параметр.

Collection.prototype = [];

А восстановить ссылку на конструктор?

html: function (html) {
    if (html !== undefined) {
        this.node.innerHTML = html;
    } else {
        return this.node.innerHTML;
    }
    return this;
},

if (arguments.length)

alert("OMG, WTF!!");

хоть бы на console.log заменил)

var classList = this.node.className.split(" ");

classList

[nerv_]

Чем zepto не устроил?

[tsigel]

Octane,
Про конструктор забыл, спасибо!
Про второй параметр знаю, но привычка уже бинд везде пользовать,
Логи потом в более прилизанной версии, вместе с доками нормальными)
Про класслист знаю, честно говоря не пользовался (раньше надо было ие держать, а сейчас по инерции), наверно заменю раз мне ие не надо.

Спасибо за комментарии.

[tsigel]

nerv_,
Много лишнего. Этот же хелпер я частенько использую для халтуры (делаю html5 баннеры), а там ограничение по весу 35кб (с картинками, стилями и прочим). Я из хелпера то вырезаю иногда куски не то что готовые либы.

[tsigel]

Немного поизвращался со сжатием методов коллекции. Так как все что надо сделать - запустить метод для всех своих элементов я сделал некрасиво но ужато. Мне в Ts это ника не помешает, так как есть интерфейс, но что-то я засомневался в необходимсти такой экономии места. Зато ужатый весит 3кб (целиком, а не тольк этот кусочек)

/**
     * @class Collection
     * @extends Array
     * @param {Array} arr
     * @constructor
     */
    var Collection = function (arr) {
        arr.forEach(function (elem) {
            this.push(elem);
        }, this);
    };
    (function (Collection, extend, methods) {
        Collection.prototype = extend;
        Collection.prototype.constructor = Collection;
        var collectionActionsList = ["remove", "click", "change", "hover", "on", "addClass", "removeClass", "toggleClass", "show", "hide"];
        for (var methodName in methods) {
            if (methods.hasOwnProperty(methodName)) {
                Collection.prototype[methodName] = methods[methodName];
            }
        }
        collectionActionsList.forEach(function (collectionMethodName) {
            this.prototype[collectionMethodName] = function () {
                return this._do(collectionMethodName, arguments);
            }
        }, Collection);
    })(Collection, [], {
        /**
         * @return {Lite}
         */
        last: function () {
            return this[this.length - 1];
        },
        /**
         * @return {Lite}
         */
        first: function () {
            return this[0];
        },
        /**
         * @param {String} method
         * @param {Array} [args]
         * @return {Collection}
         * @private
         */
        _do: function (method, args) {
            this.forEach(function ($elem) {
                $elem[method].apply($elem, args);
            });
            return this;
        },
        /**
         * @param mapHandler
         * @return {Collection}
         */
        map: function (mapHandler) {
            return new Collection(Array.prototype.map.call(this, mapHandler));
        },
        /**
         * @param filterHandler
         * @return {Collection}
         */
        filter: function (filterHandler) {
            return new Collection(Array.prototype.filter.call(this, filterHandler));
        }
    });

[FINoM]

Обратите внимание на мою Балалайку:
Кусок статьи с хабра
Репка
Недавно одобрили мой пулл риквест в microjs, теперь Балалайка есть в тамошнем списке: http://microjs.com/#balalaika

[nerv_]

Много лишнего

Что не надо, отключи http://zeptojs.com/#modules