最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > 立即执行函数表达式(IIFE )

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

发布时间:2017年09月05日 评论数:抢沙发阅读数: 30856

    在jQuery及其插件中经常看到如下的写法:

    +function($) {}(window.jQuery);

    这种写法称为:

    IIFE (Imdiately Invoked Function Expression 立即执行的函数表达式)。

    函数表达式  Function Expression - var test = function() {};

    函数申明     Function Declaration - function test() {};

    函数表达式中的函数可以为匿名函数,也可以有函数名,但是该函数实际上不能直接使用,只能通过表达式左边的变量 fl 来调用。

    var fl = function() {
         console.log("Function expression")
    }
    var cc = new fl();

    函数声明时必须有函数名:

    function fl() {
        console.log("Function Declaration")
    }
    fl();

    匿名函数在console下会报错。console的执行和报错如下:

    SyntaxError: Unexpected token (

    通过一元操作符+变成了函数表达式。也可以使用 - ~ !等其他一元运算符或者括号,目的是为了引导解析器,指明运算符附近是一个表达式。以下是三种经典方式 :

    +function() {};
    (function() {});
    void function() {};

    函数表达式通过 末尾的() 来调用并运行。就是一个IIFE。

    +function() {} ();
    (function() {}) ();

    为了避免$与其他库或者模板申明冲突,window.jQuery 作为参数传递。

    +function($) {
    
    } (window.jquery)

    使用IIFE的好处:提升性能、有利于压缩、避免冲突、依赖加载

    1、减少作用域查找。使用IIFE的一个微小的性能优势是通过匿名函数的参数传递常用全局对象window、document、jQuery,在作用域内引用这些全局对象。JavaScript解释器首先在作用域内查找属性,然后一直沿着链向上查找,直到全局范围。将全局对象放在IIFE作用域内提升js解释器的查找速度和性能。

    function(window, document, $) {
    
    } (window, document, window.jQuery)

    2、有利于压缩。另一个微小的优势是有利于代码压缩。既然通过参数传递了这些全局对象,压缩的时候可以将这些全局对象匿名为一个字符的变量名(只要这个字符没有被其他变量使用过)。如果上面的代码压缩后会变成这样:

    function(w,d,$) {
    
    }(window, document, window.jQuery)

    3、避免全局命名冲突。当使用jQuery的时候,全局的window.jQuery对象 作为一个参数传递给$,在匿名函数内部你再也不需要担心$和其他库或者模板申明冲突。

    4、通过传参的方式,可以灵活的加载第三方插件。(当然使用模块化加载更好,这里不考虑。)举个例子,如果a页面需要使用KindEditor,a.html引入kindeditor.js 和 a.js

    你可能会这么写 a.js:

    $(function() {  
        var editor  
        KindEditor.ready(function(K) {  
            editor = K.create('textarea[data-name="kindeditor"]', {  
     	    resizeType : 1  
            })  
        })    
    })  

    b页面不需要使用Kindeditor,没有引入kindeditor.js。但是在合并JS代码后,b页面也会执行a.js中的代码,页面报错Uncaught ReferenceError: KindEditor is not defined。也就是b页面执行了KindEditor,难道所有页面都要加载Kindeditor源文件?

    可以这么修改a.js,将KindEditor变量参数化,通过给立即执行的函数表示式的参数赋值,那么其他页面都不需要加载Kindeditor源文件


    +function(KindEditor) {
        var editor;
        if(KindEditor) {
        KindEditor.ready(function(K) {  
            editor = K.create('textarea[data-name="kindeditor"]', {  
     	    resizeType : 1  
            })  
        })    
    }(KindEditor || undefined)

    反对使用IIFE的其中一个理由是可读性差,如果你有大量的JavaScript代码都在一段IIFE里,要是想查找IIFE传递的实际参数值,必须要滚动到代码最后。幸运的是,你可以使用一个更可读的模式:

    (function(library) {
        library(window, document, window.jQuery);
    } (function(window, document, $) {
    
    }))

    jquery优化

    一段看上去写法有点像的代码。大部分项目用这段代码做作用域,这段代码会在DOM加载完成时初始化jQuery代码。

    $(function() {})
    //等价于
    $(document).ready(function() {
    // 在DOM加载完成时初始化jQuery代码。  
    })

    区别于:

    $(window).load(function() {
    //在图片等媒体文件加载完成时,初始化jQuery代码
    })

    结合IIFE的最佳实践,更好的写法是,立即执行document ready

    +function() {
    $(function() {
    
    })
    } (window.jQuery)
    +function(yourcode) {
        yourcode(window.jquery, window, document);
    }(function($, window, document) {
        $(function() {
    
        })
    })
二维码加载中...
本文作者:DGF      文章标题: 立即执行函数表达式(IIFE )
本文地址: http://arbays.com/post-36.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论