# 模块化的优势 1.防止命名冲突 2.代码复用 3.高维护性 ES6模块化语法 模块功能有两个命令组成 ## export 和import ## ## export命令用于规定模块的对外接口 ## ## import 命令用于输入其他模块提供的功能 # 分别暴露 ~~~ export let school="尚硅谷"; export function teach(){ console.log("前端开发技能") } ~~~ ## 第二中写法： ~~~ let school="尚硅谷"; function teach(){ console.log("前端开发技能") } export {school,teach}; ~~~ ## 引入：  ## 解析赋值方式引入： ~~~ <script type="module"> import {school,change} from './es6.js' console.log(school) //调用 console.log(change)//调用 </script> ~~~ <br/> # 默认暴露： ## 对象形式，这个用的非常多，在vue里 ~~~ export default{ school:"尚硅谷", change:function (){ console.log("前端开发技能") } } ~~~ ## 引入调用方法： ~~~ <script type="module"> import * as es6 from './es6.js' es6.default.change(); //调用方法 </script> ~~~ ## 默认暴露下的解析赋值方式引入： ~~~ <script type="module"> import {default as es6} from './es6.js' es6.change() //调用 </script> ~~~ ## 简便形式引入 只对默认暴露起作用： ~~~ <script type="module"> import es6 from './es6.js' es6.change() //调用 </script> ~~~ # 使用模块引入的第二个方式： ## 写一个总app.js文件把所有模块引入  ## 用传统引入的方式加载 ~~~ <script src="./app.js" type="module"></script> ~~~