JS/CSS module LazyLoad 之三

在开始这篇前，有两个小问题须说明一下

情况一

1	`LazyLoad.js(['a.js','a.js'],function(){});`

有人会问为什么要在页面中引入两次a.js？我也想问。其实是多余的。但有人就喜欢这么用，那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量，或者说我更愿意看到不要这么去写。当然我自己用肯定不会这么写的。

情况二

1 2	`LazyLoad.js(['a.js'],` `function(){});` `LazyLoad.js(['b.js'],` `function(){});`

这种写法也是杜绝的，它等同于

1	`LazyLoad.js(['a.js',` `'b.js'],` `function(){});`

有人或许想在每一个js载入后单独有一个回调，这个功能后续有专门的篇幅。因为这个系列的前提是所有的js都加载后才回调，即所有资源加载完后只回调一次。

好了，如果你赞同以上约定，那么请继续往下看。

前两篇完成对js和css的惰性加载功能，但其实还有一些问题的。最重要的就是加载重复资源的问题。这篇会在将已经加载过的资源(JS/CSS)记录下，第二次加载重复的则会有如下提示

html如下

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>LazyLoad_0.3.js</title>
        <script src="https://files.cnblogs.com/snandy/LazyLoad_0.3.js"></script>
        <script type="text/javascript">
            var ary = [
                'https://files.cnblogs.com/snandy/a.js',
                'https://files.cnblogs.com/snandy/b.js',
                'https://files.cnblogs.com/snandy/c.js'
            ];
            LazyLoad.js(ary, function(){
                c();
            });
            function clk(){
                LazyLoad.js(['https://files.cnblogs.com/snandy/a.js'], function(){
                    alert('b');
                });
            }
        </script>
    </head>
    <body>
        <button onclick="clk()">loading a.js again</button>
    </body>
</html>