1.前端工程化
工程化其实就是软件工程的一种概念
项目在编写的时候需要注意的一些地方
1.性能
2.稳定性
3.可用性
4.可维护性
以前前端工作模式:
start–>需求讨论–>设计(UI)–>编码–>测试–>运行–>维护–>end
前端工程化:
1.生产效率
2.维护的难易程度
解决方案:
1.制定规范–>CSS BEM规范 css私有化 sass less js 规范:文件的规范
2.模块化和组件化:可维护性强 可复用性强
模块化 组件化
模块化:
esModule commonJS AMD CMD 所谓的模块化的规范:就是如何定义模块 导入模块导出模块 组件:页面上的任何一部分
复用
模块和组件的关系:
多个模块(零件,组件里的一小部分)组合成了一个组件
前端的部署问题:
代码审核 压缩打包 增量更新 webpack browser-server 代码检测工具 做配置 更改代码 显示的页面发生更改
重新打包 单元测试
构建和编译:
构建:build的过程 构建是在编译的基础之上的 编译:开发的过程 单文件的一些编译 浏览器不识别的转成识别的
总结:
前端工程化需要注意的地方?
1.模块化、组件化
2.规范化
3.自动化
4.静态资源管理
2.前端为什么要去做自动化测试?
容易发现问题 UI测试 功能测试 性能测试 页面的一些特性检查
单元测试 集成测试 E2E测试(端到端测试)
3.jest的基本介绍及原理
安装jest:
npm run test
1.如果需要测试ES6的module模块化的一些东西时, 必须安装@babel/core @babel/preset-env jest@24.8.0 -D
2.与package.json文件同级目录创建.babellrc文件 配置代码如何
当你在运行jest的时候, jest会自动检测到.test的后缀名进行检测
jest里常用的匹配器:
1. toBe:测试数字 测试预期结果与测试结果是否一致 底层ES6 Object.is() 判断对象中的地址是否一致
2. toEqual:测试对象中的值是否与测试结果一致 not toHaveLength:判断字符串或者数组的长度
3. toMatch:值是个正则表达式 匹配字符串中是否存在某个字符