es6+最佳入門實踐(13)
13.1.什麽是模塊化
模塊化是一種處理復雜系統分解為更好的可管理模塊的方式。通俗的講就是把一個復雜的功能拆分成多個小功能,並且以一種良好的機制管理起來,這樣就可以認為是模塊化。就像作家把書分成很多章節來寫一樣,程序員寫代碼分模塊來寫也是一種良好的習慣。從本質上來講,一個模塊就是一堆代碼而已
使用模塊化方式寫代碼,有非常多的優點,例如,可維護性好、避免全局變量汙染、可復用性好等,下面我們來看看es5中如何實現模塊化封裝
var module1 = (function () { var _count = 0 var fn1 = function () { alert(_count) } var fn2 = function () { console.log(_count) } return { fn1: fn1, fn2: fn2 } })() module1.fn1() //0 module1.fn2() //0 console.log(module1._count); //undefined
13.2.環境準備
在具體寫測試demo之前,我們需要準備一下環境
1.進入到項目目錄,初始化項目
npm init -y
2.安裝webpack和webpack-cli
npm install webpack webpack-cli -D
這裏“-D”是“--save-dev”的簡寫
3.安裝babel
npm install babel-core babel-loader babel-preset-env --save-dev
4.配置babel, 在項目目錄下新建.babelrc文件,然後輸入
{
"presets": ["env"]
}
4.測試環境是否成功,在項目下新建index.js,寫入代碼
()=>{console.log(1)}
5.使用webpack打包
./node_modules/.bin/webpack --mode development
13.3.export命令和import命令
模塊功能主要由兩個命令構成:export和import。export命令用於規定模塊的對外接口,import命令用於輸入其他模塊提供的功能。通俗的講export用來導出內容,import用來引入內容
1.導出和導入變量
我們新建一個modules目錄,在下面新建一個文件a.js寫相關代碼
//導出變量 let username = ‘xiaoqiang‘ let password = ‘123‘ export {username, password}
在index.js文件中引入a.js模塊代碼
//導入變量
import {username,password} from ‘./modules/a.js‘
console.log(username, password)
2.導入和導出函數
//導出函數
export function hello() {
return "hello nodeing"
}
//導入函數
import {hello} from ‘./modules/a‘
console.log(hello())
3.導入和導出類
//導出一個類
export class hello{
fn(){
console.log(‘hello world!!!‘)
}
}
//導入一個類
import {hello} from ‘./modules/a‘
console.log(hello)
let obj = new hello()
obj.fn()
註意1: 不要直接導出一個值
export 1 //錯誤
let m = 20
export m //錯誤
註意2: 不要直接導出函數或者類
function fn(){}
export fn
class hello{}
export hello
註意3: export語句要在模塊最頂層,放在塊級作用域內會報錯
{
export let a=10 //報錯
}
註意4: 可以批量接收導出的內容
//導出變量、函數、類
export class hello{
fn(){
console.log(‘hello world!!!‘)
}
}
export let A = 10
export function Fn() {
console.log(111)
}
//批量導入內容,所有的變量 類 函數等都掛載到amodule身上
import * as amodule from ‘./modules/a‘
console.log(amodule.A, amodule.Fn, amodule.hello)
13.3.export default命令
從前面的例子中,我們需要思考一個問題,每次使用一個模塊的時候,我們都需要知道這個模塊裏面到底有哪些變量、函數、類,我們要根據這些類名來導入,這樣方便麽?為了更方便的寫代碼,我們可以使用export default命令,為模塊指定默認輸出
//默認輸出變量
let a = 10
export default a
註意: 不要寫成這樣
export default let a = 10 // 報錯
//導入模塊
import aa from ‘./modules/a‘
console.log(aa)
使用export default命令導出,再導入的時候不用加括號{}, 名字可以自定義了
推薦的模塊導入導出方式:
//導出內容
let a = 10
function Fn() {
console.log(111)
}
class Hello{
Fn2(){
console.log(111)
}
}
export default {
a,
Fn,
Hello
}
//導入內容
import aa from ‘./modules/a‘
console.log(aa)
視頻教程地址:http://edu.nodeing.com/course/50
es6+最佳入門實踐(13)