飞码网-免费源码博客分享网站

点击这里给我发消息

如何在另一个JavaScript文件中包含一个JavaScript文件?|-Javascript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

问:

在JavaScript中是否有类似于CSS中的@import的东西,允许你在另一个JavaScript文件中包含一个JavaScript文件?

答:

旧版本的JavaScript没有import、include、require,所以针对这个问题开发了很多不同的方法。

但是从2015年(ES6)开始,JavaScript已经有了ES6模块标准,可以导入Node.js中的模块,这也是大多数现代浏览器所支持的。

为了兼容旧的浏览器,可以使用Webpack和Rollup等构建工具和/或Babel等转置工具。

ES6模块

ECMAScript (ES6)模块在Node.js中从8.5版本开始就被支持了,有--实验模块标志,至少从Node.js 13.8.0版本开始没有这个标志。要启用 "ESM"(相对于Node.js之前的CommonJS风格的模块系统["CJS"]),你可以在package.json中使用 "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模块

从Safari 10.1、Chrome 61、Firefox 60和Edge 16开始,浏览器已经支持直接加载ECMAScript模块(不需要Webpack等工具)。在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);
}

浏览器中的动态导入

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

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

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还打开了漏洞,黑客和安全问题的大门。

获取加载

与动态导入一样,您可以fetch使用承诺通过调用来加载一个或多个脚本,以使用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的库提供加载功能在同一行:

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

动态脚本加载

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

该脚本甚至可以驻留在其他服务器上。此外,浏览器会评估代码。该<script>标签可以被注入或者网页<head>,或者只是收盘前插入</body>标签。

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

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)
}

此函数将<script>在页面头部的末尾添加一个新标签,其中该src属性设置为作为第一个参数提供给该函数的URL。

检测何时执行脚本

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

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

例如:my_lovely_script.jscontains MySuperObject

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函数中之后,编写要使用的代码:

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

然后,您运行所有这些:

loadScript("my_lovely_script.js", myPrettyCode);

请注意,脚本可能在加载DOM之后或之前执行,具体取决于浏览器以及是否包含line script.async = false;

源代码合并/预处理

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

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()
内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: