前端学习梳理

前言

最近学习了一部分前端内容,今天重新梳理一下。

主要借鉴的书有《前端技术架构与工程》、《大前端入门指南》、《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 里面讲述了前端的发展趋势,有借鉴意义。毕竟总不能学好框架后,这框架就过时了。

梳理思路

分三部分:学习目的、学习路线、学习途径。

学习目的是学以致用。明白学到内容在哪里可以用到,能产生多大效益。

学习路线里参考了你们要的前端学习路线,我搞来了! ,把重要的版块罗列出来,之前我弄的前端学习路线不够明确,几个版块之间联系不合理。

在新的版块里,把前端知识做六部分进行学习。分别是三大件、库工具、前端框架、浏览器&计算机基础、工程化、性能优化。其中三大件和浏览器&计算机基础是基础,虽然开发常用框架,但是框架基于基础推演的;库工具和前端框架是应用,开发所常用的;工程化和性能优化是提高效率和提高性能的重要能力,是高手所需要精通的。

学习路径根据参考你们要的前端学习路线,我搞来了! 写出的学习路线,然后根据知识点找看官网、博客和书籍(如《大前端入门指南》的前三章、《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

更多内容请关注:CSDNGitHub

Logo

前往低代码交流专区

更多推荐