jQuery 立即执行函数(Immediately Invoked Function Expression,简称 IIFE)是一种 JavaScript 编程技巧,用于创建一个独立的作用域,避免变量污染全局命名空间。这种函数在定义后立即执行,不需要显式调用。
IIFE 的基本形式如下:
(function() {
// 函数体
})();
或者使用圆括号包裹来立即执行:
(function() {
// 函数体
}());
IIFE 通常有以下几种形式:
假设我们有一个 jQuery 插件,使用 IIFE 来创建一个独立的作用域:
(function($) {
$.fn.myPlugin = function(options) {
// 默认设置
var settings = $.extend({
color: 'red',
backgroundColor: 'yellow'
}, options);
// 插件逻辑
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor
});
};
})(jQuery);
// 使用插件
$('p').myPlugin({
color: 'blue'
});
问题:IIFE 内部的变量无法在外部访问。
原因:IIFE 创建了一个独立的作用域,内部的变量不会泄露到外部作用域。
解决方法:如果需要在外部访问 IIFE 内部的变量,可以通过返回一个对象或函数来实现:
var module = (function() {
var privateVar = 'private';
function privateFunc() {
console.log(privateVar);
}
return {
publicFunc: function() {
privateFunc();
}
};
})();
module.publicFunc(); // 输出 'private'
通过这种方式,可以在保持变量私有性的同时,提供对外的接口。
领取专属 10元无门槛券
手把手带您无忧上云