Javascript：了解函数语法和参数

I am trying to make sense of the onchange event of bootstrap-multiselect. In particular, I am trying to understand the function syntax and parameters.

我试图理解bootstrap-multiselect的onchange事件。特别是，我试图理解函数语法和参数。

$('#example-onChange').multiselect({
     onChange: function(option, checked, select) {
            alert('Changed option ' + $(option).val() + '.');
           }
});

How to know what does the three parameters in the function mean? Where will I get these three parameters? I also tried looking at the code https://github.com/davidstutz/bootstrap-multiselect/blob/master/dist/js/bootstrap-multiselect.js#L263 but couldn't make much sense of it.

如何知道函数中的三个参数是什么意思？我在哪里可以获得这三个参数？我也尝试查看代码https://github.com/davidstutz/bootstrap-multiselect/blob/master/dist/js/bootstrap-multiselect.js#L263但是对它没有多大意义。

I know using alerts that in this function option refers to the selected option, checked shows whether the option was checked or unchecked. I keep getting undefined when doing console.log(select) inside the function, so not sure what does that mean.

我知道使用警报，在此功能选项中引用所选选项，选中此选项可显示选项是已选中还是未选中。在函数内部执行console.log（select）时，我一直未定义，所以不确定这是什么意思。

Question: How to understand function parameters and syntax like these? This is just an example but knowing a generic procedure will help me decode other similar functions in future.

问题：如何理解这些函数参数和语法？这只是一个例子，但知道一般程序将帮助我将来解码其他类似的功能。

2 个解决方案

#1

In short, it seems the library doesn't actually provide the select option.

简而言之，似乎库实际上并没有提供选择选项。

---

In general, in situations where the documentation isn't very precise, the technique I often apply is to console.log the arguments, then inspecting what each of them look like.

通常，在文档不是很精确的情况下，我经常应用的技术是console.log参数，然后检查每个参数的外观。

In this situation, when doing:

在这种情况下，做的时候：

$('#example-onChange').multiselect({
    onChange: function(option, checked, select) {
        console.log(arguments);
    }
});

... I got the following output:

...我得到以下输出：

... from this you can see two arguments are provided. The first is the jQuery object of the option that was clicked. The second (you can assume) is a boolean as to whether the option is selected or not.

...从这里你可以看到提供了两个参数。第一个是被单击的选项的jQuery对象。第二个（你可以假设）是一个关于选择是否被选中的布尔值。

You can also see no select (3rd argument) was provided.

您还可以看到没有提供select（第三个参数）。

---

Another approach you can take is to search the source code, like you did; but I'd recommend finding where the function was called, rather than where it was defined. By searching for onChange in the source code, you can see onChange is called at least 3 times.

您可以采取的另一种方法是搜索源代码，就像您一样;但我建议找到调用函数的位置，而不是定义它的位置。通过在源代码中搜索onChange，您可以看到onChange被调用至少3次。

1. this.options.onChange($option, checked);
2. this.options.onChange（$ option，checked）;
3. this.options.onChange($option, true);
4. this.options.onChange（$ option，true）;
5. this.options.onChange($option, false);
6. this.options.onChange（$ option，false）;

... none of which provide a 3rd argument. I say at least 3 times here, because it can be hard sometimes (particularly in large libraries) to find all call sites, since developers can mask them in all sorts of weird and wonderful ways

......没有一个提供第三个参数。我在这里说至少3次，因为有时（特别是在大型图书馆中）找到所有的呼叫站点很困难，因为开发人员可以用各种怪异和奇妙的方式掩盖它们

---

Other techniques you can use:

您可以使用的其他技巧：

1. Setting a breakpoint within your handler function (either using the "breakpoint" functionality of your dev. tools, or via the debugger statement), triggering the handler, then following the callstack (again, using developer tools) to examine the call site, and to see what variables are provided.

   在处理函数中设置断点（使用开发工具的“断点”功能，或通过调试器语句），触发处理程序，然后跟随调用堆栈（再次使用开发人员工具）检查调用站点，以及查看提供的变量。

2. Opening an issue on the respective GitHub project. You'll find plenty of library owners are more than happy to help.

   在相应的GitHub项目上打开一个问题。你会发现很多图书馆老板都非常乐意提供帮助。

#2

Unfortunatly, all Javascript libraries must have a very robust documentation.

不幸的是，所有Javascript库都必须具有非常强大的文档。

Moreover, Javascript is a dynamically typed language, so there is no informations about the required types for the formal parameters. It make libraries more difficult to understand without good documentation.

此外，Javascript是一种动态类型语言，因此没有关于形式参数所需类型的信息。如果没有良好的文档，它会使库更难理解。

In order to quickly understanding, with experience, there is some thinking mecanisms which can be used. For example, the parameters of an event's delegate provide informations on the elements on which it occurs. It's like these parameters are values returned to you.

为了快速理解，经验，有一些可以使用的思想机制。例如，事件委托的参数提供了发生它的元素的信息。就像这些参数是返回给您的值。

In your example, there is chance that option, checked and select are concerned by the option's element in the multiselect defined in #example-onChange which was changed (onChange).

在您的示例中，有可能选项，checked和select与＃example-onChange中定义的多选项中的选项元素有关（已更改）（onChange）。

Example 1 :

例1：

onClose:function(success)
{
    //TODO
}

In this case, "success" should mean : this parameter is true if closing on my element has succeeded else "success" is false.

在这种情况下，“成功”应该意味着：如果关闭我的元素成功，则此参数为true，否则“success”为false。

Example 2 :

例2：

afterSave:function(success, filename) {

afterSave：function（success，filename）{

}

}

In this case, "filename" should be the filename of the saved element after perform save's action.

在这种情况下，执行save的操作后，“filename”应该是已保存元素的文件名。

I doing my best for writting correct english, I hope it's understandable.

我尽力写出正确的英语，我希望这是可以理解的。