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

 

一、目的

 

二、解决方法

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

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

document.write('<script src="katex.js" type="text/javascript" charset="utf-8"></script>');
 
document.write('<script src="auto-render.min.js" type="text/javascript" charset="utf-8"></script>');

 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中导入<script>的方式来导入js文件。或者通过include.js文件中包含需要的js文件解决问题。

 

方法三、ES6标准下加载js的方式

一：script标签需要加入type属性，值为：module.

示例index.html：

<script type="module" src="./js/index.js"></script>

此时浏览器就知道这是一个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里边调用的时候，就想调用一个普通函数一样使用就可以。