如何从 javascript 内部有选择地运行/加载单独的 javascript 文件？答案

【问题标题】：How to run/load a separate javascript file selectively from inside javascript?如何从 javascript 内部有选择地运行/加载单独的 javascript 文件？
【发布时间】：2015-12-30 00:30:31
【问题描述】：

我想从 index.html 文件加载 3 个 JavaScript 文件。我通过使用 if 语句在其中进行选择，我只知道如何在 JavasSript 中执行这些语句。但是，当在 JavaScript 正文中时，看起来我不能说这样的话：

<script type="text/javascript">
if(window.innerHeight == 800)
     <script type="text/javascript" charset="utf-8" src="storybook.js"></script>

有没有什么函数或者什么东西可以用来在条件之后执行 JavaScript 文件？

【问题讨论】：

你到底想做什么？从小 sn-p 看来，鉴于窗口的大小，您似乎想将某些内容显示为故事书。还有哪些其他选择？还有哪些其他选择？也许你不需要选择不同的 javascripts。
通常，您不需要选择要加载的 .js 文件。相反，加载所有文件并选择哪些函数是合适的，或者具有可以传递参数的通用函数以确定它们的详细行为。除非有令人信服的理由选择性地加载 .js 文件（例如，它们是您无法控制的第三方文件），否则您选择了糟糕的架构。

标签： javascript

【解决方案1】：

更新

当我最初写这个答案时，事情已经发生了变化，但他们继续改变到这个答案并没有过时的地步。请咨询The 2014 Guide to Responsive Web Design，因为现在有多种方法可以在样式表中使用媒体查询来获得您正在寻找的响应式布局。 Foundation 和 Bootstrap 等框架现在提供响应式布局，并为您处理大量繁重的工作，因此您可以花时间设计您的网站，而不是对其管道进行编码。

原始答案

有几种方法，但这里有一种（来自dynamically loading an external JavaScript or CSS file，由 Google 搜索“动态加载 javascript”找到）：

function loadjsfile(filename){
   var fileref = document.createElement('script');
   fileref.setAttribute('type', 'text/javascript');
   fileref.setAttribute('src', filename);
   if (typeof fileref !== 'undefined') {
      document.getElementsByTagName('head')[0].appendChild(fileref);
   }
}

loadjsfile("storybook.js"); //dynamically load and add this .js file

另一种方法是，不是动态加载文件，而是将所需的所有内容加载到一个文件中。然后，调用正确的脚本。虽然这可能会因为加载整个文件而受到批评，但如果您的用户更改他的屏幕尺寸会发生什么？也许您希望加载这两个资源。改变屏幕尺寸并不像人们调整窗口大小那样牵强，甚至将窗口移动到具有不同分辨率的不同显示器。

// storybook800.js
function for800() {
   return {
      // all your module's stuff
   };
};

// storybook1600.js
function for1600() {
   return {
      // all your module's stuff
   };
};

// main document
var storybook;
if (window.innerHeight === 800) {
   storybook = for800();
} elseif (window.innerHeight === 1600) {
   storybook = for1600();
}

但是，我并不真正推荐其中任何一个选项。维护单独的文件可能会遇到真正的问题。无需加载完全不同的文件，只需在您的代码中检测即可。传入window.innerHeight 参数或更好，只需在您的javascript文件中检测它：

//storybook.js
function mystorybook() {
   if (window.innerHeight === 800) {
      //do something appropriate.
   }
};

如果这看起来很痛苦，请添加一些辅助函数。例如，创建一个函数，该函数期望具有各种键的对象，这些键包含依赖于大小的函数，以针对不同的大小运行。可以这样称呼它：

doSomethingSizeSensitive({
   800: function() {
   },
   1024: function() {
   },
   1600: function() {
   }
});

然后，您可以在该函数中编写代码，根据当前屏幕尺寸和传入的对象键，最好地选择正确的结果。它可以返回您传入的适当函数或值，而不是 doSomethingSizeSensitive 实际运行函数，然后您可以使用或存储它们：

var myaction = getSizeSensitiveFunction({
   800: function() {
   },
   1024: function() {
   },
   1600: function() {
   }
});
myaction(); // for the rest of the lifecycle of the page, it does the right thing.

你可以让你的函数返回任何东西——不仅仅是函数，还有值。如果屏幕尺寸是 1280 或 1528 或其他一些奇怪的尺寸怎么办？您需要智能地选择功能。考虑如何抽象出必须不同的部分，通过将其编码到对象中或检测从其他代码调用的风格函数中，以便您的代码的其余部分都可以相同.

也许你应该有一个完整的设置对象：

sizedata = {
   800: {
      something1: function() {},
      value1: 'small'
   },
   1600: {
      something2: function() {},
      value2: 'large'
   },
};

结合正确选择正确sizedata 子对象的功能，现在您可以随时调整某些内容或添加新的屏幕尺寸。这一切都在一个地方！当需要修理或维护时，您就像在天堂一样。

【讨论】：

谢谢，我会尝试其中的一些建议。问题是我要加载的 js 是 HYPE 生成的文档。 HYPE 是一个用于在 html 中进行简单动画和格式化的程序实用程序，并且 js 文件相当大，仅将所有可能解决方案的代码粘贴到我的 html 中是有问题的。所以我认为考虑到限制，加载文件是最好的方法。

【解决方案2】：

通过将脚本附加到文档中。

if(window.innerHeight == 800){
    var script = document.createElement("script");
    script.src = "storybook.js";
    document.getElementsByTagName("head")[0].appendChild(script);
}

【讨论】：

【解决方案3】：

var s = document.createElement("script");
s.src="myscript.js";
document.head.appendChild(s);

哦，伙计，同时有这么多相同的答案。

【讨论】：

3 1/2 分钟并不完全是“同时”。 :)

【解决方案4】：

我是 javascript 新手，但我有一个想法，您可以将 id 设置为就像 <header id='h'></header> 一样，然后您可以使用以下代码将脚本附加到标题：

var h = document.getElementById('h');
var scripts = document.createElement('script');
switch(window.innerHeight){
    case 800:
      scripts.src = 'storybook.js';
      scripts.type = 'text/javascript';
      break;
}
h.appendChild(scripts);

您可以通过添加更多案例来更改脚本源。感谢阅读。

【讨论】：