【JavaScript ：语法】js 中 导入另一个js文件 或者css文件

一、目的

二、解决方法

方法一： 利用可以使用document的js的性质。

1、使用document.write();完成JS的加载,注意加载顺序。

document.write('');

document.write('');

2、使用document.createElement(); 创建JS标签. 完成JS的加载,注意加载顺序。

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

JSElement.setAttribute("type","text/javascript");

JSElement.setAttribute("src","katex.js");

document.body.appendChild(JSElement);

同理，引入css文件的方式：

// js中引入一个css文件

var css = document.createElement('link');

css.rel = 'stylesheet';

css.href = 'https://sdk.militop.com/assets/css/h5sdk.css';

document.head.appendChild(css);

方法二、html中导入

此时浏览器就知道这是一个ES6的模块，并且是异步加载的。script标签在没有添加async或者defer属性的情况下，默认是等到整个页面渲染完成，再执行模块的代码。如果加了async表示模块加载完成就会立即执行。defer属性和默认值一样，都是等到页面渲染完成再执行。

二：使用import引入其它js，在添加了module属性的js代码块/文件里，import module from 'moduleName.js'即可引入一个js文件。

示例：index.js

import header from './header/header.js'

三：在被引入的js文件里，使用 export 输出指定的内容。

示例header.js：

function header() {

console.log("this is header");

}

export default header;

在index.js里边，import进来的header，就是在header.js里边输出的header，它是一个函数，在index.js里边调用的时候，就想调用一个普通函数一样使用就可以。