scrolly.js初始化代码，有点混乱 [英] scrolly.js initializing code , a bit confusing

问题描述

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

I was going through the source code of a simple parallax plugin, and came across a piece of code that seems to be very very familiar or rather a pattern across a lot of other plugins ,

关注的插件是:

Scrolly.js

令人困惑的代码是:

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

以某种方式，我无法理解那段代码.

somehow i am not able to come to terms with what that piece of code.

经过一番询问，我能够揭开第一行的神秘面纱:

on a little enquiry, i was able to demystify the 1st line :

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

上面的行例如:

假设pluginName ="killTheRabbit"，则与

assuming pluginName = "killTheRabbit", then it is the same as

 $.fn.killTheRabbit = function ( options ) {

但是他们可以使用不同的pluginName值多次调用它

But they can call it many times with different values for pluginName

我从JQuery论坛获得了以下答案.

i got the following answer from a JQuery forum .

我运行了一些调试console.log语句，并注意到当调用插件时，正是该函数执行第1次.特别是我根本不理解以下两行.

i ran a few debugging console.log statements and noticed that it is this function that executes 1st when a plugin is called . perticularly i don't understand the below 2 lines at all .

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

我在这里知道它在Jquery中的数据功能，并且该数据功能可用于将数据与DOM中的任何元素相关联，以后可以访问它(对不起，如果我错了，那是我能理解的最好的东西)从文档的).

i know its the data function in Jquery at play here and the data function can be used to associate data with any element in the DOM , which can be later accessed (Sorry if i'am wrong ! thats the best i could understand from the doc's).

我特别问这个问题，因为我在很多Jquery插件中看到了那段代码.

I am particularly asking this question because i see that snippet of code in a lot of Jquery plugins.

如果您选择回答这个问题:

If you choose to answer this question :

请尽可能详细，并尝试使用简单的英语和尽可能少的Jquery术语进行解释.

Please be as elaborate as possible and try explaining it in simple english and less Jquery terms as possible .

我还有一个补充问题:无论如何，我是否可以编写一个测试用例，确切地向我展示此函数的作用?在什么情况下if条件失败并通过? (您真的可以选择不回答此问题！那就可以了.).

also i have a supplementary question : is there anyway i can write a test case that will show me exactly what this function is doing ?? and under what circumstances the if condition fails and passes ?? (You can really choose not to answer this ! thats fine . ).

推荐答案

以下几行:

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

与此伪代码相同:

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

翻译成英文:

如果我尚未在元素上存储插件对象，请使用插件名称作为键，然后创建我的插件实例并存储该实例在我的元素上，使用插件的名称作为键."

"If I have not already stored a plugin object on my element, using the name of the plugin as the key, then create an instance of my plugin and store that instance on my element, using the name of the plugin as the key".

这部分仅创建一个JavaScript对象实例，并传递几个有用的参数(JavaScript对象是一种函数):

This part simply creates a JavaScript object instance, passing a couple of useful parameters (Javascript objects are a type of function):

new Plugin( this, options )

补充问题的测试用例(只需在同一元素上两次调用):

Test case for the supplementary question (just call it twice on the same element):

// 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初始化代码，有点混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！