Ходо

Моя личная библиотека javascript

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

В настоящее время jQuery используется 73,8% всех веб-сайтов, то есть доля рынка библиотек JavaScript составляет 97,4%. К 2013 году процент не сильно отличался, и бета-версия jQuery 2.0 находилась в стадии тестирования. Вы можете прочитать о статусе jQuery в этом году по этой ссылке: https://blog.jquery.com/2013/01/14/the-state-of-jquery-2013/

После тестирования некоторых библиотек javascript я решил написать свою собственную маленькую библиотеку javascript для работы с Sizzle Js, которая также принадлежит jQuery. В то время Sizzle работал над предварительной версией v1.10.6, и я разработал свою библиотеку для работы с этой версией Sizzle.

jQuery очень помог мне понять, как работает стандартизация ECMA, а также изоморфный JavaScript, который в то время рассматривался Airbnb Engineering как будущее веб-приложений. Поэтому я начал разрабатывать Xodo, мою личную библиотеку javascript, которая использовалась в проекте, над которым я работал в то время.

Это краткий список функций, которые были реализованы. Вы можете использовать Xodo в качестве примера или ученичества, или, если хотите, вы также можете использовать его в каком-то личном проекте, но под свою ответственность, поскольку я восстановил библиотеку из своей резервной копии и не вносил изменений или улучшений.

Методы

Методы элемента

width()
height()
remove()

Методы стиля

hasClass()
addClass()
removeClass()
css()
style()

Методы манипулирования DOM

html()
append()
prepend()

Обработчик событий

onload()
ready()
bindEvent()
unbindEvent()
resize()

Пример использования

xdo(window).onload(function () {
    //Css
    xdo('#someElement').css({
        background: '#f5f5f5',
        padding: '5px'
    });
    // Click
    xdo('#someElement').bindEvent("click", function () {
        xdo('#someElement').css({
            background: '#ff00ff'
        });
    });
    // xdoMatrix
    new xdoMatrix(
        elem,                   // accept just document.getElementBy('someid')
        [[300, 150, 'width']],  // from 300 to 150 - width
        650,                    // duration
        'ease',                 // 'ease' default
        function(){}            // callback
    );
});