前端知识总结

jiezi

5 年前

1、Object.defineProperty() 中的 set/get 设置属性值 / 获取属性值
2、过程
- Observer 劫持并监听所有属性
  - 发生变化，通知 Dep 观察者（update 函数）
  - Watcher 负责向观察者列表添加对应更新函数
  - Compile 编译解析
  - 初始化 / 更新

beforeCreate
- data 和 methods 中的数据和方法还没初始化
created
- data 和 methods 初始化完成
beforeMount
- 模板已经在内存编译好了，尚未挂载到页面
mounted
- 页面挂载完成，可以操作 DOM
beforeUpdate
- 页面数据是旧的，data 数据是新的，页面和最新数据还没同步
updated
- 页面和 data 已经保持最新
beforeDestory
- 进入销毁阶段，data、methodes… 还可用
destroyed
- 组件已经完全销毁，data、methods 以及过滤器，指令不可用

父子通信
- 父组件绑定属性“：data-attr”数据
- 子组件在 props 接收驼峰式 dataAttr 数据
子与父通信
- 子组件 $emit(‘to-parent’,newMsg) 绑定属性传输数据
- 父组件绑定 @to-parent=”getChildren(e)” 属性接收数据
兄弟通信
- 在 main.js 建立一个 Vue.prototype.bus 事件总线（中间层）
- 在 borther1，this.bus.$emit(‘ 属性 toborther2’，值)
- 在 borther2 接收，this.bus.$on(‘toborther2’,function(val){that.msg = val})

虚拟 DOM 出现是为了减少频繁大面积的重绘引发的性能问题
虚拟 dom 和真实 dom 的区别
- 1、虚拟 dom 不会排版与重绘 2、真实 dom 频繁排版与重绘效率相当低 3、虚拟 dom 进行频繁修改，然后一次性比较并修改真实 dom 中需要改的部分，最后并在真实 dom 中进行排版与重绘，减少过多 dom 节点排版与重绘损耗 4、虚拟 dom 有效降低大面积的重绘与排版，因为最终与真实 dom 比较差异，可以只渲染局部
DOM Diff
- 指的是通过 Diff 算法去比较虚拟 DOM 的变化
vue 怎么更新节点
- 1、先根据真实 DOM 生成 virtual DOM 2、当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode 3、Vnode 和 oldVnode 作对比，发现有不一样的就直接修改在真实的 DOM，然后使 oldVnode 的值为 Vnode

全局路由拦截 (路由守卫)
- router.beforeEach((to, from, next)=>{}) // 跳转前
  - to: 即将进入的目标（路由对象）
  - from: 当前导航正要离开的路由
  - next() 进行下一个钩子，next(false) 中断当前导航，如果此时 URL 改变，则会重置为 from 后的路由地址，next(‘/’) next(path: ‘/’) 终止当前导航，跳转到一个不同的地址，next(error) 如果参数为一个 error 实例，则会终止导航
- beforeResolve((to, from, next)=>{}) // 跳转成功
- afterEach((to, from, next)=>{}) // 跳转后
局部路由拦截
- 路由内部钩子：beforeEnter((to, from, next)=>{})
- 组件内部钩子
  - beforeRouteEnter((to, from, next)=>{}) // 从另外的组件进入该组件前触发该钩子
  - beforeRouteUpdate((to, from, next)=>{}) // 同一个组件，参数不一样，不一样数据
  - beforeRouteLeave((to, from, next)=>{}) // 该组件离开跳转到另外的组件时触发该钩子
路由传参
- this.$router.push({path: /Re/${id} })
- this.$router.push({name: ‘Re’, params: { id: id} })
- this.$router.push({path: ‘/Re’, query:{ id: id} })

state 定义共享变量
mutations 同步修改共享变量（更改 state, 提交 mutation）
actions 可以提交 mutation,action 中执行 store.commit
getter 计算属性

prerender-spa-plugin
SSR
- 定义
  - 服务端渲染，用户请求网页，都是后端先调用数据库，获得数据之后，将数据和页面元素进行拼接，组合成完整的 html 页面，再直接返回给浏览器
- 优势
  - 1、更好的 SEO，由于搜索引擎爬虫抓取工具可以查看渲染页面
  - 2、更快内容到达时间，特别对于缓慢的网络情况或缓慢的设备
- 劣势
  - 1、构建设置和部署的更多要求
  - 2、更多服务器端负载
Nuxt.js

app.js
- 系统的方法处理文件，主要处理程序声明周期的一些方法
app.json
- 路由地址、全局配置，导航头颜色、名称
app.wxss
- 全局界面样式
project.config.json
- 控制小程序版本，appid
sitemap.json
- 用来配置小程序及其页面是否允许被微信索引
pages
- 小程序各个页面文件
components
- 组件
images
- 图片
template
- 模板

页面生命周期
- onLoad
  - 监听页面加载
- onShow
  - 监听页面显示
- onReady
  - 监听页面初次渲染完成
- onHide
  - 监听页面隐藏
- onUnload
  - 监听页面卸载
app 生命周期
- onLaunch
  - 监听小程序初始化，只触发一次
- onShow
  - 监听小程序显示
- onHide
  - 监听小程序隐藏
- onError
  - 错误监听函数

wx.switchTab
- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch
- 关闭所有页面，打开应用内某个页面
wx.redirectTo
- 关闭当前页面，跳转到应用内某个页面，不允许跳 tabbar 页面
wx.navigateTo
- 保存当前页面，跳转到应用内某个页面，不能跳到 tabbar 页面，最多十层页面栈
wx.navigateBack
- 关闭当前页面，返回上一页或多级页面

url 参数传递
- 1、wx.navigateTo({url: ‘../list/list?username=’ + this.data.username}) 2、wx.redirectTo 3、wx.reLaunch
本地缓存
- wx.setStorageSync(‘username’,this.data.username)
全局变量
- appjs 里面 app.globalData 对象中新建属性

双线程通信方式
- view 视图层：渲染页面结构
  - 1、初始化状态
  - 2、首次渲染状态
  - 3、持续渲染状态
  - End
- 通过 JSBridage 通信
- AppService 逻辑层：用来逻辑处理、数据请求、接口调用
  - 1、初始化状态：onLoad(只执行一次)、onShow（每次切换都会执行）
  - 2、等待激活状态：接收到“界面线程初始化完成”信号，讲初始化数据发送到“界面线程”，等待界面线程完成初始渲染
  - 3、激活状态：首次渲染完成，调用 onReady 函数
  - 4、后台状态：也能接收数据，局部渲染
  - End
虚拟 DOM
- 1、js 对象模拟 DOM
- 2、比较两个 DOM 树
- 3、比较两个 DOM 树的差异
- 4、把差异应用到真正的 DOM 树上

在 utils 封装 wx.request 请求
- 组件中引入应用

提高页面加载速度
用户行为预测
减少默认 data 的大小
组件化方案

this.setData({})
bindinput 绑定事件方法，监听变化

函数对象
- 所有函数 prototype（显式原型）
- 函数、数组、对象都拥有__proto__（隐式原型）
- 原型对象，拥有 prototype 属性的对象，在定义函数时就被创建
构造函数
- 构造函数会拥有本身方法，也会拥有显式原型的方法，即实例继承构造函数的方法
原型链（查找属性，在__proto__中查找，通过__proto__形成原型链）
- prototype
- proto
- constructor

含义
- 发生在对象与对象之间
方法
- 原型
  - 构造函数（子构造函数 prototype 继承父构造函数的原型方法）
- apply,call 借调构造函数
  - 例：

    function Fn(name,age){                                 
        this.name = name;  
        this.age = 20;                                   
    }
    function Son(name,age,sex){Fn.call(this,name,age);   
        this.sex = sex;                                                                             
    }
    function Son2(name,age,sex){Fn.apply(this,arguments);
        this.sex = sex;                                                                            
    }   
    var  s1 = new Son("李四",20,“男”);
    console.log(s1);    //    son:{name:"李四",age: 20,sex:"男"}       
    var  s1 = new Son2("张三",29,“女”);
    console.log(s2);   //son:{name: "张三"，age:29,sex:"女"}

含义
- 就是能读取其他函数内部变量的函数
作用
- 好处
  - 1、保护函数内的变量安全，防止命名冲突
  - 2、内存维持一个变量，可以做缓存
  - 3、匿名自执行函数可以减少内耗
- 坏处
  - 1、增大内耗，造成内存泄漏
  - 2、闭包跨域访问，导致性能损失

含义
- 协议、域名、端口有一个不同就是跨域
解决跨域
- 1、CORS 跨源通信：浏览器和服务器同时支持，浏览器 IE 不能低于 IE10，前端正常 ajax 请求，需要服务器实现 CORS 接口，就可以实现跨域通信
- 2、JSONP：a、只能 get 请求，不能 post b、dataType:”jsonp”, jsonp: “jsoncallback” c、先在客户端注册一个 callback, 然后把 callback 名字传给服务器，服务器生成 json 数据，然后以 js 语法方式生成 function,function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接入参的方式，放置到 function, 生成一段 js 语法文档，返回给客户端
- 3、window.name：不同页面 / 不同域名仍然存在
- 4、document.domain 将两个不同页面设置成相同练 = 的域名，设置成更高的父域
- 5、location.hash 子框架具有修改父框架 src 的 hash 值
- 6、window.postMessage：HTML5 的 api 允许两个窗口跨域发送信息，解决 dom 跨域通用方法

任意一个普通函数用于创建一类对象时，称为构造函数或构造器

作用域：变量和函数可访问范围，或者说变量或函数起作用的区域
作用域链：是一个对象列表，用来检索各个变量对象中的变量和函数，这样可以保证执行环境有权访问那些变量和函数

相同：改变 this 指向，作用一样
不同：接收的参数不一样，call(this,a,b,c),apply(this,arguments) 立即执行，bind 是返回对应函数，稍后执行，需要手动执行

null 是空值，类型为 object
undefined 表示“缺少值”，未定义

事件冒泡
- 含义
  - 自下而上（自内而外）的触发事件
- 如何防止事件冒泡
  - jq 的 e.stopPropagation
事件捕获
- 含义
  - 自上而下（自外而内）的触发事件
事件委托
- 含义
  - 只指定一个事件处理程序，将原本子元素上的处理程序委托给父元素执行
- 为什么
  - 新增子元素，不需添加事件，因为已经绑定父元素
- 怎么做
  - $(‘parent’).on(‘click’,’li’,function(e){})

赋值方法
- pop 和 push
  - pop 从尾部删除 1 个元素
  - push 增加若干元素
- shift 和 unshift
  - shift 头部删除 1 个元素
  - unshift 头部增加若干元素
- splice
  - 含义
    - 向数组中添加 / 删除项目，并返回被删除的项目
  - 参数
    - index: 添加或删除项目的位置
    - howmany: 要删除的项目的数量
    - item: 向数组添加的新项目
- reverse
  - 将数组中元素顺序反转
- sort
  - 将数组元素进行排序
访问方法
- concat
  - 用于连接两个或多个数组，返回新数组
- join
  - 用于把数组中的所有元素放入一个字符串，即指定分隔符进行分隔
- slice
  - 通过索引位置获取新的数组，不会修改数组，只会返回新的子数组
- toString
  - 将其转换为字符串
- indexOf 和 lastIndexOf
  - indexOf 返回指定字符串首次出现的位置（从左往右）
  - lastIndexOf 返回指定字符串首次出现的位置（从右往左
迭代方法
- forEach
  - 遍历
- map
  - 遍历
- filter
  - 过滤器，把数组的某些元素过滤掉，然后返回剩下的元素
- every 和 some
  - every 从迭代开始，一旦有一个不符合条件的则停止
  - some 一直在找符合条件的值，找到就停止
- reduce 和 reduceRight
  - reduce 升序从左往右（累加器）
  - reduceRight 降序从右往左（累加）

Null
Number
String
Boolen
Undefined

模块模式
构造函数模式
混合模式
工厂模式
单例模式
发布 - 订阅模式

for
- 耗时 23-24ms,break,continue,return 支持
for…in
- 耗时 4858ms
for…of
- 耗时 480-485ms
forEach
- 耗时 209ms，break,continue,return 不支持使用

var 声明变量，可有变量提升作用，函数级作用域
let 声明变量，块级作用域
const 声明常量

含义
- 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
解构赋值的类型
- 数组
  - [a,b,c,d] = [1,2,3,4] // a=1,b=2,c=3,d=4
- 对象
  - {foo,bar} = {foo: ‘aaa’,bar: ‘bbb’} //foo=’aaa’, bar = ‘bbb’
- 字符串
  - [a,b,c,d,e] = ‘hello’ //a=h,b=e,c=l,d=l,e=o
- 数值和布尔值
  - let {toString: s} = 123; //s === Number.prototype.toString;
- 函数参数
  - function add([x, y]){return x + y;}; add([1,2]); //3

this 指向外层
使用 callapplybind，this 指的是绑定的对象

Set 是新的数据结构，成员的值是唯一的
[…set]
Array.from(new Set(array)) Set 结构数组化

含义
- 表示独一无二的值
- Symbol 值通过 Symbol 函数生成
用途
- 1、用作属性名

Class 继承

含义
- 对象构造函数
  - resolve 表示成功回调
  - reject 表示失败回调
方法
- promise.all
  - 要多个异步请求一起成功才返回成功
- promise.race
  - 只返回第一个执行完成的异步操作结果

含义
- 在方法外层必须 async 异步函数
- await 必须执行完异步操作，才会执行下一步
用法
- 内置执行器
- 返回 Promise

块级元素
- div/h1/li/ul/p/th/td
内联元素
- a/b/input/span/i/img

1、position:absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);
2、position: absolute; top bottom left right:0; margin:auto;
3、position: absolute; top: 50%; left: 50%; margin-top: -25px; // height 的一半 margin-left: -25px; // 宽的一半

display// 不占位隐藏
visibility// 占位隐藏

1、添加子元素伪元素选择器
2、overflow: hidden; 第一个盒子设置 margin-bottom, 第二个盒子设置 margin-top

文本相关属性：font-family / font-size / font-style / line-height / text-align / color
列表相关属性：list-style
表格相关属性：border-spacing
其他属性：cursor / visibility

1、static 默认值，不设置属性，会按正常的文档流
2、relative 相对定位，相对它本身的位置
3、absolute 绝对定位，可能是相对父元素的 relative/absolute 定位，也有可能是相对 body 定位
4、fixed 定位对象是根据浏览器窗口进行定位

link 是 html 标签，页面加载时，link 会同时被加载，没兼容性，样式权重高
@import 是 css 加载，会等页面加载后才加载，IE5 以上才能识别，比 link 低

含义
- 块级格式化上下文，块级元素的布局渲染规范
创建 BFC
- float 不是 none
- position 值不是 static/relative
- display 值是 inline-block,table-cell,flex,table-caption,inline-flex
- overflow 值不是 visible

图片有边框 bug
- 解决：给图片 border:0; 或者 border:none;
双倍边距
- 解决：display:inline;
默认高度
- 解决：font-size:0; 或者 overflow:hidden;
按钮元素默认大小不一致
- 解决：a 标签模拟

解决：清除标签默认样式 *{margin: 0; padding: 0;}

解决：display:inline;

解决：overflow:hidden; 或 line-height 小于高

解决：float 布局

解决：opacity: 0.5;filter: alpha(opacity = 50);filter:progid:DXImage Transform.Microsoft.Alpha(style = 0,opacity = 50);

解决：给子元素增加父元素，父元素设置 overflow:hidden;

解决：统一使用 cursor:pointer;

200 成功，一切正常
302 重定向
304 未修改
403 服务器禁止访问
404 找不到请求的资源
500 服务器错误

1、建立连接
2、客户端发送请求到服务器
3、服务器返回相应信息：状态行、协议版本好、成功或错误代码
4、客户端接收服务器返回信息显示在用户显示屏，然后断开链接

GET 获取数据
POST 传输数据
PUT 传输文件
HEAD 获取报文首部
DELET 删除文件
OPTIONS 查询相应 URL 支持的 HTTP 方法

1、兼容 IE10：组件 babel-polyfill
2、打包后线上资源图片路径地址不对：修改 cofig/index.js 配置文件公共路径

1、富文本 html 在小程序不兼容：用 wxParse 组件编译成功小程序 view 标签

1、键盘挡住输入框挡住：css 控制滚动页面

前端知识总结

vuejs

vue 实现双向绑定原理

vue 生命周期

vue 组件通信

vue 的虚拟 DOM

路由

vuex

如何解决单页面的 SEO 问题

微信小程序

目录

生命周期

路由

页面传递数据的方法

基本原理

数据请求封装

提高应用速度方法

双向绑定

js 基础

原型、原型链

继承

闭包

跨域

构造函数

作用域链

cal、apply、bind 的区别

null 和 undefined 的区别

事件冒泡、事件捕获和事件委托

原生方法

数据类型

js 设计模式

js 的占位显示色块（有点预加载的意思）

js 的遍历

性能测试工具

ES6 语法

var、let 和 const 赋值

解构

箭头函数

Set 去重

新增数据类型 Symbol

“ 模板字符串

怎么实现继承

模块化

promise

async/await

html 与 css 基础

块级元素和内联元素

如何实现水平垂直居中

display:none; 和 visibility:hidden; 区别

清除浮动

css 属性继承

static/relative/absolute/fixed 的区别

link 和 @import 区别

BFC

IE6 的 bug

浏览器兼容性

不同浏览器 margin 和 padding 不同

IE6 双边距问题

标签高度设置小于 10px, 在 IE6 和 IE7 会超出自己设置的高度

图片默认有间距

IE9 不能使用 opacity

边距重叠问题

cursor: hand 在 safari 上不支持

HTTP

常见状态码

http 流程

http 方法

项目遇到的问题

vue

微信小程序

html、css