js文件引入方式

142 阅读1分钟

非模块化js文件引入:

1.js内容:
let a = 1;
function fa()
{console.log('111')}

2.js内容:
let b = 2;
function fb()
{console.log('222')}

<body>
    <script src="1.js"></script>
    <script src="2.js"></script>
    
    <script>
      alert(a);
      alert(b);
      fa();
      fb();
    </script>    
</body>

上面这种引入方法比较常用,但其弊端是1.js和2.j中可能会存在重名的变量或者函数,这样就会形成冲突,这叫命名污染,如果引入js很多,就很难控制。比如上面2个js中都定义了let a = 1就会出问题。

模块化引入{ES6模块}:

1.js内容:
let a = 1;
function fa()
{console.log('dddd')}

export default {a,fa}

2.js内容:
let b = 2;
function fb()
{}

export {b,fb}

<body>    
    <script type="module">
        import aaa from './js/1.js'
        import {b,fb} from './js/2.js'
        alert(aaa.a)
        aaa.fa()
        
        alert(b)
        fb()
    </script>
</body>

1、模块化引入js,被引入的js文件,必须暴露变量或者方法,这样才可以通过import方式引入到需要的文件中,即使有重名的变量或者方法在引入的时候也会报错代码无法执行下去

2、暴露有2种方式,export或者export default

3、export暴露的数据引入的时候要名称要和暴露内容一一对应,要用{}来引入,参考上面2.js的定义和引入

4、export default 暴露的数据,引入的时候不需要加{}包裹,可以理解为这样暴露的是一个大对象,引入的时候可以任意命名,然后用对象方式来获取其中的变量或者方法,参考上面1.js的定义和引入即可理解。

5、export暴露还有一种方式是分别暴露:

2.js内容:
export let b = 2;
export function fb()
{}