个人中心
gpt4 book ai didi

javascript - 如何在另一个JavaScript文件中包含一个JavaScript文件？

转载 作者：行者123 更新时间：2023-11-28 04:59:20 25 4
gpt4 key购买 nike

JavaScript中是否有类似于CSS中@import的内容，允许您在另一个JavaScript文件中包含一个JavaScript文件？

最佳答案

JavaScript的旧版本没有导入，包含或要求，因此已经开发了许多解决此问题的方法。

但是自2015年（ES6）起，JavaScript已采用ES6 modules标准在Node.js中导入模块，most modern browsers也支持该标准。

为了与旧版浏览器兼容，可以使用Webpack和Rollup之类的构建工具和/或Babel之类的编译工具。

ES6模块

从v8.5开始，带有--experimental-modules标志的ECMAScript（ES6）模块已经成为supported in Node.js，并且至少从没有标志的Node.js v13.8.0开始。要启用“ ESM”（相对于Node.js以前的CommonJS样式的模块系统[“ CJS”]），您可以在"type": "module"中使用package.json或为文件提供扩展名.mjs。 （类似地，如果您的默认值为ESM，则用Node.js先前的CJS模块编写的模块可以命名为.cjs。）

使用package.json：

{
    "type": "module"
}


然后 module.js： 

export function hello() {
  return "Hello";
}


然后 main.js： 

import { hello } from './module.js';
let val = hello();  // val is "Hello";


使用 .mjs，您将拥有 module.mjs： 

export function hello() {
  return "Hello";
}


然后 main.mjs： 

import { hello } from './module.mjs';
let val = hello();  // val is "Hello";


浏览器中的ECMAScript模块

浏览器已经支持直接加载ECMAScript模块（不需要像Webpack这样的工具） since Safari 10.1，Chrome 61，Firefox 60和Edge16。请在 caniuse上查看当前支持。无需使用Node.js的 .mjs扩展名；浏览器完全忽略模块/脚本上的文件扩展名。 

<script type="module">
  import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
  hello('world');
</script>


// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}


在 https://jakearchibald.com/2017/es-modules-in-browsers/阅读更多

浏览器中的动态导入

动态导入使脚本可以根据需要加载其他脚本： 

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>


在 https://developers.google.com/web/updates/2017/11/dynamic-import阅读更多

Node.js要求

module.exports/require系统是仍在Node.js中广泛使用的较旧的CJS模块样式。 

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}


// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"


JavaScript还有其他方法可以在不需要预处理的浏览器中包含外部JavaScript内容。

AJAX加载

您可以使用AJAX调用加载其他脚本，然后使用 eval运行它。这是最直接的方法，但是由于JavaScript沙箱安全模型，它仅限于您的域。使用 eval还打开了漏洞，黑客和安全问题的大门。

获取加载

像动态导入一样，您可以使用Promise通过 fetch调用通过 <script>调用来加载一个或多个脚本，以使用 Fetch Inject库控制脚本依赖项的执行顺序： 

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})


jQuery加载

jQuery库提供加载功能 in one line： 

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});


动态脚本加载

您可以将带有脚本URL的脚本标签添加到HTML中。为了避免jQuery的开销，这是一个理想的解决方案。

该脚本甚至可以驻留在其他服务器上。此外，浏览器会评估代码。可以将 <head>标记插入网页 </body>中，也可以将其插入到结束 <script>标记之前。

这是一个如何工作的示例： 

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}


此函数将在页面头部的末尾添加一个新的 src标记，其中 my_lovely_script.js属性设置为该函数作为第一个参数给出的URL。

JavaScript Madness: Dynamic Script Loading中讨论和说明了这两种解决方案。

检测何时执行脚本

现在，您必须知道一个大问题。这样做意味着您需要远程加载代码。现代的Web浏览器将加载文件并继续执行当前脚本，因为它们异步加载所有内容以提高性能。 （这适用于jQuery方法和手动动态脚本加载方法。）

这意味着，如果您直接使用这些技巧，则在要求加载新代码后，将无法在下一行使用它，因为它仍将加载。

例如： MySuperObject包含 script.async = false;： 

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

var s = new MySuperObject();

Error : MySuperObject is undefined


然后，您按F5重新加载页面。而且有效！令人困惑...

那么该怎么办呢？

好吧，您可以使用作者在我给您的链接中建议的技巧。总而言之，对于有急事的人，他在加载脚本时使用事件来运行回调函数。因此，您可以将所有使用远程库的代码放入回调函数中。例如： 

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}


然后，在脚本加载到 lambda function中之后，编写要使用的代码： 

var myPrettyCode = function() {
   // Here, do whatever you want
};


然后运行所有这些： 

loadScript("my_lovely_script.js", myPrettyCode);


请注意，脚本可能在加载DOM之后或之前执行，具体取决于浏览器以及是否包含行 。有一个 great article on Javascript loading in general对此进行了讨论。

源代码合并/预处理

正如此答案顶部所提到的，许多开发人员在其项目中使用了诸如Parcel，Webpack或Babel之类的构建/编译工具，从而允许他们使用即将到来的JavaScript语法，为较旧的浏览器提供向后兼容性，合并文件，最小化，执行代码拆分等

关于javascript - 如何在另一个JavaScript文件中包含一个JavaScript文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42279605/

25 4 0
文章推荐： Javascript 插件无法与 Turbolink 一起正常工作
文章推荐： html - div不占全高
文章推荐： javascript - ion-content 的滚动问题
文章推荐： javascript - 数组原型(prototype) TypeScript
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com