Создание виджета javascript для других сайтов

Ответ 1

Я бы постарался:

• Сделать его настраиваемым

  • Загрузить внешние таблицы стилей?
  • Где мне найти ресурсы, которые мне нужны? (изображения, таблицы стилей)
  • Какой макет/размер должен иметь?

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

• Предоставить мастер для создания фрагмента кода для включения на страницу
  • Обеспечивает, чтобы даже умеренно технические пользователи могли использовать ваш виджет
• Сделайте его легким.
  • Служить всем миниатюрам и сжатым
  • Служите с кеш-заголовками, электронными тегами, последними изменениями и всеми полезными заголовками, о которых вы можете думать. Это уменьшит нагрузку на ваши серверы, а также сделает ваш виджет более отзывчивым.
  • Попробуйте избежать зависимостей от библиотек или проверьте, загружены ли они на страницу, где виджет используется до их загрузки.
• Остерегайтесь конфликтов
  • Прототип использует $, а также jQuery. Если ваш виджет зависит от Prototype, а на странице, на которой он размещен, используется jQuery без noConflict-mode, проблемы возникнут
  • Не сжимайте глобальное пространство имен!
    • Если вы не хотите, чтобы кто-либо взаимодействовал с вашим виджетами, поместите его в самостоятельную исполняемую функцию в закрытии и вообще не создавайте глобальных переменных
    • Если вы хотите, чтобы пользователи могли взаимодействовать с вашим виджетами, скажем, для добавления прослушивателей событий и т.д., требуйте одну глобальную переменную, скажем, ExampleComWidget как литерал объекта и поместите туда свои методы. Пользователь может тогда взаимодействовать, как: ExampleComWidget.addListener('update', callback);

• Использовать умную разметку

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

    т.е. если ваше название компании example.com, вы можете использовать такие классы, как: com-ex-widget-newsItem

  • Подтвердите свою разметку! Вы не хотите разорвать пользовательский сайт.
  • Семантическая разметка в порядке, но вы можете избежать <h1> -tags, так как у них особенно высокий рейтинг в SEO. Вероятно, вы могли бы использовать <h4> и меньше. Эта пуля может быть немного отключена. Если у вас есть сомнения, гораздо лучше использовать семантическую разметку, чем нет.
• Получить данные с вашего сайта, вставив script элементы
  • Это надежный способ убедиться, что вы обходились с ограничениями одного и того же происхождения.
  • Прикрепите onload-listener к элементу script, чтобы узнать, когда данные готовы, или используйте jsonp

Ответ 2

Я думаю, что это отличная запись о том, как реализовать встроенный script. http://alexmarandon.com/articles/web_widget_jquery/

Ответ 3

Ваш script не должен мешать остальной части страницы.

• Сохранять количество глобальных минимум (один объект пространства имен должно быть достаточно)
• Не добавлять свойства встроенного объекты без причины
• Не ожидайте быть единственным script которые прослушивают такие события, как window.onload
• Если вы используете for.in петли, имейте в виду что другие скрипты могут быть добавлены материал в Array.prototype
• Учитывайте листы стилей. Стиль HTML по умолчанию, возможно, был изменен.
• Не обновляйте свой script без причины, поскольку вы рискуете сломать множество сайтов.

Ответ 4

То, что сказал ПатрикАкерстранд, совершенно верно на 100%.

Здесь я хочу добавить среду разработки в vanilla JS, которая может сэкономить вам много времени и усилий для ее реализации, поскольку все продумано, отточено и протестировано. Осталось только определить свои собственные виджеты и использовать их.

Вот пример того, как это выглядит.

// inside a js file of a widget class
(function () {
    var Module_Path = ["WidgetsLib", "a1", "Button"];
    var curr = this;
    Module_Path.forEach(function(i){if (curr[i] == null) {addChildToTree(curr, i, {})} curr = curr[i]});

    specialize_with(curr, {
        CSS_Literal: '
            .{{WIDGET_CLASS_ID}}_Something {
                color: hsl(0, 0%, 20%);
            }
        ',
        HTML_Literal: '
            <div onclick="{{WIDGET_INSTANCE}}.onclick(event)"
                class="{{WIDGET_CLASS_ID}}_Something"
            >
            SOME SUPER COOL WIDGET
            </div>
        ',
        new: typical_widget_new,
    });
})();

<div id="w1" style="background-color: hsl(200, 50%, 50%);"></div>

<script src="WidgetsLib/a1/Button/js"></script>

var b1 = WidgetsLib.a1.Button.new("w1", {
    onclick: function(ev) {
        ev.target.style.color = "#ffff00";
        console.log("====== HERE");
    }
});

Пожалуйста, загрузите и откройте Widget_v2.md.html в браузере, это https://github.com/latitov/JS_HTML_Widgets.

Что вы получите:

• очень интересная статья об этом;
• фрагменты кода и примеры;
• готовый к использованию... фреймворк в vanilla JS для создания собственных виджетов;

И наслаждайтесь созданием многократно используемых виджетов произвольной сложности, легко!