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)的更多相关文章

  1. es6+最佳入门实践(14)

    14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...

  2. es6+最佳入门实践(12)

    12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...

  3. es6+最佳入门实践(10)

    10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...

  4. es6+最佳入门实践(9)

    9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...

  5. es6+最佳入门实践(8)

    8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...

  6. es6+最佳入门实践(7)

    7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...

  7. es6+最佳入门实践(6)

    6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.nu ...

  8. es6+最佳入门实践(5)

    5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...

  9. es6+最佳入门实践(4)

    4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...

随机推荐

  1. 販売管理(SD)

    SD(販売管理)系のSAP DBテーブル. 随時更新していきます. [得意先マスタ]KNA1: 一般データ KNB1: 会計データ KNBK: 銀行データ KNVV: 販売データ KNVP: 取引先機 ...

  2. python2.7练习小例子(二十七)

        27):题目:一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同.      #!/usr/bin/python # -*- coding: UTF-8 -* ...

  3. 类 java.util.Collections 提供了对Set、List、Map进行排序、填充、查找元素的辅助方法。

      类 java.util.Collections 提供了对Set.List.Map进行排序.填充.查找元素的辅助方法. 1. void sort(List) //对List容器内的元素排序,排序的规 ...

  4. 【jQuery】 js 对象

    [jQuery] js 对象 一.  创建对象的三种方式 <script> var v1 = new Object(); v1.name = "name1"; v1.a ...

  5. 去掉google play专为手机设计标识

    google play上的应用默认都会有个“专为手机设计”的标识 有时应用明明已经针对平板作了优化,但为什么这个标识还在呢,如何去掉这个标识呢,其实只需要两个步骤就好了: 1. 标记为支持高分辨率 & ...

  6. python下的自动化测试--selenium 验证码输入问题

    之前一直在研究scrapy下数据抓取,在研究ajax数据抓取时碰巧研究了一下selenium,确实很实用,不过只做scrapy下的数据抓取,不怎么合适,一是性能的损耗,一直需要开一个浏览器,二是对于爬 ...

  7. xshell、xftp免费版下载方法

    第一步:进入官站 https://www.netsarang.com/   第二步:选中Free License

  8. linux ----- Vim进入和退出命令

    Vim进入和退出命令     本来不想写任何关于vim的文章的,无奈我今天又忘记怎么退出vim了,常用命令是ESC,然后:wq(保存并退出),:q!(不保存并强制退出),i进入vim模式.另外还有其它 ...

  9. 剑指offer-旋转数组的最小数字06

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...

  10. RMQ问题+ST算法

    一.相关定义 RMQ问题 求给定区间的最值: 一般题目给定许多询问区间. 常见问题:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j之间的最小/大 ...