Инкапсулируйте JavaScript для встроенного виджета

У меня есть файл javascript, который пользователи могут вставлять на свой сайт. Он использует coffeescript и конвейер ресурсов Rails для компиляции группы файлов в один.

# The following dependencies will be compiled into test.js (rails asset pipeline manifest file)
#
#= require jquery
#= require jquery.cookie

jQuery ->
  $.cookie('foo', 'bar')
  console.log $.cookie('foo')

Это работает, как и ожидалось, с примером страницы:

<!DOCTYPE html>
  <head></head>
  <body>
    <script src="http://localhost:3000/assets/test.js" type="text/javascript"></script>
  </body>
</html>

Но этот скрипт является виджетом, поэтому его нужно встраивать на любом сайте. Если пользователь добавляет свой собственный jquery под ним, то все ломается:

<!DOCTYPE html>
  <head></head>
  <body>
    <script src="http://localhost:3000/assets/test.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  </body>
</html>

Это дает ошибку Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'cookie'

Каков наилучший способ обернуть все в test.js, так что самодостаточен? Я думал, что coffeescript, упаковывающий все в анонимную функцию, может помочь здесь, но я думаю, что нет.

Спасибо!

Источник

1 ответ

Решение

В этом руководстве приведены некоторые подсказки: http://alexmarandon.com/articles/web_widget_jquery/

Похоже, мне, возможно, придется включить минимизированный исходный код для плагинов (например, jquery.cookie) в анонимную функцию. Конвейер ресурсов не позволяет вам требовать подобные операторы, если они не находятся вверху файла (в первом блоке комментариев): https://github.com/sstephenson/sprockets/issues/398

Источник
Другие вопросы по тегам