es6+最佳入门实践(13)
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)
