# 模塊化的優勢 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> ~~~