码迷,mamicode.com
首页 > 其他好文 > 详细

es6+最佳入门实践(13)

时间:2019-02-09 22:41:34      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:推荐   3.3   fun   准备   3.1   入门   方式   管理   视频教程   

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)

标签:推荐   3.3   fun   准备   3.1   入门   方式   管理   视频教程   

原文地址:https://www.cnblogs.com/dadifeihong/p/10358141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!