使用普通的javascript或coffeescript模仿jQuery插件

Question

不使用jQuery,我想知道如何模仿jQuery插件

例如,也许$('div.x').plugin()将一个onclick附加到div,并递增并显示内部值.

jQuery在哪里实际存储了内部变量的对象？

是否在某处显式创建了一个对象并与每个节点相关联？

我迷失了,试图向自己解释为什么在主应用程序列表中没有明确的对象创建....必须以某种方式在插件中发生？

(PS:我不太关心查询引擎方面......只是插件方:)

谢谢

Answer 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函数内部调用,则会得到无限循环(这将解决错误).