Пользовательские облегченные библиотеки JavaScript: EnderJS и MicroJS

Question

Я работаю над настраиваемой облегченной библиотекой JavaScript, которая должна стабильно работать в основных браузерах, а также на многочисленных независимых сайтах без ущерба для существующих библиотек или пространств имен.Возможно, самое главное, библиотека должна быть легкой (максимум 15 Кб).

ОБНОВЛЕНИЕ Чтобы прояснить необходимость в такой маленькой библиотеке: это сторонняя служба, которую сайты будут размещать на своей странице.Нам нужно сделать все максимально легким, быстрым и автономным, насколько это возможно, поскольку мы не можем контролировать существующие библиотеки, скорость или загрузку страниц.15k - это целевое число только для библиотеки, к которой обращается динамический контент службы.

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

Желаемые функции:

• Обрабатывать кросс-браузерные несоответствия, как чемпион (IE 6+, Chrome, FF 2+, Safari 3+),
• Обработка событий (организация очередей / привязка / трансляция)
• Эффективный механизм выбора
• Цепочка
• Управление DOM с основными анимациями
• ЛегкоВозможность сборки и версии из модулей

Я встречал EnderJS и MicroJS , но я не могу найти много дискуссийлибо на.На данный момент я более знаком и заинтересован в Ender, поскольку он, кажется, рассматривает все вышеперечисленные функции практически из коробки с "The Jeesh" весом в 7.5k.Добавление нескольких дополнительных пакетов в моем случае увеличивает его до 10 тыс., Что было бы идеально, поскольку мне нужно всего лишь несколько килобайт для уточнения любых пользовательских модулей.Это также позволило бы мне писать и создавать версии отдельных модулей, которые можно включать и сжимать в основную библиотеку во время сборки, а также определять уникальное пространство имен, чтобы хранить все вместе и, надеюсь, защитить его.Еще одна неотразимая часть библиотеки Ender - это использование NodeJS , с которым я бы все равно хотел поиграть.Однако, сказав все это, я все еще широко открыт для других идей.

Так что мой вопрос:

Кто-нибудь имеет опыт работы с EnderJS или MicroJS , или есть другое решение / подход к тому, чего я пытаюсь достичь?Я понимаю, что это не место для "болтливых, открытых вопросов" , и это не мое намерение здесь.Я просто ищу предложения о том, как лучше всего создать легковесную пользовательскую библиотеку, не изобретая велосипед, и вместо этого подключить к ней самые современные доступные микробиблиотеки.

Answer 1

Я один из со-создателей Эндера, и я буду +1 к словам Фазала.

Заметка о Боже, хотя и хороший стартовый набор для Эндера, истинная сила заключается вспособность расширять Ender с его растущим набором модулей.Вы можете проверить их здесь: https://github.com/ender-js/Ender/wiki/Ender-package-list

Так или иначе, Эндер так или иначе стал передовым в развитии "микробиблиотеки", но на самом деле мы стремимся к созданию связного интерфейса для слабосвязанных модулей (какими бы большими или маленькими они ни были).jQuery сделал отличный первый шаг в абстрагировании своего механизма выбора (Sizzle), но, к сожалению, остальная его часть взаимозависима (dom, события, анимация, ajax, utils, обещания), что делает невозможным выбор и извлечение того, что вы хотите.1006 *

С другой стороны, одна из замечательных особенностей Ender - возможность публиковать модули в NPM и переносить их в ваш проект by name, что позволяет вам build only what you need, when you need it

Это стоитпосмотрите обучающие видео по http://enderjs.com/learn, которые дадут вам лучшее представление о том, как пакеты создаются, собираются и используются.Вы обнаружите, что настройка Ender в вашей среде чрезвычайно проста, и работать с ней довольно интересно.

Дайте нам знать (@ded или @fat), если у вас есть какие-либо вопросы, и мы будем болееготов помочь разобраться

Answer 2

Я недавно использовал Ender, и у меня действительно не было проблем с ним.Есть пара функций jQuery, которые недоступны в оффлайне, но любой, кто достаточно хорошо разбирается в JavaScript, может обойти это.Особенно учитывая тот факт, что Ender имеет почти идентичную структуру и способ расширения как jQuery.

Я использовал Ender на живом сайте недавно и, как ни странно, я использовал несколько скриптов с microjs.com вместе с моимсобственный файл функций, и весь JavaScript весил около 15 тыс.Нетрудно заставить весь ваш код сайта весить примерно столько же или меньше.

Помимо создания облегченной версии Ender, например, начиная с Jeesh, вы также можете рассмотреть асинхронную загрузку, например:предоставлено Dustin Diaz :

<script src="ender.min.js"></script>

<script>
$.require('/js/core.min.js', 'core')

$.ready('core', function () {
  $(document).ready(function () {
    $('<p>hello world</p>').appendTo('body')
      .bind('click', function (e) {
        $.require('/js/ajax.min.js', function () {
          $(e.target).css('position', 'relative')
            .animate({
              left: 500
            })
        })
      })
  })
})
</script>

