目錄
- 1. 簡介
- 2. CommonJS規范
- 3. ES6模塊化規范
- 寫法一
- 寫法二（推薦）
1. 簡介
隨著網站逐漸變成”互聯網應用程式”，嵌入網頁的Javascript代碼越來越龐大，越來越復雜，
Javascript模塊化編程，已經成為一個迫切的需求，理想情況下，開發者只需要實作核心的業務邏輯，其他都可以加載別人已經寫好的模塊，但是，Javascript不是一種模塊化編程語言，它不支持”類”（class），包（package）等概念，也不支持”模塊”（module），
因此引入了兩種模塊化規范：
CommonJS模塊化規范ES6模塊化規范
2. CommonJS規范
每個檔案就是一個模塊，有自己的作用域，在一個檔案里面定義的變數、函式、類，都是私有的，對其他檔案不可見，
CommonJS使用 exports 和 require 來匯出、匯入模塊
專案結構：
首先創建四則運算.js，作為工具類來使用，其中定義四個方法，然后匯出所有方法
//四個方法
const sum = function (a, b) {
return a + b
}
const sub = function (a, b) {
return a - b
}
const mul = function (a, b) {
return a * b
}
const div = function (a, b) {
return a / b
}
//匯出
// module.exports = {
// sum: sum,
// sub: sub,
// mul: mul,
// div: div
// }
//可簡寫成
module.exports = {
sum,
sub,
mul,
div
}
然后創建test.js引入上述模塊測驗
const fun = require('./四則運算.js');
console.log(fun.sum(1,2));
console.log(fun.sub(1,2));
console.log(fun.mul(1,2));
console.log(fun.div(1,2));
運行程式測驗
3. ES6模塊化規范
ES6使用 export 和 import 來匯出、匯入模塊，
寫法一
專案結構：
首先創建工具.js，作為工具類來使用，其中定義并匯出兩個方法
export function get(){
console.log("獲取");
}
export function save(){
console.log("保存");
}
然后創建工具.js，用來匯入上述方法并測驗
//匯入方法
import {get,save} from './工具.js';
get();
save();
運行測驗：發現報錯了
這是因為nodejs默認不支持es6的import語法，我們需要用Babel轉換成ES5語法再執行
初始化專案成一個nodejs專案
npm init -y
撰寫.babelrc組態檔
{
"presets": ["es2015"],
"plugins": []
}
然后安裝轉碼器，在專案中安裝
npm install --save-dev babel-preset-es2015
然后就可以進行轉碼，我們將在專案根目錄下創建src目錄，然后將測驗.js和工具.js移入，再輸入如下命令轉碼
babel src -d dist
然后打開新生成dist/測驗.js運行測驗
成功顯示結果！
寫法二（推薦）
工具.js修改為：
export default {
get() {
console.log("獲取");
},
save() {
console.log("保存");
}
}
測驗.js修改為：
//以物件形式匯入
import tool from './工具.js';
tool.get();
tool.save();
然后同樣進行轉碼執行即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/265406.html
標籤：其他
上一篇：守護白起
下一篇：vue中axios的封裝使用