插件的原理
在JavaScript中,在定义函数的时候,如果在函数体的后面加一对小括号,这个函数就会立即执行。如,以下代码定义了一个匿名函数,并立即执行:
function () { /* code */ } ();
由于它本身就是一个函数,因此可以接受参数。如,以下代码为匿名函数传入一个参数 a,它的值是 2:
(function (a) { /* code */ } (2));
当把这类函数放在一个 .js 文件中,你只需引用这个 .js 文件,这些函数便会自动执行,无需显式调用,非常方便。因此,Bootstrap 中的所有插件,都使用了这种模式。比如,以下是 button.js 文件的格式:
+function ($) { 'use strict'; /* other code */}(jQuery);
这个文件的意思是声明一个函数,然后立即执行,并将jQuery对象作为函数的参数。这样作的好处是,此时函数内部的 $ 已经是局部变量,不会再受到外部作用域的影响。
function前面 + 号的作用是将函数声明转化为函数表达式,用来消除函数声明和函数表达式间的歧义。一元运算符可以算是消除歧义的最好方式,+ 号只是其中之一,你也可以使用其他一元运算符,如 !、;、+、-、=、~ 等。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。