百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

2021前端开发学习流程

itomcoil 2025-02-28 16:09 21 浏览

开始

掌握一个好的学习方法可以让学习事半功倍,今天我就给大家介绍一个,经过无数小伙伴验证,无比顺滑的前端开发学习路径。

学习流程可以分为两个层级,第一层级完成之后,在校学生可以初步达到找实习工作的要求。如果是社招,那么还需要完成第二个层级的学习,才能达到就业水平。

下面我会详细介绍一下两个层级的详细学习流程,以及每一个阶段要达到的目标,走起~

第一层:基础知识

第一步:html与css基础

html与css是前端最基础的技能,这个阶段大家要达到可以独立还原设计稿的能力。不管是电脑端的设计稿,还是手机端的设计稿,或者是已经上线的成品页面,只要看到效果,就能知道通过什么样的页面布局可以达到这个效果。

这个是前端工程师的基本功,后面我们要学习的大部分内容,也都是需要这个基本功来支撑的。不过本阶段难度并不高,大家只要真正动手完成两张设计稿即可(一张电脑端,一张手机端)。

第二步:JavaScript基础

JavaScript是前端的根基,要想在前端的道路上走得更远,必须要有一个坚实的JavaScript基础,但是这也导致好多学习中的小伙伴卡在了这个学习阶段。其实初学前端,JavaScript并不需要掌握得太深,够用就行。

数据类型、变量、控制流程、内置对象、DOM基础、BOM基础,了解这些知识时候,再做一些简单的网页效果,例如轮播图,选项卡之类的功能,就够用了。

像内存机制,闭包,作用域链,原型等等这些,对于初学者一听就头大的知识点,完全可以放在第二层级来学习,因为这部分内容会与不会,是不影响大家做项目的。

第三步:Node与npm

有了第一步和第二步的基础,小伙伴们的知识体系开始逐渐形成,当前,我们的目标只有一个,那就是独立完成项目。与这个目标不搭边的知识点,全都放到第二个层级去学习。

所以在这里,对于Node有一个简单的了解就可以了,npm可以使用常用命令即可。

第四步:Vue或React

Vue和React如何选择,其实区别不大,掌握了一个,再去学第二个就很容易了,如果有选择恐惧症,那么掏出一枚硬币,正面学习Vue,背面学习React就可以了。关于vue和react的称呼,以下我们都叫它MVVM框架

线上其实有很多教程,除了讲解MVVM框架的使用方法,还会讲解【双向数据绑定原理】【虚拟DOM与diff算法】等等进阶的知识点,弄得小伙伴们痛不欲生,其实学习初期,这些是可以完全不学的,本着我们上一步的原则,一切学习都以独立完成项目为目标。

所以在这个阶段,掌握MVVM的基础语法,了解如何操作文本和属性,了解如何绑定事件,如何控制列表和条件,基本上就够用了,如果在开发项目的过程中遇到一些不会的知识,回头再补齐就行。

第五步:前后端数据交互

在这一阶段,大家要开始接触后台的知识了,因为我们的实训项目肯定是需要有后台的,所以我建议大家可以用node,或Koa,再或是用基于koa的Egg框架搭建一个web服务器。然后用MVVM框架结合axios去实现前后台数据的交互。

第六步:项目实践

最后一步就是利用前五步学习的知识独立完成一个项目,项目可以是一个个人博客,或者是一个内容管理系统(CMS),也可以是其他的一些自己感兴趣的项目,不管怎样,项目完成度一定要高,面试的时候,这个项目是可以展示给别人看的。

通过上面六步,我们的第一层级学习任务就完成,然后便可以开始进入第二层级的学习。

第二层级:进阶技能

第一步:JavaScript进阶

在第二层级,我们不只要实现功能,还要知道功能为什么能被实现,所以,在第一层级中我们提到的JavaScript内存机制,闭包,作用域链,原型等等这些概念,到现在这个阶段应该开始着手学习了。

除了上述语法特性,ES2015新增的语法特性也需要掌握,比如什么时候使用let,什么时候使用const,结构赋值,箭头函数与普通函数的区别,都要深入理解。Promise对象,Async函数这些解决异步问题的方案要懂。Set,Map这些新增的数据结构也要会用,所有的语法特性,都要系统的过一遍,千万不要在面试题的时候,别人说了一个自己完全没有听过的概念,那就尴尬了。

第二步:MVVM框架原理

同样,MVVM框架在这个阶段也不能仅仅停留在会用的阶段,数据的双向绑定原理,虚拟DOM与diff算法,为什么循环要加key,生命周期的详细过程,watch与computed的区别,等等这些都是面试极容易问的问题。一定都要掌握了才行。

第三步:横向扩展技能树

各种小程序,uniapp,react-native,flutter,还有层出不穷的新技术,这些都要适当地去了解,不一定都要会用,但是最起码要知道他们都是干嘛的,都解决了什么问题。

