ES6推出的模块化,使用方式有点类似 require.js,只需要引入一个入口文件即可,其他的js文件可以按功能创建及引入,export 导出方法属性,然后 import 引入使用,这个新特性可能在未来会引来原生开发的热潮,不需要三方框架(vue、react)即可自由使用模块化开发,而且目前浏览器市场快统一了,就连IE也放弃了自己的内核使用google webkit内核了,而且电脑也是默认配备了 IEAdge浏览器,想想就觉得爽。

PS:使用模块化加载,需要服务器环境,也就是得通过 localhost 访问,而且 script 标签也得加上 type="module" 声明

一、基本示例

a.js

export default function a1() {
    console.log('a1')
}

index.html

<script type="module">
import a1 from './a.js'
a1() // a1
</script>

二、解构赋值

c.js

export function c1() {
    console.log('c1')
}

export function c2() {
    console.log('c2')
}

index.html

<script type="module">
import { c1, c2 } from './c.js'
c1() // c1
c2() // c2
</script>

三、js文件引入

a.js

export default function a1() {
    console.log('a1')
}

b.js

import a1 from './a.js'

export default function b1() {
    a1()
    console.log('b1')
}

index.html

<script type="module">
import b1 from './b.js'
b1() // a1, b1
</script>

四、标签引入

d.js

import a1 from './a.js'
a1()

console.log('d1')

index.html

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

综合上述几种情况,是不是感觉同 vuereact 开发使用方式一样,只不过这里需要通过 script 模块类型声明,但要知道这是原生的啊,不用搭建一套脚手架即可直接使用,如果是做一些系统项目话可以考虑直接“上马”。

更多前端知识,请关注小程序,不定期有惊喜!

image.png


anchovy
1.9k 声望89 粉丝