模块化

模块化开发

• 在前端开发中，根据功能越来越多，代码量也会提升会越来越多，只要是代码量多起来，影响文件内容的可读性会变差。
• 然后将代码分隔开，同样的代码量，分成多个文件去书写，好处就是，单一文件的可读性越来越高，所以此时出现了模块化开发
• 就是将我们的功能分成若干个模块，每一个模块书写在不同的文件中，此时形成了一个新的作用域（文件作用域），每一个模块只能使用当前文件内的变量，不能使用是他文件的变量
• 如果你在某一个文件内需要使用另外一个文件内的变量或者函数，那么此时就需要借助模块化的导入与导出

导出

在当前文件中向外部暴露一些数据或者函数

导入

拿到另外一个文件，并且拿到它导出的数据或者函数

要求：

• 1：必须使用服务器启动页面，现在可以借助 live server
• 2：

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

导出语法1

• export default 要导出的数据，这是默认导出，一个页面只能有一个

export default {
    userInfo: info,
    callback: fn
}

导入语法1

• import '变量' from '导入的文件地址'
• 例如

import obj from './a.js'

obj.callback()

导出语法2

• export

导入语法2

• import {导出时候的变量名} from '导入的文件地址'

import{obj} from './b.js'


import { obj, sayHi, arr } from './b.js'
console.log(obj)
console.log(arr)

sayHi()