Таким образом вы можете существенно уменьшить исходную сборку ender и отложить часть загрузки, но, вообще говоря, если она светлая вВо-первых, с вами должно быть все в порядке.

Возможно, вы также захотите воспользоваться компилятором закрытия Google, к которому Ender предоставляет вам доступ, для компиляции кода вашего сайта вместе с ender.

Наконец, каквы, вероятно, хорошо знаете, что вы также можете использовать noConflict в Ender, на случай, если у них уже есть другая библиотека.

Когда вы строите и настраиваете Ender, вы, вероятно, захотите воспользоваться ender-wallet , который даст вам своего рода представление API, позволяя вам удалять библиотеки, которые вам могут вообще не понадобиться.

скриншот с горячей ссылкой:

Answer 3

Учитывая это:

Чтобы прояснить необходимость в такой маленькой библиотеке: это сторонний сервис, который сайты будут размещать на своих страницах. Нам нужно сделать все максимально легким, быстрым и автономным, насколько это возможно, так как мы не можем контролировать существующие библиотеки, скорость или загрузку страниц. 15k - это номер цели только для библиотеки, к которой обращается динамический контент службы.

Я бы порекомендовал использовать загруженный по требованию jQuery через один из CDN (Google или Microsoft; я думаю, что Google используется больше, но вы хотите проверить). Ваш код может определить, загружен ли уже jQuery, и использовать его, если так (~ 0k), и, если нет, динамически добавить элемент script, который извлекает его из CDN. Если пользователь посетил какой-либо другой сайт с использованием jQuery из этого CDN, сценарий вполне может прийти из кеша (~ 0k). Если нет, то вы получите удар ~ 31k, а не ~ 15k, но, опять же, довольно часто у вас не будет никакого удара или просто ответа "не модифицированного" ответа из CDN.

Вы хотели бы сделать вызов noConflict, если вы загрузили его, в случае, если сайт использует $ для чего-то отличного от jQuery. Это легко сделать, наблюдая за событием load в элементе script (вы должны использовать readystatechange в IE и следите за статусом loaded или complete), а затем делать это, когда это произойдет.

В современном мире телекоммуникаций разница между загрузкой 15 КБ и загрузкой 31 КБ составляет тривиально по сравнению со стоимостью установки HTTP-соединения в первую очередь.

Эта нагрузка по требованию на самом деле является крошечным кусочком кода, а именно:

function loadJQuery(cb) {
    var d, s, t;

    if (typeof jQuery === "function"
        && parseFloat(jQuery.fn.jquery) >= 1.5) { /* Or whatever */
        window.ourjQuery = jQuery;
        if (cb) {
            cb();
        }
        return;
    }

    d = document;
    s = d.createElement('script');
    t = d.body || d.getElementsByTagName('head')[0] || d.documentElement;

    s.onload = loaded;
    s.onreadystatechange = handleReadyStateChange;
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
    t.appendChild(s);

    function loaded() {
        if (s) {
            s = undefined;
            window.ourjQuery = jQuery.noConflict(true);
            if (cb) {
                cb();
            }
        }
    }

    function handleReadyStateChange() {
        if (s && (s.readyState === "loaded" || s.readyState === "complete")) {
            loaded();
        }
    }
}    

Обратите внимание на URL-адрес элемента script. Так что он удобен для страниц http и https ( детали ). Также обратите внимание, что я проверяю минимальную версию jQuery и использую более строгую форму noConflict, если мы ее загрузим. В любом случае, к моменту вызова обратного вызова символ ourjQuery относится к загруженной копии с минимальной версией.

---

Обновление : адрес вашего комментария выше:

Это хорошая идея, но, к сожалению, для нас это не вариант. Я согласен с тем, что jQuery из CDN от Google, скорее всего, будет кэширован - это экономит нагрузку - и что мы можем проверять и расширять его по мере необходимости, но он не выглядит настолько масштабируемым или стабильным, как обслуживающий его сам. Сайт может решить перезаписать некоторый модуль jQuery, чтобы удовлетворить их потребности или хуже. Нам нужна легкая автономная библиотека, которую мы полностью контролируем и можем при необходимости расширять и ветвить. Цель состоит в том, чтобы эта библиотека была кэширована и версирована из нашего CDN.

Да, существует небольшой риск того, что сайт изменит базовую функциональность jQuery. A очень небольшой риск. Если вы ограничиваете себя основным API (не плагинами и прочим), я, честно говоря, не думаю, что стоит беспокоиться об этом.

Но если вы беспокоитесь об этом, то, честно говоря, я бы просто использовал слегка модифицированный jQuery, размещенный на вашем собственном CDN, с использованием символа, отличного от jQuery (и вообще без использования $). 31 тыс. Против 15 тыс. В современном мире телекоммуникаций - не проблема; Первоначальная стоимость будет заключаться в установлении связи в первую очередь. Если вы захотите, вы, вероятно, можете немного сократить это, удалив ненужные части, хотя, к сожалению, внутренняя часть jQuery - это немного сложнее, и выборочное удаление функциональности может быть не тривиальным (в зависимости от того, какая это функциональность).