前端学习梳理——wsdchong
前端学习梳理
前言
最近学习了一部分前端内容,今天重新梳理一下。
主要借鉴的书有《前端技术架构与工程》、《大前端入门指南》、《vue.js从入门到项目实战》、《springboot+vue全栈开发实战》;
《前端技术架构与工程》从架构师的角度讲解了前端技术的前因后果以及工程化思想;值得反复阅读。里面讲技术架构和工程服务体系时归纳知识十分到位。
《大前端入门指南》蜻蜓点水地讲了前端的基础(HTML+CSS+JavaScript)和常用框架(RN、微信小程序、Flutter)。可以作为字典书,便捷地找到前端的常用知识点。
《vue.js从入门到项目实战》虽然很大部分和官网差不多,但是这本书的学习建议和最后的四个项目实战还是挺有用的,可以帮助vue的入门,同时也可以作为vue的字典书。
《springboot+vue全栈开发实战》借鉴其前后端分离开发网站的过程。本来是想用node后端和前端联系起来,但是我毕业设计是用Java做的后端。暂时还是以Java后端作为主体,联系前端。
主要借鉴的文章有:
Java开源项目之「自学编程之路」:学习指南+面试指南+资源分享+技术文章 里面有超多有价值的技术文章,值得反复阅读。
你们要的前端学习路线,我搞来了! 里面将的东西很清晰,我打算参考他的内容规划我的前端技术栈。我之前的技术栈感觉太宽泛了,只是简单分类,各部分联系有断层的感觉,突出不了主体。但是这篇文章的思路值得借鉴。
A Recap of Frontend Development in 2019 里面讲述了前端的发展趋势,有借鉴意义。毕竟总不能学好框架后,这框架就过时了。
文章目录
- 前端学习梳理
- 前言
- 梳理思路
- 学习目的
- 学习路线
- 1三大件
- HTML5
- CSS3
- JavaScript
- 2浏览器&计算机基础
- 浏览器
- 计算机基础
- 3库工具
- 4前端框架
- 5前端工程化
- 6性能优化
- 学习途径
- 题外话
- 前端的优势有哪些
- 前端如何做好前端
- 前端如何学习
- 前端有什么趋势
- 总结
梳理思路
分三部分:学习目的、学习路线、学习途径。
学习目的是学以致用。明白学到内容在哪里可以用到,能产生多大效益。
学习路线里参考了你们要的前端学习路线,我搞来了! ,把重要的版块罗列出来,之前我弄的前端学习路线不够明确,几个版块之间联系不合理。
在新的版块里,把前端知识做六部分进行学习。分别是三大件、库工具、前端框架、浏览器&计算机基础、工程化、性能优化。其中三大件和浏览器&计算机基础是基础,虽然开发常用框架,但是框架基于基础推演的;库工具和前端框架是应用,开发所常用的;工程化和性能优化是提高效率和提高性能的重要能力,是高手所需要精通的。
学习路径根据参考你们要的前端学习路线,我搞来了! 写出的学习路线,然后根据知识点找看官网、博客和书籍(如《大前端入门指南》的前三章、《vue.js从入门到项目实战》的前六章)。
学习目的
学习要学以致用,学习前端要明白学到内容在哪里可以用,能产生多大效益,不能只管学,不管用,知其然不知其所以然。
前端脱胎于做网站,做网站的流程有:策划、设计、开发、测试、部署、发布;对应需要的人员有架构师、产品经理、设计师、前端开发工程师、后端开发工程师、测试人员、运维人员;学习前端虽然不用面面俱到,但是为了前后衔接工作顺利,对各方面的工作有一个初步了解是有必要的。
学习是为了做一件事、做好一件事。
前端在其中要做好的事是:技术上做到高性能、安全,工程上做到规范、效率。
要做好这些事,就需要先做出来,然后做好、做快。
做出来:HTML、CSS、JavaScript;
做好:jQuery(操作DOM)、前端框架vue(虚拟DOM)、性能优化;
做快:工程化
学习路线
1三大件
HTML5
- HTML语义化
- 常用标签
- div
- 本地储存
CSS3
- 选择器
- 属性
- 样式
- 盒模型
- 布局:定位、浮动、溢出、弹性盒子
- 响应式布局
JavaScript
- 类型转换
- 闭包
- this
- 作用域链
- 原型链以及继承
- 设计模式
2浏览器&计算机基础
浏览器
- 浏览器的大致架构
- 浏览器的兼容性
- 浏览器中JavaScript的执行机制
- 页面渲染原理
- 浏览器安全问题
- 浏览器为什么会跨域
计算机基础
- HTTP与HTTPS
- 三次握手和四次挥手
- CDN的作用与原理
3库工具
- jQuery:降低开发者操作DOM的复杂度
4前端框架
- 响应式
- virtual DOM
- 前端路由
- diff算法
- 渲染
5前端工程化
- 模块化:JavaScript、CSS、资源
- 组件化:模板HTML+样式CSS+逻辑JS
- 规范化:编码规范、接口规范
- babel:下一代JavaScript语言的编译器
- ESLint:JavaScript代码检查工具
- mock.js:通过随机数据,模拟各种场景,使前端工程师独立于后端进行开发。
- webpack、Nginx、git
6性能优化
- 前端性能衡量指标、性能监控
- 网站优化方案
- vue的性能优化方案
- 网络层面的优化方案
- 页面渲染层面的优化方案
- 白屏的优化方案
学习途径
三大件:通过参考菜鸟教程和《大前端入门指南》的前三章;
浏览器&计算机基础:通过参考《前端技术架构与工程》第六章;
库工具:不主要了解;
前端框架:参考《前端技术架构与工程》的第二章
工程化:参考《JavaScript设计模式》、《前端技术架构与工程》的第三、四章;
性能优化:参考《前端技术架构与工程》第二、六章;
感觉性能优化和浏览器&计算机基础这两部分有些内容重合了,不过要写还是一块写。
题外话
前端的优势有哪些
首先是WebApp,网站的功能更加强大,慢慢开始与桌面应用争锋;
然后就是跨平台,一套代码,多端运行。
前端如何做好前端
提高可复用性:用框架(vue)、用工具(npm、vue CLI、vue Router、VueX)、用组件(Swiper)、用库(Font Awesome);便于开发;
提高规范性:统一接口(命名、目录结构)、代码风格;便于维护和升级;
性能优化:网站优化、vue优化、网络层面优化、页面渲染层面优化、白屏优化;
前端如何学习
我觉得学习前端不能只放在前端这个小范围,应该把学习范围扩大到从业务到网站开发这么一个范围来,这样才能明白自己做什么,怎么去做好。
学习前端要同时了解策划、设计、前后端开发、测试、部署、工程化;
策划部分要了解软件工程的需求分析、设计、开发、测试、交付;
设计部分要了解概要设计、详细设计;
测试部分要了解单元测试、集成测试、黑盒、白盒、测试案例;
部署要了解Linux、Docker;工程化要明白git、架构;
整个过程以业务为核心。
了解完这些,把精力放到开发部分,特别是后端开发,前端为后端服务。要明白数据库、服务器、前端之间的关系;
了解完上述的才算对前端有了一个初步的定位。之后就是专精前端,做好前端。
做好前端,首先需要把握住前端的两头,一头是基础(HTML+CSS+JavaScript)、一头是应用(vue+elementUI);用基础理解应用,用应用实践基础;
然后是把握工程化,能够规范地进行开发;
最后是把握性能优化,使做出的前端性能优异。
前端有什么趋势
- 2019年流行前端框架和库的npm下载:react、jQuery、angular、vue;
- WebAssembly 成为了继 HTML、CSS 和 JavaScript 之后的第四大Web语言
- TypeScript 的使用激增:许多开发人员为之倾倒
- 可访问性和国际化变得越来越重要
- Flutter 突飞猛进地发展,作为构建跨平台移动应用的另一个绝佳选择向 React Native 发起了挑战
- 静态网站的使用仍在持续,开发人员开始采用 JAMStack
- PWA的增长和采用有所增加
- CSS-in-JS的发展势不可挡
- VS Code是文本编辑器市场上的主宰
总结
后期再完善吧,今天先到这,明天把握住两头,了解工程化和性能优化。
内容不一定对,请辩证认知。
更新地址:GitHub
更多内容请关注:CSDN、GitHub
前端学习梳理——wsdchong相关推荐
- react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
- 如何学习前端开发,有哪些前端教程,前端学习路线图?
也许你现在还是刚接触web前端,也许你现在是个初级的web前端开发工程师,相信每个人心中都希望自己kke可以成为一个优秀的前端go工程师 起步阶段 1.基本知识的掌握 在梳理的知识架构中,按照分析的两 ...
- 一个声称南方985普通学生,前端学习10个月,秋招斩获字节跳动offer的分享!
0. 我的秋招经历 题主基本情况,南方普通985普通学生,接触前端十个月左右,今年 8 月后开始正式准备秋招. 说起我的秋招,一个词,就是"逆袭".一开始,华为笔试没过,三七互娱笔 ...
- 现在加入Web前端学习还有市场吗?自己是否适合学习前端
现在市场上对于初级前端并不友好,直接可以这么说,一个实习前端,初级前端,你去面试,竞争力是非常非常大的!不要以为你学好了三剑客,你就可以拿个什么5.6千,甚至7.8千,尤其是即将毕竟的计算机学生,千万 ...
- 2020最新版前端学习路线图--让前端学习变得美如画
前端学习路线是螺旋上升的,前端学习需要耗费的时间和精力不比其他编程的少,由于前端稳健性的特点,使其成为大多数企业开发的刚需编程语言. 在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎 ...
- web前端学习路线-20个真实web开发项目集合
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
- web前端学习路线(含20个真实web开发项目集合)
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
- web前端学习之前端重构方案,来了解一下
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希 ...
- 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
最新文章
- char [] 和 char * 区别
- jsonStore加载远程和本地数据实例
- Map的Value值转换为List集合
- 九、N-gram语言模型
- 《微服务设计》(三)---- 集成
- poj1419 Graph Coloring 最大独立集(最大团)
- compress命令--Linux命令应用大词典729个命令解读
- java socat_socat安装使用方法
- react native ios 上架
- (转)Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例
- SVG.属性(各种)
- c++ 深度拷贝和浅度拷贝
- visio中画细箭头
- 【源码阅读 | 03】only-allow 统一规范团队包管理器
- OpenVINO常用PythonAPI详解与演示
- MNN推理引擎最新实测,CPU、GPU性能全面领先!
- OA办公系统是如何提升企业办公效率的?
- 双击Google Earth没有反应解决办法
- U盘硬件设备怎么连接计算机,电脑无法识别u盘设备怎么解决?电脑怎么样才能识别u盘设备...
- 亚马逊测评培训,那些你不知道的事