JavaScript模塊化規範
1.模塊化概述
2.有哪些模塊化規範
3.導入導出的概念
4.CommonJS規範
可以安裝兩個vscode插件：
1. Code Runner:安裝後可直接運行js文件，如在打開的index.js文件右鍵點擊Run Code 即可在終端查看運行結果
2. Live Server:安裝後可直接在瀏覽器端預覽頁面效果，如在index.html文件右鍵點擊Open With Five Server 即可在瀏覽器端瀏覽該頁面
運行js文件方法：
1方法一. 把需要運行的index.js文件改成index.mjs，再定位到index.mjs,右鍵點擊Run Code，即可運行
2方法二. 當前目錄新增package.json文件，在文件中添加語句{"type": "module"},再定位到index.js,右鍵點擊Run Code，即可運行
3方法三. 新建index.html文件，在改文件中引入index.js, 如<script type="text/javascript" src="./index.js"></script> 再右鍵 Open With Five Server
注意： type="text/javascript" 需改成type="module" 
5.ES6模塊化規範
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./index.js"></script>
<button id="btn" class="btn">導入模塊</button>
</body>
</html>
2.index.js
// 1.導入全部
// import * as school from "./school.js";
// 2.命名導入(分別導出和統一導出可以使用這種方式，默認導出不行)
// import { name as schoolName, slogan } from "./school.js";
// console.log(schoolName);
// console.log(slogan);
// 3.默認導入(默認導出的數據可以在導入頁面隨意起一個變量名接收)
// import school from "./school.js";
// console.log(school )
// 4.命名導入和默認導入可以同時使用
import getTel, { age, name, slogan} from "./school.js";
// console.log(age, name, slogan);
// console.log(getTel());
// 5.動態導入
// const btn = document.getElementById('btn');
// btn.onclick = async()=> {
// const result = await import('./student.js')
// console.log(result);
// }
// 6.import 可以不接收任何數據
// import "./school.js";
// 模塊化可以解決:1.全局污染問題 2.依賴混亂問題 3.數據安全問題
import {sum, increment} from "./data.js"
console.log(sum)
increment()
increment()
console.log(sum)
3.school.js
// 1.分別導出：
// // 導出name
// export let name = { str: '尚硅谷' }
// // 導出slogan
// export const slogan = "天下沒有難學的技術"
// // 導出getTel
// export function getTel() {
// return '010-56253825';
// }
export let age = 18
// 2.統一導出：
// 導出name
let name = { str: '尚硅谷' }
// 導出slogan
const slogan = "天下沒有難學的技術"
// 導出getTel
function getTel() {
return '010-56253825';
}
export { name,slogan }
// module.exports = { name,slogan,getTel }
// 3.默認導出
// export default getTel
// export default {a:2}
export default getTel4.student.js
const name = '李四'
const motto = '明天會更好'
function getTel() {
return '13305791234'
}
module.exports = { name,motto,getTel }
// export { name, motto, getTel }5.data.js
let sum = 1
function increment() {
sum += 1
}
export {sum, increment}6.AMD模塊化規範
引用：
導出：
導入：
7.CMD模塊化規範
導出：
導入：
使用：
