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

jquery 自执行函数

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

基础概念

自执行函数通常以以下形式出现:

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

或者使用jQuery:

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

相关优势

  1. 避免全局变量污染:通过创建一个新的作用域,可以防止变量和函数名冲突。
  2. 模块化:自执行函数可以用来封装代码,使其更易于管理和维护。
  3. 立即执行:函数在定义后立即执行,适用于初始化操作。

类型

  1. 普通自执行函数
  2. 普通自执行函数
  3. 带参数的自执行函数
  4. 带参数的自执行函数
  5. jQuery自执行函数
  6. jQuery自执行函数

应用场景

  1. 初始化操作:在页面加载时执行一些初始化代码。
  2. 插件开发:创建独立的插件,避免与其他代码冲突。
  3. 模块化代码:将代码分割成多个模块,每个模块使用自执行函数封装。

遇到的问题及解决方法

问题:自执行函数中的变量无法在外部访问

原因:自执行函数创建了一个独立的作用域,外部无法直接访问其中的变量。

解决方法:可以通过返回对象或使用闭包的方式暴露变量。

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

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

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

module.publicFunc(); // 输出: I am private

问题:自执行函数中的$符号冲突

原因:在某些情况下,其他库也可能使用$作为别名,导致冲突。

解决方法:通过将jQuery传递给自执行函数,确保内部的$符号指向jQuery。

代码语言:txt
复制
(function($) {
    $('body').css('background-color', 'red');
})(jQuery);

示例代码

以下是一个使用jQuery自执行函数的示例,用于初始化页面上的元素:

代码语言:txt
复制
(function($) {
    // 初始化操作
    $('button').click(function() {
        alert('Button clicked!');
    });

    // 模块化代码
    var utils = {
        sayHello: function(name) {
            alert('Hello, ' + name + '!');
        }
    };

    utils.sayHello('World');
})(jQuery);

通过这种方式,可以确保代码的独立性和可维护性,同时避免全局命名空间的污染。

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

相关·内容

匿名函数与自执行函数

匿名函数与自执行函数 匿名函数就是指的没有名字的函数,即定义函数对象时不定义函数体名字,但是必须将匿名函数作为表达式赋予一定操作,比如将其作为变量值或者让其自执行,否则这次定义将无意义,解释器也会抛出异常...匿名函数 /** * 定义函数 声明式 * 声明式会导致函数提升,function会被解释器优先编译。...自执行函数 自执行即函数定义与创建合用为一体,创建完成即调用 (function() { console.log(1); })(); // 1 包围函数的第一段括号返回一个匿名函数,随后第二个括号将其调用...这种方式可以缩小作用域,ES6之前JS仅有全局作用域与函数作用域,显然将所有变量交予全局作用域是不合适的,而定义函数再调用再销毁函数操作了三步,使用自执行匿名函数可以将上述三步操作定义后即完成。.../** * 自执行的一些方式 * 只要能够将匿名函数作为一个表达式出现,在后边加入()就能够将其自执行 */ // 这种经常用来构建沙箱模式 (function () { console.log

1.4K50
  • JavaScript 块级作用域 与 自执行函数

    ES6出现了一个可以替代自执行函数的东西。 拿实例说话 就算没仔细看过jquery源码,想比你也见过开头的这种代码: 这是一种典型的自执行函数,也就是立即执行函数。...先来比较一下下面两段代码: 1.1 自执行函数 var v = "hello"; (function(){ console.log(v); var v = "world"; })(); 输出:...如果说没有使用自执行函数,结果是这样的: 1 var deletedIds = []; 你在代码中已经定义过deletedIds,jquery中再定义一个,是不是把你的覆盖掉? 2....不能,得先执行jquery()方法才能调用(selector)。 3. 加一个自执行函数 什么是自执行函数,只要加载该文件,它就会自执行函数。...就像jquery源码中那样,加载jquery文件后,window.$就已经被赋值了,只需要使用即可。

    1.4K00

    jQuery常用函数汇总

    jQuery是一个流行的JavaScript库,它简化了在网页开发中对DOM操作、事件处理、动画效果和AJAX等功能的实现。...动画和效果: jQuery提供了丰富的动画和效果方法,可以轻松地创建页面元素的动态效果,如淡入淡出、滑动、动画效果等。...跨浏览器兼容性: jQuery的设计考虑了不同浏览器之间的兼容性,让开发者能够更好地处理不同浏览器的差异。插件生态系统: jQuery拥有丰富的插件生态系统,开发者可以利用这些插件来扩展和增强其功能。...尽管如此,jQuery仍然被广泛使用,并且对于一些特定场景和项目仍然是一个有价值的工具。...获取元素//$(选择器)$('div')//获取页面中的所有div元素,返回的是jQuery对象get()参数为索引,返回值是原生对象eq()参数为索引,返回值为jQuery对象操作类名hasClass

    15220

    Jquery源码分析:初始化Jquery函数

    版本:3.4.1 代码是从一个匿名执行函数开始的,我们直接找到jQuery函数,因为我们使用jq的时候都是$("#id")这样开头,在jquery里,$=jQuery。...在代码的148行,这个jQuery其实是个变量,然后赋值了一个函数,这个函数就是我们jQuery的入口点,我们定位到这个init函数这里来看看代码,由于代码太多,我把代码化简来讲解。...$或者window.jQuery 都是由用户自己设置,你可以改成其他变量名也可以。 其实我认为jQuery在代码入口使用了太多原型链的赋值,我这里修改了一些代码,让代码只执行了一个原型链赋值。...我将jQuery改为了SmhJquery,入口代码如下: ? 也是执行了一次原型链的赋值,也是同样的调用的init这个函数,但是这里却没有返回任何东西,请看下图。 ?...但是为什么我还要去执行init这个函数,其实我是可以不执行的,也能得到原型链,但是init函数里是把我们要操作的dom对象存入this,所以不得不执行。

    1.1K20

    jQuery的animate函数

    jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。...Complete Function 完成后的函数动作 如果指定,complete 回调函数会在动画执行完毕后被触发。这在设计多个顺序发生的动画时特别有用。...这个函数没有任何参数,但是 this 被设置为触发动画的DOM元素。如果多个元素发生动画,则回调在每个动画执行完后都会被执行,而不是在所有动画执行完后执行一次。...Step Function 步长函数 在animate的第二种调用方式中提供了一个step的选项,这是一个回调函数,可以在每一个step执行时被触发。...利用jQuery的Animate函数和Effect插件,做了一个类似于IBM首页的焦点图切换效果,可以参考 https://github.com/cocowool/RoseFocus 参考资料: 1

    1.7K30
    领券