一、ES6 模块化开发
vue / react / angular
1、前端工程化的第一步
将复杂的功能,拆分成N多个小的功能模块,每一个模块实现自己的独特功能即可
2、案例:
商城系统:饿了么点餐页面 商品展示相关功能 订单展示相关功能 购物车车相关功能
goods.js 对应商品
order.js 订单对应
goodscar.js 购物车
index.js 总的js文件
3、面试题:
模块化发展史:
A、AMD: 提前加载 无论当前用户打开的哪个页面 都会把所有的模块先在加载一遍 N个模块 多个页面
B、CMD: 按需加载 !!!
C、ES6模块化
4、js中如何实现模块编程?
一个页面,将功能分成 N个js ,a.js,b.js,c.js 整合文件 index.js
script a.js
script index.js
==》 依赖太过模糊 无法看出每个文件之间的关系
模块化:
浏览器默认不支持 es6的模块化 ES6老版本IE不支持,开发 环境 转化成能够让浏览器支持的代码
开发环境:webpack 打包工具 ==》 转化成 ES5语法
A、export 导出
B、引用 import 变量名称 from 路径
5、webpack
安装:webpack
Node环境
npm 开源管理工具 资源库 全球性
npm install 下载对应内容
A、确保电脑安装 node node -v
B、通过node安装 webpack npm install webpack@3.0.0 -g
C、输入webpack -v 检测一下
D、npm install -g cnpm --registry=https://registry.npm.taobao.org
E、cnpm淘宝镜像 国内的资源中 npm(开源管理工具)
F、webpack 的配置文件 webpack.config.js
5、搭建目录
build 、build.js
js index.js import a.js export b.js
index.html 打包后的文件
webpack.config.js webpack配置项
在根目录下 打开命令行 webpack
全栈开发:前端+后端 服务器 node.js
二、Node.js
之前js只能写前端,浏览器上
是什么?不是一门语法,js的运行环境。运行在服务器端
为什么?js的进阶内容,大前端的趋势, 更加的贴近于数据
Node 开发 服务器
A、处理静态文件 a.txt
B、与前端进行 写API接口
C、与数据库交互
1、体验node.js
node js文件名
2、处理静态文件
3、启动服务器