如何重构这些脚本标签？答案

【问题标题】：How can I refactor these script tags?如何重构这些脚本标签？
【发布时间】：2011-02-17 20:37:08
【问题描述】：

我在<head> 中有以下脚本标签，这样它们在 SSL 和非 SSL 页面之间来回切换时不会提示任何安全错误。但它看起来毛茸茸的。

有什么方法可以将它们组合起来或减少一些代码？

<script type="text/javascript">document.write(["\<script src='",("https:" == document.location.protocol) ? "https://" : "http://","ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>\<\/script>"].join(''));</script>
<script type="text/javascript">document.write(["\<script src='",("https:" == document.location.protocol) ? "https://" : "http://","html5shiv.googlecode.com/svn/trunk/html5.js' type='text/javascript'>\<\/script>"].join(''));</script>
<script type="text/javascript">document.write(["\<script src='",("https:" == document.location.protocol) ? "https://" : "http://","use.typekit.com/12345.js' type='text/javascript'>\<\/script>"].join(''));</script>

【问题讨论】：

标签： javascript refactoring

【解决方案1】：

所有现代浏览器都会理解 相对引用 URI 格式，该格式将自动适用于 http 和 https URI scheme names：

<script src="//example.com/path/script.js"></script>

延伸阅读：

【讨论】：

【解决方案2】：

<script type="text/javascript">
  // Create a closure for our loadScript-function
  var loadScript = (function () {
       var headTag = document.getElementsByTagName('head')[0],
           scriptTagTemplate = document.createElement('script'),
           addEventListener = function (type, element, listener) {
              if(element.addEventListener) {
                 element.addEventListener(type, listener);
                 return true;
              }
              else if (element.attachEvent) {
                 element.attachEvent('on'+type, listener);
                 return true;
              }
              return false;
           };
       scriptTagTemplate.type = 'text/javascript';

       // This function clones the script template element and appends it to head
       // It takes an uri on the form www.example.com/path, and an optional
       // callback to invoke when the resource is loaded.
       return function (uri, callback) {
          var scriptTag = scriptTagTemplate.cloneNode(true);
          if (callback) {
              addEventListener('load', scriptTag, callback);
          }
          headTag.appendChild(scriptTag);
          scriptTag.src = ['//', uri].join('');
       }
    }());
</script>

现在你可以像这样使用函数了：

<script>
        loadScript('ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
        loadScript('html5shiv.googlecode.com/svn/trunk/html5.js');
        loadScript('use.typekit.com/12345.js');
</script>

此解决方案的优势在于您避免使用容易出错和阻塞的document.write。您还可以选择在加载脚本后调用回调。

【讨论】：