查漏补缺——解释一下!function(){}(window, document)

问题

如题所示

答案

相关源码：

!function (e, t, a) {
    function n() {
        c(
            "
                .heart{
                    width: 10px;
                    height: 10px;
                    position: fixed;
                    background: #f00;
                    transform: rotate(45deg);
                    - webkit - transform: rotate(45deg);
                    -moz - transform: rotate(45deg);
                }
                .heart: after,.heart:before{
                    content: '';
                    width: inherit;
                    height: inherit;
                    background: inherit;
                    border - radius: 50 %;
                    -webkit - border - radius: 50 %;
                    -moz - border - radius: 50 %;
                    position: fixed;
                }
                .heart:after{ top: -5px; }
                .heart:before{ left: -5px; } "
        ), o(), r()
    }
    function r() {
        for (var e = 0; e < d.length; e++)
            d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : 
            (
                d[e].y--, d[e].scale += .004, 
                d[e].alpha -= .013, 
                d[e].el.style.cssText = "
                left:" + d[e].x + "px;
                top:" + d[e].y + "px;
                opacity:" + d[e].alpha + ";
                transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);
                background:" + d[e].color + ";
                z-index:99999"
            ); 
            requestAnimationFrame(r)
    }
    function o() {
        var t = "function" == typeof e.onclick && e.onclick; 
        e.onclick = function (e) { 
            t && t(), i(e) 
        }
    }
    function i(e) {
        var a = t.createElement("div");
        a.className = "heart",
        d.push({ 
            el: a, 
            x: e.clientX - 5, 
            y: e.clientY - 5, 
            scale: 1, 
            alpha: 1, 
            color: s() 
        }),
        t.body.appendChild(a)
    }
    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        }
        catch (t) {
            a.styleSheet.cssText = e
        } 
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," 
        + ~~(255 * Math.random()) 
        + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = 
    function () {
        return e.requestAnimationFrame 
        || e.webkitRequestAnimationFrame 
        || e.mozRequestAnimationFrame 
        || e.oRequestAnimationFrame 
        || e.msRequestAnimationFrame 
        || function (e) {
            setTimeout(e, 1e3 / 60)
        }
}(), n()
}(window, document);

JS中!function(){}()的理解

js之立即执行函数

立即执行函数，传参方法

!function(){}()这是立即执行函数，上面这个立即执行函数传入了e, t, a，后面的括号是对应的实参，也就是e=window, t=document