目录
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))