首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery 立即执行

jQuery 立即执行函数(Immediately Invoked Function Expression,简称 IIFE)是一种 JavaScript 编程技巧,用于创建一个独立的作用域,避免变量污染全局命名空间。这种函数在定义后立即执行,不需要显式调用。

基础概念

IIFE 的基本形式如下:

代码语言:txt
复制
(function() {
    // 函数体
})();

或者使用圆括号包裹来立即执行:

代码语言:txt
复制
(function() {
    // 函数体
}());

相关优势

  1. 避免全局污染:通过 IIFE,可以创建一个局部作用域,防止变量和函数泄露到全局作用域,减少命名冲突。
  2. 模块化:IIFE 可以用来创建模块,每个模块都有自己的作用域,模块之间不会相互影响。
  3. 私有变量:在 IIFE 内部定义的变量不会被外部访问,可以实现私有变量的效果。

类型

IIFE 通常有以下几种形式:

  1. 普通函数表达式
  2. 普通函数表达式
  3. 箭头函数表达式
  4. 箭头函数表达式
  5. 参数化 IIFE
  6. 参数化 IIFE

应用场景

  1. 初始化代码:在页面加载时执行一些初始化操作。
  2. 模块化开发:将代码分割成多个模块,每个模块使用 IIFE 来隔离作用域。
  3. 避免变量冲突:在多个库或插件中使用 IIFE 来避免变量名冲突。

示例代码

假设我们有一个 jQuery 插件,使用 IIFE 来创建一个独立的作用域:

