首页 > 心得分享 > JS匿名函数如何反复调用自身实践: 动态加载指定JS列表后执行方法.

JS匿名函数如何反复调用自身实践: 动态加载指定JS列表后执行方法.

这个绝对是造轮子,但是程序员不就是为了反复造轮子而生的吗???
主要是实践另一个内容,我们经常会使用JS写匿名函数,但我前段时间突然遇到一个问题。
我想写一个匿名函数,但是还想反复调用这个匿名函数。
但是我真心不想污染全局环境(好吧,是做某些不可告人的事,怕被检测到...)

JS的方法函数内,提供了一个 arguments 对象,它主要保存了当前方法调用是传递的参数,
同时,还有一个指针变量,指向了本方法本身。
我们可以通过这个方法来实现匿名函数反复调用自身的需求。

(function(scripts, callback) {
    var this_function = arguments.callee,
        scriptSrc = typeof scripts == 'string' ? scripts : scripts.splice(0, 1)[0],
        script = document.createElement("script");
    script.onload = typeof scripts[0] == 'undefined' ? callback : function() {
        this_function(scripts, callback)
    };
    script.src = scriptSrc + (scriptSrc.indexOf('?') >= 0 ? '&_' : '?_') + (new Date).getTime();
    document.body.appendChild(script);
})(
    [
        "//cdn.bootcss.com/jquery/3.2.1/jquery.min.js",
        "//cdn.bootcss.com/layer/3.0.1/layer.min.js"
    ],
    function() {
        console.log('jQuery', jQuery.fn.jquery);
        console.log('layer', layer.v);
        var msg = "Js Load done.";
        msg+= "<br />jQuery: " + jQuery.fn.jquery;
        msg+= "<br />layer: " + layer.v;
        layer.alert(msg);
    }
);

当然,现代浏览器里面表示这个对象是个消耗资源的大户,不建议使用了,
那么,还有一个折中的办法,就是在匿名函数里面定义一个对象来反复调用执行。
由于作用域在匿名对象内,所以还是不会污染全局环境。达到同样的目的。

(function(scripts, callback) {
    return (function loadJs(scripts, callback){
        var scriptSrc = typeof scripts == 'string' ? scripts : scripts.splice(0, 1)[0],
            script = document.createElement("script");
        script.onload = typeof scripts[0] == 'undefined' ? callback : function() {
            loadJs(scripts, callback)
        };
        script.src = scriptSrc + (scriptSrc.indexOf('?') >= 0 ? '&_' : '?_') + (new Date).getTime();
        document.body.appendChild(script);
    })(scripts, callback);
})(
    [
        "//cdn.bootcss.com/jquery/3.2.1/jquery.min.js",
        "//cdn.bootcss.com/layer/3.0.1/layer.min.js"
    ],
    function() {
        console.log('jQuery', jQuery.fn.jquery);
        console.log('layer', layer.v);
        var msg = "Js Load done.";
        msg+= "<br />jQuery: " + jQuery.fn.jquery;
        msg+= "<br />layer: " + layer.v;
        layer.alert(msg);
    }
);

两种方法是不同的使用技巧,可以都使用一下。
同时,示例中用到了layer库。
最开始,怎么加载,都会出错,库是远程的,但是加载css文件时,竟然加载的本地文件。
特别奇怪,今天特别研究了一下代码,发现是这样获取路径的。

o = {
        getPath: function() {
            var e = document.scripts
              , t = e[e.length - 1]
              , i = t.src;
            if (!t.getAttribute("merge"))
                return i.substring(0, i.lastIndexOf("/") + 1)
        }()
    }

通过获取页面最后一个scripts的地址来获取JS文件的地址的。
思路本身是没错的,但是我的代码是加载到head里面的。
而这种方法获取到的地址就有可能是body里面的。
顺序不对就导致地址获取错误了。
所以,我把加载地址从一般的head改成了body。
理论上影响不大,毕竟你粘贴代码的时候,页面已经加载完毕了。

上一篇: 使用Putty的端口映射功能通过跳板机连接到内网FTP服务器上

下一篇: Swoole长连接服务不中断服务进行热更新实例