专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端学习路径,细化分讲。加深新手对前端技术的认知

ins518 2024-11-22 15:47:17 技术文章 10 ℃ 0 评论

1、web前端基础

HTML+CSS----HTML5+CSS3,包括布局(栅格布局,流动布局,经典的弹性盒布局——兼容性不太好)

JavaSCript-----ECMAScript语法---前端必备 、 DOM操作、BOM

2、JavaScript进阶-----预解释 、闭包、作用域、this指向、面向对象、继承的实现方式、算法、JavaScript设计模式

3、前端库必备-----jQuery、jQuery插件、understore.js(前端功能库必备,弥补了大量原生JS方法天生不足的缺陷)、动画库animate.css、动画库Velocity.js

4、移动端开发----viewport、媒体查询、rem自适应、flexiable.js、移动端事件、移动端库zepto.js、swiper.js、移动端框架Bootstrap

5、前端工作流----Git、三个打包工具(grunt--了解、glup--简单使用、webpack--重点,进入BAT最重要的一个工具)、前端模块化(require.js、sea.js、AMD/CMD、ES6 Module)、Yoman脚手架工具 了解一下

BAT:B指百度、A指阿里巴巴、T指腾讯

脚手架:为了保证各施工过程顺利进行而搭设的工作平台

6、Nodejs

HTTP/AJAX

Nodejs核心模块

Nodejs异步:Events、Timer、Event-loop

进程:进程和线程、Cluster(集群)

数据库:爬虫框架 node-crawler 、数据持久化、MySql、MongoDB、Redis

鉴权:cookie认证、token+jwt(JSON Web Token)、第三方登录Qauth2

框架进阶:先学express入门、再去进攻Koa2、大型项目框架使用eggjs

MVVM开发框架:Model-View-ViewMode

SSR服务器渲染:server side render

常用Linux命令

部署运维

7、Vue2.6

7.1 Vue:

常用指令:必会

v-bind:可以用于响应式地更新 HTML 特性 如:

<a?v-bind:href="url">...</a>? 缩写:<a?:href="url">...</a>

v-on:监听 DOM 事件 如;

<a?v-on:click="doSomething">...</a>? 缩写;<a @click="doSomething">...</a>

v-for

 v-if


表达处理:

双向数据绑定---MVVM思想

组件化--必会 自己编写自己的组件

生命周期----必会

Vue动画特效

7.2 Vue-router

路由基础:

动态路由、嵌套路由、编程式导航、命名路由、重定向、路由组件传参、history模式

路由进阶:

生命周期、过渡特效、数据获取、滚动行为监听、路由懒加载

7.3 Vuex

state、getters、mutations、actions、modules

7.4 前后端分离思想----对比后端渲染页面和前后端分离

7.5 服务器渲染SSR

SEO 的问题、SSR的原理、为什么要做SSR、何种类型的项目使用SSR

7.6 nuxt.js

7.7常用框架

element-ui必会、下面三款任选其一(Vux、IView、mint-ui)

7.8 Vue双向数据绑定的原理

7.9 提升 自己写一个Vue、vue-router vuex

8、React 16全家桶实战

React基础+进阶:

  • React基础语法,可以去它官网上看,https://react.docschina.org/docs/getting-started.html
  • 官网脚手架Creat-react-app
  • JSX
  • 虚拟DOM原理剖析
  • 组件化思想
  • 表单处理
  • 动画特效
  • 生命周期
  • Fiber架构了解一下
  • Hooks了解一下

Redux状态数据管理

  • setState和属性传递管理数据的不足
  • 单向数据流和双向数据流对比
  • Action
  • Reducer
  • Dispatch
  • React和Redux连接-》React-redux
  • Provider和connect
  • 中间件
  • Redux-thunk中间件如何处理异步任务

React-router4单页应用

  • 路由管理
  • 路由和组件
  • 重定向
  • 路由声明周期
  • 懒加载

Ant-design组件库

服务器渲染SSR

  • 跟Vue的SSR类似了,如果你会了Vue的SSR,这个可以忽略

Typescript在React中实战

深入了解虚拟DOM的原理

9、微信小程序

学微信小程序,会基本的html+css+js就可以快速入门

微信小程序实战

  • 微信小程序中基本的api
  • 页面结构组件
  • 页面样式
  • 基础组件
  • Flex布局
  • 扫码
  • 下拉刷新、上拉加载
  • 轮播图
  • 支付
  • 开发自己的小程序

小程序生态

  • 小程序适用场景分析
  • 支付宝小程序
  • 百度小程序
  • Taro、Mpvue 通用框架
  • 再开发一款微信小程序项目

10、微信公众号开发

  • 微信Api    
  • 消息中间件    
  • 音视频、图片、图文、ticket管理    
  • 微信支付接入    
  • 服务端如何接入微信后台    
  • Nodejs后端接入    
  • 依赖微信jssdj开发业务    
  • 录音/地理位置,扫一扫    
  • 公众号开发

11、混合式App开发

React-navtive      

基础        

  • 搭建开发环境        
  • 样式、布局、输入、事件、滚动视图、长列表        
  • Props属性        
  • 状态      

进阶        

  • 组件化开发        
  • Platfrom模块        
  • 导航器        
  • 动画        
  • 手势        
  • 性能、调试        
  • 集成        
  • ios应用扩展        
  • Android应用扩展        
  • 单页应用        
  • redux管理数据        
  • react-router路由      

第三方组件库        

  • ant-design-mobile的使用    

Flutter

12、web安全策略     

这是基本知识,对这个有所了解,面试大厂可能对你有很大的帮助      

基本的安全和常用web项目相关漏洞原理解析和防御      

XSS漏洞、CSRF漏洞、SQL注入      

Cookie安全策略      

传输安全和HTTPS加密

13、自动化测试    

虽然测试不是咱们前端必备,但是了解它,对你以后的全栈之路绝对提升了一个档次      

  • 业务驱动      
  • 测试驱动      
  • 黑百盒测试      
  • 前端项目的单测集成      
  • Node项目的单测集成      
  • 前端e2e测试实战

14、web前端提升进阶(大厂必备)    

前端数据结构和算法      

  • 算法基础知识、核心概念、复杂度      
  • 常见算法:冒泡排序、快排、二分查找、递归算法、常见算法面试题(网上搜索即可)      
  • 常见数据格式:数据格式、数组、连表、树、二叉树、图    

前端设计模式      

  • 为什么要学习设计模式?      
  • 面向对象      
  • 工程模式      
  • 单利模式      
  • 装饰器模式      
  • 代理模式      
  • 观察者模式      
  • 计模式做个实战,运用一下

喜欢小编的可以点个赞关注小编哦,小编每天都会给大家分享文章。

我自己是一名从事了多年的前端老程序员,小编为大家准备了新出的前端编程学习资料,免费分享给大家!

如果你也想学习前端,那么帮忙转发一下然后再关注小编后私信【1】可以得到我整理的这些前端资料了(私信方法:点击我头像进我主页有个上面有个私信按钮)

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表