【0.6 - 前端基础】export模块化开发

目录

0.前端基础

【0.1 - 前端基础】前端开发，工具推荐与环境搭建
【0.2 - 前端基础】Node.js安装与简单使用
【0.3 - 前端基础】NPM包管理器常用命令
【0.4 - 前端基础】ES6简单了解，var、let、const的区别
【0.5 - 前端基础】Babel转码器
【0.6 - 前端基础】模块化开发
【0.7 - 前端基础】Webpack打包
【0.8 - 前端基础】Mock实现模拟数据

简介

因为前端业务也在不断的增大，所以无论是在管理还是切分角度出发，模块化都是必需的选择。

但是，JavaScript不是一种模块化编程语言，它并没有类或者包的概念。

所以，对此，JavaScript制定了模块化规范：CommonJS模块化规范、ES6模块化规范。

CommonJS模块规范

每个文件就是一个模块，通过导出，提供给其它模块使用。

例如：

//拟定该js文件名为：导出.js
//定义一个方法
const sum = function(a,b){
	return a + b
}
//导出该模块的成员（即方法）
module.exports = {
	sum:sum
}
//简写
module.exports = {
	sum
}

//拟定该js文件名为：导入.js
//通过require导入模块
const mod = require('./导出.js')
//测试结果
console.log(mod.sum(1,2))

ES6模块化规范

ES6主要使用export导出模块，import导入模块。

例如：

//拟定该js文件名为：导出.js
//定义一个方法
export function sum(a,b){
	return a + b
}

//方式一：拟定该js文件名为：导入.js
//导入模块
import {sum} from './/导出.js'
//测试结果
console.log(sum(1,2))

//方式二：拟定该js文件名为：导入.js
//导入模块，别名自己定义
import num from './/导出.js'
//测试结果
console.log(num.sum(1,2))