имитация плагинов jQuery с помощью простого javascript или coffeescript

#javascript #coffeescript

#javascript #coffeescript

Вопрос:

Без использования jQuery я хотел бы знать, как имитировать плагин jQuery

Например, может быть $(‘div.x’).plugin() присоединяет onclick к разделам, увеличивает и отображает внутреннее значение.

Где jQuery на самом деле хранит объект с внутренней переменной?

Создается ли объект где-либо явно и связан ли он с каждым узлом?

Я теряюсь, пытаясь объяснить себе, почему в главном списке приложений нет явного создания объекта …. должно как-то происходить внутри плагина?

(PS: Меня меньше беспокоит сторона механизма запросов… только со стороны плагина 🙂

Спасибо

Ответ №1:

Обычно вы определяете функцию, подобную plugin() , написав

 $.fn.plugin = ...
  

Как обсуждалось здесь, $.fn на самом деле это просто ярлык для jQuery.prototype . Когда вы присоединяете метод к прототипу конструктора, JavaScript автоматически присоединяет его ко всем экземплярам, созданным из этого конструктора с new ключевым словом, которое jQuery выполняет внутренне, когда вы пишете что-то вроде $('li') . Смотрите http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes /.

Итак, вот простой пример создания библиотеки с именем kQuery в CoffeeScript, которая позволяет вам 1) создавать именованные экземпляры и 2) добавлять плагины:

 instances = {}
kQuery = (name) ->
K = (name) ->
  return instances[name] if instances[name]
  instances[name] = new kQuery name
K.fn = kQuery.prototype
  

Вот и все! Теперь, если бы кто-нибудь написал

 K.fn.plugin = -> console.log 'foo'
K('whatev').plugin()
  

они бы увидели foo на своей консоли. Обратите внимание, что причина разделения kQuery и K функций заключается в том, что если вы вызываете new K изнутри K функции, вы получите бесконечный цикл (который приведет к ошибке).