第四步:数据结构与算法

这里主要针对的是跨专业的小伙伴,因为计算机专业的小伙伴们在学校一定会学习数据结构与算法的课程,对于【时间复杂度】【空间复杂度】【栈】【队列】【树】【图】,还有常见的【排序算法】和【查找算法】肯定是有一定理解的。但是对于跨专业的小伙伴,上面的内容可能完全不理解,甚至都没有听说过,所以,如果是为了在激烈的社招竞争中找到一份适合自己的工作,上面用方括号列举的内容,还是要补一补的。

写在最后

这就是今天的全部内容了,感谢大家的关注与支持。

相关推荐

Python Qt GUI设计:将UI文件转换Python文件三种妙招(基础篇—2)

在开始本文之前提醒各位朋友,Python记得安装PyQt5库文件,Python语言功能很强,但是Python自带的GUI开发库Tkinter功能很弱,难以开发出专业的GUI。好在Python语言的开放...

Connect 2.0来了,还有Nuke和Maya新集成

ftrackConnect2.0现在可以下载了--重新设计的桌面应用程序,使用户能够将ftrackStudio与创意应用程序集成,发布资产等。这个新版本的发布中还有两个Nuke和Maya新集成,...

Magicgui:不会GUI编程也能轻松构建Python GUI应用

什么是MagicguiMagicgui是一个Python库,它允许开发者仅凭简单的类型注解就能快速构建图形用户界面(GUI)应用程序。这个库基于Napari项目,利用了Python的强大类型系统,使得...

Python入坑系列:桌面GUI开发之Pyside6

阅读本章之后,你可以掌握这些内容:Pyside6的SignalsandSlots、Envents的作用,如何使用?PySide6的Window、DialogsandAlerts、Widgets...

Python入坑系列-一起认识Pyside6 designer可拖拽桌面GUI

通过本文章,你可以了解一下内容:如何安装和使用Pyside6designerdesigner有哪些的特性通过designer如何转成python代码以前以为Pyside6designer需要在下载...

pyside2的基础界面(pyside2显示图片)

今天我们来学习pyside2的基础界面没有安装过pyside2的小伙伴可以看主页代码效果...

Python GUI开发:打包PySide2应用(python 打包pyc)

之前的文章我们介绍了怎么使用PySide2来开发一个简单PythonGUI应用。这次我们来将上次完成的代码打包。我们使用pyinstaller。注意,pyinstaller默认会将所有安装的pack...

使用PySide2做窗体,到底是怎么个事?看这个能不能搞懂

PySide2是Qt框架的Python绑定,允许你使用Python创建功能强大的跨平台GUI应用程序。PySide2的基本使用方法:安装PySide2pipinstallPy...

pycharm中conda解释器无法配置(pycharm安装的解释器不能用)

之前用的好好的pycharm正常配置解释器突然不能用了?可以显示有这个环境然后确认后可以conda正在配置解释器,但是进度条结束后还是不成功!!试过了pycharm重启,pycharm重装,anaco...

Conda使用指南:从基础操作到Llama-Factory大模型微调环境搭建

Conda虚拟环境在Linux下的全面使用指南:从基础操作到Llama-Factory大模型微调环境搭建在当今的AI开发与数据分析领域,conda虚拟环境已成为Linux系统下管理项目依赖的标配工具。...

Python操作系统资源管理与监控(python调用资源管理器)

在现代计算环境中,对操作系统资源的有效管理和监控是确保应用程序性能和系统稳定性的关键。Python凭借其丰富的标准库和第三方扩展,提供了强大的工具来实现这一目标。本文将探讨Python在操作系统资源管...

本地部署开源版Manus+DeepSeek创建自己的AI智能体

1、下载安装Anaconda,设置conda环境变量,并使用conda创建python3.12虚拟环境。2、从OpenManus仓库下载代码,并安装需要的依赖。3、使用Ollama加载本地DeepSe...

一文教会你,搭建AI模型训练与微调环境,包学会的!

一、硬件要求显卡配置:需要Nvidia显卡,至少配备8G显存,且专用显存与共享显存之和需大于20G。二、环境搭建步骤1.设置文件存储路径非系统盘存储:建议将非安装版的环境文件均存放在非系统盘(如E盘...

使用scikit-learn为PyTorch 模型进行超参数网格搜索

scikit-learn是Python中最好的机器学习库,而PyTorch又为我们构建模型提供了方便的操作,能否将它们的优点整合起来呢?在本文中,我们将介绍如何使用scikit-learn中的网格搜...

如何Keras自动编码器给极端罕见事件分类

全文共7940字,预计学习时长30分钟或更长本文将以一家造纸厂的生产为例,介绍如何使用自动编码器构建罕见事件分类器。现实生活中罕见事件的数据集:背景1.什么是极端罕见事件?在罕见事件问题中,数据集是...