Question

我正在浏览一个简单的视差插件的源代码，并且遇到了一段看起来非常熟悉的代码，或者是一个跨很多其他插件的模式，

关注的插件是：

令人困惑的代码是：

  $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });

不知怎的，我无法接受那段代码。

在一个小小的调查中，我能够揭开第一线的神秘面纱：

 $.fn[pluginName] = function ( options ) {

以上行的作用例如是：

假设pluginName =＆＃34; killTheRabbit＆＃34;，那么它与

相同

 $.fn.killTheRabbit = function ( options ) {

但是他们可以使用pluginName

的不同值多次调用它

我从JQuery论坛得到了以下答案。

我运行了一些调试console.log语句，并注意到这个函数在调用插件时执行1st。特别是我根本不理解以下2行。

if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
        }

我知道Jquery中的数据函数在这里播放，数据函数可用于将数据与DOM中的任何元素相关联，以后可以访问（对不起，如果我错了！那就是最好的我可以从文档中理解。

我特别提出这个问题，因为我在很多Jquery插件中都看到了这段代码。

如果您选择回答此问题：

请尽量详细说明，并尝试用简单的英语和较少的Jquery术语解释它。

我还有一个补充问题：无论如何我能写一个测试用例，它会告诉我这个函数究竟在做什么吗？在什么情况下if条件失败并通过？（你真的可以选择不回答这个问题！那很好。）。

Answer 1

以下几行：

    if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
    }

与此伪代码相同：

  if not elementData["key"] then
       elementData["key"] = new object
  end if

翻译成英文：

＆＃34;如果我尚未在我的元素上存储插件对象，使用插件的名称作为键，然后创建我的实例插件并将该实例存储在我的元素上，使用插件的名称作为键＃34;。

这部分只是创建一个JavaScript对象实例，传递一些有用的参数（Javascript对象是一种函数）：

new Plugin( this, options )

补充问题的测试用例（只需在同一元素上调用两次）：

// First time will go into the `if` and create the object
$('#elementId').killTheRabbit();

// Call it again and it will not create the object (as you already have that plugin on the element)
$('#elementId').killTheRabbit();

scrolly.js初始化代码，有点混乱

1 个答案: