2、前端开发的技术体系
2024-02-27 11:00:15 0 举报AI智能生成
前端开发技术体系是构建现代Web应用的核心组成部分。该体系主要包括三大核心内容：HTML、CSS和JavaScript。HTML负责构建页面的结构，使用标签定义元素和文本；CSS则用于描述HTML元素的样式和布局，使其具有美观的视觉效果；JavaScript是实现网页动态交互的关键，可以响应用户操作，处理数据，更新页面内容等。前端开发技术的发展也涌现出一些新型框架和库，如React、Angular和Vue.js等，它们提供了更高效、简洁的开发方式，提升了前端开发效率和用户体验。同时，Webpack等构建工具的应用，可以轻松管理依赖关系、打包优化代码，让前端开发更加便捷。总的来说，前端开发技术体系为构建丰富、交互性强的Web应用提供了强大支持。
作者其他创作
大纲/内容
第一阶段：HTML（5） + CSS（3）
技术要点
HTML5
CSS3
响应式布局（rem/flex/@media等）
Hybrid混合APP开发
微信二次开发
小程序开发
React Native开发
Flutter
uni-app
...
特殊说明
Hybrid、微信开发、小程序开发、React Native开发等，这些都需要有JS和框架编程的基础；H5不仅仅是标签，还需要掌握常用的API以及video和audio等，例如：localstorage、webscoket、getCurrentPosition等
第二阶段：JS包括ES6核心原理
JS堆栈内存
闭包作用域
浏览器词法解析（v8渲染机制原理）
面向对象和THIS处理（主要是独立封装组件和插件，研究常用类库的源码）
ES6基础语法（包括class类的继承封装和多态）
ES6中的Promise（及Promise A+规范）
Generator生成器函数等深入用法
同步异步编程（包括运行机制和微任务、宏任务，以及实战应用）
常用的编程思想和设计模式
函数的防抖和节流
柯理化函数
惰性函数
单例设计模式
发布订阅模式
Promise设计模式等
DOM性能优化（重排和重绘的优化）
DOM事件
前端编程常规算法
去重
冒泡排序
插入排序
快速排序
递归等
第三阶段：AJAX和HTTP
技术要点
ajax原理
ajax异步解决方案（promise）
axios（包括自己封装promise版ajax库）
fetch及封装处理
jquery中的ajax操作和库的封装等
跨域解决方案及实现原理
jsonp
cors
webpack proxy（scoket.io）
document.domain
window.name+iframe
postMessage
、、、等
HTTP报文（常用的响应请求头实战应用技巧）
HTTP（TCP）传输流程（包括三次握手四次挥手及TCP底层协议）
HTTP1和HTTP2的区别
HTTP和HTTPS的区别等
特殊说明
HTTP是目前优秀公司重点考察的知识点，因为传统前端代码优化，性能上提高较小，HTTP相关优化手段是性能提高的重要方法（例如：304缓存、DNS缓存、减少HTTP传输次数和大小、HTTPS的加密等），这块是一个重点！
第四阶段：框架开发
技术要点
vue
vue（MVVM实现的原理以及一些语法实现的原理）
vue-router(HASH路由实现的原理)
vuex（掌握原理）
axios
vue-cli（需要能够修改脚手架的webpack配置项）
iview/vux/vue element等常用框架的使用等
react
create-react-app（能够修改webpack的配置项）
掌握虚拟DOM渲染原理
掌握DOM-DIFF原理
掌握INDEX索引对比机制
掌握MVC实现的原理
react-dom/react-native
react-router
react-redux/dva/mobx（掌握原理，自己可以基于原生JS写一套类似的插件、发现里面的一些不足点）
antd（最好可以自己封装一些基础的组件）等
第五阶段：辅助技能
技术要点
Webpack
掌握常用的脚手架使用和修改，会一些基础的webpack搭建
Git
熟练掌握团队协作开发中代码版本管控技巧，熟悉常用的操作命令
Node
掌握基础的API、掌握express/koa/egg等框架、可以编写伪API，可以基于node做跨域处理等，有精力的同学可以研究一下数据库操作等
Canvas
一些公司要求会可视化，需要掌握canvas/webGl/d3等，这个对于数学结构、算法等有一定的要求；这方面不好的，可以先掌握一些基础的操作，掌握echarts的用法等
常见的技术论坛
掘金：https://juejin.im/
简书：https://www.jianshu.com/
https://segmentfault.com/
https://stackoverflow.com/
https://github.com/
https://developer.mozilla.org/zh-CN/
百度FEX：http://fex.baidu.com/
淘宝FED：http://taobaofed.org/
腾讯：http://alloyteam.com/
360奇舞团：https://75team.com/
凹凸实验室：https://aotu.io/
0 条评论
下一页
