Question

我自己写了一个Javascript函数，用于将Javascript文件附加到DOM，我对javascript很新，因此我的解决方案相当冗长。所以经过一番谷歌搜索后，我发现这个看似非常酷的附加javascript文件的技巧。现在我不愿意用很酷的新技巧替换我的代码，直到我完全理解它的功能。

这是新代码。

!function(b){function c(){if(d=e.shift())a=b.body.appendChild(b.createElement("SCRIPT")),a.onload=c,a.src=d}var e=[
  'https://www.google.com/jsapi?key=MY_API_KEY',
  'https://apis.google.com/js/client.js?onload=initPicker'
],a,d;c()}(document);

请有人清楚一下这里发生了什么吗？

Answer 1

我相信您提供的代码与以下代码相同，我希望它更具可读性：

function loadAllJavaScriptFiles() {
    function loadNextJavaScriptFile(){
        var nextUrl = urls.shift();
        if (nextUrl) {
            var scriptElement = document.body.appendChild(
                                    document.createElement("SCRIPT"));
            scriptElement.onload = loadNextJavaScriptFile;
            scriptElement.src = nextUrl;
        }
    }

    var urls = ['https://www.google.com/jsapi?key=MY_API_KEY',
                'https://apis.google.com/js/client.js?onload=initPicker'];
    loadNextJavaScriptFile();
}

loadAllJavaScriptFiles();

a现在是scriptElement，功能c现在是loadNextJavaScriptFile，d现在是nextUrl，现在e urls。 b仅用于缩写document。外function从未有过名字;我称之为loadAllJavaScriptFiles。

该代码段会迭代大量可能返回JavaScript代码的网址，并创建<script>元素以将此JavaScript代码加载到网页上。 JavaScript按urls中指定的顺序一次加载一个URL：一个脚本文件的onload处理程序用于触发加载下一个脚本文件的过程。

内部代码包含在immediately-invoked function expression中。此方法中的代码会立即运行，因为它位于function内，它可以避免更改您自己的JavaScript代码中碰巧具有相同名称的任何变量的值。

Answer 2

这里的代码稍作清理。

  function c(){
    var e=['https://www.google.com/jsapi?key=MY_API_KEY', 'https://apis.google.com/js/client.js?onload=initPicker']
    var a,d;
    if(d=e.shift()) {
      a=document.body.appendChild(document.createElement("SCRIPT"))
      a.onload=c
      a.src=d
    }
   }

我猜它会迭代e中的元素，并在文档中为它们创建SCRIPT元素。

您对此代码段有任何其他文档吗？

这个javascript代码段如何工作？

2 个答案: