快速学习前端开发-前端开发路线
2021-07-29 12:19:38 0 举报AI智能生成
前端开发路线，暑期带你不走偏快速学习前端开发
作者其他创作
大纲/内容
HTML和CSS
html
认识WEB
HTML标签
语义化标签
CSS
选择器
基础选择器
复合选择器
伪类选择器
CSS三大特性
层叠性
继承性
优先级
布局
定位
浮动
水平居中的几种方法
方法一：margin + width
方法二：table + margin
方法三：inline-block + text-align
方法四：absolute + margin-left
方法五：absolute + transform
方法六：flex + justify-content
BFC
解释
Block format content，块级格式上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件
- float不是none
- position是absolute或fixed
- overflow不是visible
- display是flex inline-block等
BFC 的特性
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
其他
外边距合并
相邻元素垂直外边距的合并
嵌套块元素垂直外边距的合并（塌陷）
字体图标
Chrome调试
CSS进阶
精灵图
CSS 样式初始化
reset.css
normalize.css
LOGO SEO优化
网站 favicon 图片
网站TDK三大标签SEO优化
title 网站标题
description 网站说明
keyword 关键字
模块化开发
common.css
公共样式抽离
H5+C3
H5新增的标签
CSS3新增选择器
C3的新特性
盒子模型
滤镜
calc函数
过渡
translate
transform
rotate 旋转
orign 转换中心点
scale 缩放
rotate 3D旋转
animation
定义动画
调用动画
本地存储
移动端Web
视口
布局视口
视觉视口
理想视口
常用布局
1.流式布局(百分比布局)
2.Flex布局
3.rem+less
4.Bootsarp
5.Grid
像素相关
物理像素/设备像素
设备独立像素/设备无关像素
基础/插件
viewport
多倍图
less
媒体查询
rem
Bootstarp
flexible.js与swiper
移动端事件
touchstart
touchmove
touchend
touchcancel
常见问题
多倍图
点击穿透
1px 边框问题
JavaScript
ECMAScript
基本语法
数据类型
函数
作用域和预解析
面向对象编程
封装、继承、多态
原型链、闭包
DOM
事件捕获、冒泡、代理、委托
常用方法
BOM
定时器
localhost
history、navigator
ES5/6/7
let、count
symbol
解构赋值
箭头函数
模板字符串
Canvas(了解)
jQuery
常用API
样式操作
jQuery效果
属性操作/元素操作
绑定事件
插件
JavaScript高级
JS模块化
CommonJS
ES6
阻塞渲染
关于css阻塞
关于js阻塞
重绘/回流
回流
盒子模型相关属性会触发重布局
重绘
重绘是一个元素外观的改变所触发的浏览器行为
性能优化
减少DOM操作
使用translate代替left、top
减少css选择器层级
修改DOM尽量使用css
防抖与节流
函数防抖
概念：延迟要执行的动作，若在延时的这段时间内，再次被触发了，则取消之前开启的动作，重新计时
函数节流
设定一个特定的时间，让函数在特定的时间内只执行一次，不会频繁执行
Web Storage
SessionStorage
LocalStorage
缓存
缓存理解
浏览器在本地磁盘上将用户之前请求的数据存储起来
当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据
缓存分类
强缓存
协商缓存
缓存header参数
服务器端基础
Node.js
NPM
Yarn
系统模块
第三方模块
Gulp
模块化开发
HTTP协议
HTPP协议的概念
HTTP协议是什么?
报文
MongoDB
基本命令
增、删、改、查
创建集合
约束字段
集合关联
art-template模板引擎
art-template
语法
条件判断
循环遍历
模板继承
模板配置
ejs
express框架
Request
Response
cookie
session
数据加密
Node.js爬虫框架
cheerio
download
爬虫高级
Selenium
AJAX
原生Ajax
jQuery的ajax方法
跨域问题总结
JSONP
cors
Vue
Vue基础
插值指令
Mustache
v-once
v-htmll
v-text
v-pre
v-cloak
v-bind绑定属性
缩写-> :
v-bind绑定class
v-bind绑定style
computed计算属性
计算属性的setter和getter
计算属性的缓存
事件监听指令
v-on
v-on修饰符
.stop
.prevent
.keyCode | keyAlias}
once
navtive
条件渲染指令
v-if
v-else
v-else-if
v-show
循环遍历指令
v-for
Vue中key属性
数组响应式方法
pusho
popo
shifto
unshift
splice
sort
reverse
Vue.set修改响应式数据
v-if 和 v-for
v-model
v-model的修饰符
.lazy
.number
.trim
值绑定
动态的给value赋值
自定义指令
Vue.directive 注册全局指令
侦听器 watch
数据变化时执行异步或开销较大的操作
注意: watch 中的属性 一定是data 中 已经存在的数据
过滤器
Vue.filter()
常见的文本格式化/处理
mixin 混入
当多个组件中生命周期函数中有共同的代码,可以使用混入对象
生命周期
beforeCreate
created
beforeMount
mouted
beforeUpdate
update
beforeDestroy
destroyed
VueRouter
Vue-Router基础
安装装vue-router
路由组件详解
路由配置其他补充
路由的默认路径
路径的History模式
router-link的其他属性
配置路由的属性
编程式导航
动态路由匹配
动态路由匹配
路由懒加载
解释
将路由对应的组件打包成一个个的JS代码块
只有这个路由被访问到的时候, 才加载对应的组件
使用
const Home = () => import('../components/Home.vue')
路由嵌套
嵌套路由实现
1. 创建组件
2. 在路由映射规则中, 配置嵌套路由: children: [ { } ,{ } ]
3.在需要嵌套该组件的页面中, 使用 router-link 和 router-view
获取参数
query获取
$route.query
传递参数的方式
params
query
$router 和 $route的区别
$router是 VueRouter 实例，对路径相关导航操作
route是当前 path 映射的组件对象
导航守卫⚔
路由元信息
通过 meta 定义路由元信息
全局后置钩子
router.afterEach((to, from) => {})
路由独享钩子函数
可以做一些单个路由的跳转拦截
组件内钩子函数
更细粒度的路由拦截, 只针对一个进入某一个组件的拦截
keep-alive组件
页面缓存
在路由跳转的时，不会保存页面当前的状态
旧的组件会被销毁，新组件会被创建，再走一遍完整的声明周期
作用
keep-alive是 Vue 内置的一个组件
可以使被包含的组件保留状态，或避免重新渲染
属性
inclue：值是字符串或正则表达，只有匹配的组件会被缓存
exclue：值是字符串或正则表达，任何匹配的组件都不会被缓存
keep-alive独有生命周期
activated
deactivated
Vuex
State
单一状态树
State之所以叫单一状态树，就是因为用一个对象包含了全部层级状态
State 单一状态特点
state的改变完全由 mutations 控制
mapState
当一个组件需要获取多个状态时
Getters
描述
当你需要对 State 进行计算、筛选、过滤时
你可以把他看作Vuex的计算属性
Getters参数
state
getters
传递参数
可以传递给getters参数
mapGetters
mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
Mutations
Mutation状态更新
Vuex的 state 状态更新的唯一方式：提交Mutation
Mutation主要包括两部分
字符串的事件类型， 也就是事件名/函数名
一个回调函数，该回调函数第一个参数就是state
Mutation传递参数
mutation接收两个参数：state和payload
Mutation提交方式
1. 通过 commit 方式提交
2. 通过 type 方式提交
Mutation 常量替换事件类型
Actions
基本定义
Action 提交的是 mutation , 而不是直接更改状态
Action 可以包含任意异步操作
Action的分发
在Vue组件中，使用 dispatch 来调用 Action 中的方法
Action返回Promise
用来获取在 Action 中异步操作状态
Modules
React
React基础
React基础语法
React绑定属性
React事件绑定
React条件渲染
React组件化开发
React 生命周期
React 组件通信
高阶组件
React其他特性
Redux
认识纯函数
Redux核心API
React-Redux的使用
React-Redux
Redux-Middleware中间件
redux-sage
immutable
React-Router
React-Router核心API
BrowserRouter
history模式
link组件
NavLink组件
HashRouter
hash模式
Link组件
NavLink组件
Route
作用
Router用于路径的匹配
属性
path：用户设置匹配到的路径
component：匹配到的路径，渲染的组件
exat：精准匹配
NavLink
作用
路径被选中时，对应的a元素添加class
属性
activeStyle
活跃时(匹配)的样式
activeClassName
活跃时添加地class
axact
精准匹配
Switch
使用场景
只要有一个path匹配上了对应的组件, 后续就不会进行匹配了
使用
使用 Switch 包裹所有 Route 组件
Redirect
作用
Redirect用于路由的重定向
当这个组件出现后,就会执行跳转对应的to路径中
属性
to="/login"
react-router其他补充
路由嵌套
withRouter(手动路由跳转)
reacat-router-config
作用
·将所有的路由配置放到一个地方进行集中管理
安装
yarn add react-router-config
配置路由映射关系数组
嵌套子路由配置映射关系
在路由嵌套中配置路由映射关系
React样式的选择
css
css-module
styled-component
0 条评论
下一页
