前端知识体系模板课件.pptx

1、前端知识体系演讲人202X-06-0801编程思想前端常用设计模式创建型行为型组合型创建型u工厂模式u单例模式u原型模式前端常用设计模式行为型u观察者模式u迭代器模式u状态模式前端常用设计模式组合型u适配器模式u装饰器模式u代理模式前端常用设计模式编程思想常用架构模式MVCMVPMVVM编程思想编程范式面向对象编程（OOP）面向切面编程（AOP）响应式编程函数式编程程序设计结构化程序 自上向下模块化逐步求精面向对象程序 单一功能原则（S）开放闭关原则（O）里氏替换原则（L）接口隔离原则（I）依赖倒置原则（D）02前端基础前端基础HTML5常见面试题语义标签增强型表单视频、音频Canvas绘图S

2、VG绘图前端基础HTML5Web StorageWebSocket地理定位拖放APIWeb Worker前端基础CSS3常见面试题选择器RGBA和透明度多栏布局多背景图Word Wrap前端基础CSS3文字阴影Afont-face属性B圆角C边框图片D盒阴影E盒子大小F前端基础CSS3ABCD媒体查询语音过渡动画JavaScript常见面试题ES6TypeScriptES6u const、letu class类u 模板字符串u 箭头函数u 参数处理u 字面量加强u 解构赋值u PromiseJavaScriptTypeScriptu类型批注和编译时类型检查u类型推断u类型擦除u接口u枚举Jav

3、aScriptTypeScriptuMixinu泛型编程u名字空间u元组uAwaitJavaScript前端基础W3C标准03后端基础后端基础Node.js网页服务器数据库后端基础Node.jsexpresseggkoa后端基础网页服务器ABCTomcatNginxDocker后端基础数据库ABCDSQLMySQLMongoDBOracle04算法基础算法基础数据结构排序查找算法基础数据结构堆栈队列链表数组树算法基础数据结构哈希表集合算法基础排序插入排序希尔排序冒泡排序快速排序选择排序堆排序算法基础排序基数排序(桶排序)02归并排序01算法基础查找0103顺序查找二分查找插值查找0204050

4、6斐波那契查找树表查找分块查找(索引顺序查找)查找u哈希查找算法基础05网络基础网络基础HTTP 与 HTTPS02Internet协议01三次握手和四次挥手03DNS 域名解析04五类 IP 地址05跨域06网络基础正向代理和反向代理ACDN BHTTP请求CHTTP请求头、响应头DHTTP状态码EHTTP请求优化F06浏览器基础浏览器基础内核兼容性浏览器缓存垃圾回收机制渲染流程07领域分支领域分支移动Web可视化游戏开发便携式设备领域分支移动Web手机、平板应用02小程序03Web网站01领域分支可视化SVGWebGLCanvas 2D领域分支游戏开发Cocos2dEgret Engine

5、领域分支便携式设备手环眼镜08类库框架类库框架开发库UI库图表库图标库类库框架开发库jQueryVue.jsReactAngularThree.jsElectron开发库一jQueryVue.js2.x3.x3.xu setupu reactiveu refu isRefu toRefsu computedVue.js3.xuwatchuLifeCycle Hooksuprovide&injectutemplate refsucreateComponentVue.js开发库一React开发库Angular开发库Three.js开发库Electron类库框架UI库ABCWeb移动端小程序

6、UI库Web移动端小程序UI库WebBootstrapElementMaterial-UIAnt DsignNebularEasyUIWebuVuetifyUI库UI库移动端MUI01Frozen UI02amazeUI03UI库小程序Diview-weappETaro UIA官方WeUI组件库BColorUICVant Weapp类库框架图表库ABCDChart.jsEChartsD3.jsAntV图表库Chart.jsEChartsD3.jsAntV类库框架图标库01IcoMoon02Font Awesome03iconfont04Material Design Icons图标库IcoMo

7、onFont AwesomeiconfontMaterial Design Icons09工程开发工程开发模块化01构建工具04依赖管理02转换器05语言增强03代码质量06工程开发模块化CSS Module01ES6 Module02CommonJS03模块化CSS ModuleES6 ModuleCommonJS工程开发依赖管理npm/cnpmyarn依赖管理npm/cnpmyarn语言增强ucss工程开发语言增强cssless01Stylus03Sass(Scss)02PostCSS04工程开发构建工具Gruntrollup.jsWebpackViteGulp构建工具WebpackVit

8、eGulpGruntrollup.js工程开发转换器BabelTraceur转换器BabelTraceur工程开发代码质量质量检测01单元测试02E2E测试03StyleLint jsJSLintJSHintTSLintESLintSonar 质量检测代码质量单元测试ABCJestKarmaSinon代码质量E2E测试NightwatchCypress10知识进阶知识进阶性能指标评估工具通信安全API风格知识进阶性能指标白屏时间A首屏时间B用户可交互时间C完全加载时间D首字节时间EDNS 解析时间F知识进阶性能指标TCP 连接时间HTTP 请求时间HTTP 响应时间知识进阶评估工具PhantomJSPage SpeedWebPagetestJSPerfChrome dev tools知识进阶通信安全CSPHTTP劫持XSSURL跳转漏洞CSRF知识进阶API风格RESTful API01GraphQL02RPC03感谢聆听