es6+最佳入门实践(13)

Posted 2021-02-08 dadifeihong

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