代码语言:txt
复制
(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 内部的变量,可以通过返回一个对象或函数来实现:

代码语言:txt
复制
var module = (function() {
    var privateVar = 'private';

    function privateFunc() {
        console.log(privateVar);
    }

    return {
        publicFunc: function() {
            privateFunc();
        }
    };
})();

module.publicFunc(); // 输出 'private'

通过这种方式,可以在保持变量私有性的同时,提供对外的接口。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

立即执行函数

立即执行函数(IIFE),也叫做自执行函数,就是不需要调用就立马执行的函数。...() { } 立即函数有两种常见格式: (function() { console.log(999) }()) (function() { console.log(999) })() 这两种格式都能保证函数立马执行...,这也是立即函数的基础常见的格式,()运算符加上匿名函数,还有另外几种格式也能立即执行: !...、+、-、=和函数表达式都能打到立即执行。上面的方法,是匿名函数加上运算符,其实把匿名函数都换成函数声明也是一样的,也能变成立即执行函数: !...我们都知道jQuery就是一个匿名函数,看源码可以看见jQuery所有内容都包含在匿名函数里面 ( function( global, factory ) { } 创建一个函数作用域是所有JS插件必须要有的功能

1.7K40
  • js 立即执行函数

    立即执行函数 目录 立即执行函数 作用 参数 返回值 立即执行函数 立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行。...立即执行函数的组成 定义一个函数 将整个函数包裹在一对括号中 将函数声明转换为表达式 在结尾加上一对括号 让函数立即被执行 代码实例 (function () { console.log("...+ who) })("kangkang") 代码实例2 (function (global) { console.log(global) })(this) 通常,全局变量被作为一个参数传递给立即执行参数...注意 通常你不应该给立即执行函数传递太多的参数,因为它很快会成为一个负担——为了理解代码是如何工作的,你不得不经常上下滚动源代码。...返回值 就像其它任何函数一样,一个立即执行函数也能返回值并且可以赋值给其它变量。 var num = (function () { return 4 })() console.log(num)

    6.2K20

    理解JavaScript立即执行函数

    IIFE (Immediately Invokable Function Expressions):是在函数声明后立即调用的函数表达式。...立即执行函数通常包含两种使用格式,具体使用那一种风格可以根据个人习惯和团队规范选择: // 第一种: (function() {/* */})(); // 第二种: (function(){/* */...}()) // 也可以使用箭头函数声明 ;(() => {/* */}()) 数学符号都会导致函数立即执行,因为JavaScript引擎会将函数判断为表达式,而不是函数声明。...function(){}(); +function(){}(); -function(){}(); ~function(){}(); new关键字也会导致函数被立即执行。...插件的封装模式:(function($){ ``` //JQuery插件 })(jQuery); 倒置代码的运行顺序 这是一个《你不知道的JavaScipt》上的一个经典的例子, 在UMD

    1.1K30

    你真的知道『立即执行函数』吗?

    立即执行函数,经常使用,但是你确定了解它嘛? 下面,就来看看吧! 1、定义 立即执行函数,又称IIFE....3、立即执行函数的使用 声明后,直接加(); 将会报语法错误,执行符号只能跟在函数表达式后面 示例: function test(){ console.log('Function declaration...'); }() 报错:Uncaught SyntaxError: Unexpected token ')' 原因:立即执行函数 ,是执行函数表达式,而不是函数声明式 4、函数表达式 当一个函数需要立即执行的情况...且函数名不能在外部使用 8、立即执行函数的好处 1、可以创建一个与外界没有任何关联的作用域,独立作用域 2、执行完成后,自动销毁 3、ES3 ES5 立场上是没有模块的模仿,可用立即执行函数来模拟模块化...今天的分享就到这,还有关于立即执行函数的其它问题,欢迎提问

    63520

    前端面试之立即执行函数

    什么是立即执行函数 声明一个函数,并马上调用这个匿名函数就叫做立即执行函数。在定义好一个函数后,直接执行。...立即执行函数的写法 有时候,我们定义函数以后,立即调用该函数,这时不能在函数的定义后面直接加圆括号,这会产生语法错误。...解决方法: 1、使用立即执行函数,给每个li创建一个独立的作用域,在立即执行函数执行的时候,i的值从0到2,对应三个立即执行函数,所以就能正常输出了。...立即执行函数的参数 (function(i) { ... })(j) 如果立即执行函数中需要全局变量,全局变量会被作为一个参数传递给立即执行函数。j代表是实参,i代表的是执行函数的形参。...立即执行函数的作用 1、改变变量的作用域(创建一个独立的作用域)。 2、封装临时变量。

    1.9K10

    JavaScript立即执行函数(IIFE)的使用

    js的立即执行函数(IIFE)有两种写法,分别为:(function ( ){})( ) 与 (function ( ){}( )) ,这两种写法基本上是没有区别的。 那么为什么要 IIFE?...let foo = "bar"; console.log(foo); } foo; // ReferenceError: foo is not defined 但是,块范围变量不能替代立即调用的函数表达式...通过这种方式,即使函数在IIFE的词法范围外执行,也会创建一个闭包,使函数能够访问局部变量。...例如,考虑一下你正在使用jQuery同时另一个库也指定了一个为$的全局变量。 为了解决命名冲突问题,可以将一段代码封装在一个IIEF中,将一个全局变量(比如,jQuery)作为参数传入IIFE。...$,在IIFE中,这些值都会被”屏蔽”,$参数一直指向jQuery方法。

    2.4K20

    立即执行函数表达式(IIFE)

    立即执行函数表达式(IIFE) 幸运的是,固定的语法错误很简单。最普遍接受的方式告诉解析器这是一个被括号包裹的函数表达式。...这一括号通常意味着函数表达式会被立即执行,变量将包含函数的结果而不是函数本身。这也会解决一些麻烦,否则如果你写了一个很长的函数表达式,别人必须拉到最底部查看该函数有没有被立即执行。...立即执行函数表达式最好的一方面就是,因为这个匿名函数表达式被立即执行,没有标识符,所以闭包的使用不会污染当前作用域。 “自执行匿名函数”有错误吗?...“立即执行函数表达式”是什么?它是一个被立即执行的函数表达式,就像这个名称会让你相信一样。 我希望看到 JavaScript 社区成员在他们的文章和报告中采用“立即执行函数表达式”这个术语。...var foo = function() { foo(); }; // 有些人把这个称为 "自执行匿名函数" ,其实它并 // 不是自执行, 因为它没有调用自身。它只是 // 立即调用。

    93150

    JavaScript之闭包问题以及立即执行函数

    https://blog.csdn.net/sinat_35512245/article/details/53514804 今天我将会来浅谈一下关于JavaScript的立即执行函数以及闭包问题...首先我们先要了解一下关于立即执行函数: ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数...,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。...要理解立即执行函数,需要先理解一些函数的基本概念。...,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式; 二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。

    96120

    前端开发:立即执行函数(function(){}())与(function(){})()的区别

    那么本篇博文就来分享一下关于在JS中立即执行函数相关的对比使用总结,方便查阅使用。...什么是立即执行函数声明一个函数,然后立即调用该函数,这时候的该函数就是一个立即执行函数,换句话说就是声明函数以后立即执行该函数就叫做立即执行函数,即IIFE (Immediately Invoked Function...立即执行函数的作用立即执行函数的作用大概有三个方面:1、为了避免污染全局变量,声明函数不设置函数名;2、通过创建一个独立的作用域,使得作用域里面的变量等内容不被作用域之外访问,避免声明的变量相互污染;3...立即执行函数传递参数若立即执行函数里面需要使用函数外部的变量,这就需要通过使用参数传递的方式来解决。...在立即执行函数内部使用的形参就是传递到函数内部的外部变量,进入立即执行函数自己的作用域,且不受外部变量的影响。

    8821
    领券