大前端必备知识

时间 2020-03-28

标签前端必备知识繁體版

原文原文链接

1、vue的基础知识

vue实现双向绑定原理

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

vue生命周期

beforeCreate前端
- data和methods中的数据和方法还没初始化
createdvue
- data和methods初始化完成
beforeMountnode
- 模板已经在内存编译好了，还没有挂载到页面
mountedajax
- 页面挂载完成，能够操做DOM
beforeUpdate算法
- 页面数据是旧的，data数据是新的，页面和最新数据还没同步
updatedvuex
- 页面和data已经保持最新
beforeDestory数据库
- 进入销毁阶段，data、methodes...还可用
destroyedjson
- 组件已经彻底销毁，data、methods以及过滤器，指令不可用

vue组件通讯

父子通讯
- 父组件绑定属性“：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 })

vue的虚拟DOM

虚拟DOM出现是为了减小频繁大面积的重绘引起的性能问题
虚拟dom和真实dom的区别
- 一、虚拟dom不会排版与重绘二、真实dom频繁排版与重绘效率至关低三、虚拟dom进行频繁修改，而后一次性比较并修改真实dom中须要改的部分，最后并在真实dom中进行排版与重绘，减小过多dom节点排版与重绘损耗四、虚拟dom有效下降大面积的重绘与排版，由于最终与真实dom比较差别，能够只渲染局部
DOM Diff
- 指的是经过Diff算法去比较虚拟DOM的变化
vue怎么更新节点
- 一、先根据真实DOM生成virtual DOM 二、当virtual DOM某个节点的数据改变后会生成一个新的Vnode 三、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 } })

vuex

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

如何解决单页面的SEO问题

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

2、微信小程序基础

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参数传递
- 一、wx.navigateTo({ url: '../list/list?username=' + this.data.username }) 二、wx.redirectTo 三、wx.reLaunch
本地缓存
- wx.setStorageSync('username',this.data.username)
全局变量
- appjs里面app.globalData对象中新建属性

基本原理

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

数据请求封装

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

提升应用速度方法

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

双向绑定

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

3、js基础知识

原型、原型链

函数对象
- 全部函数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:"女"}

闭包

含义
- 就是能读取其余函数内部变量的函数
做用
- 好处
  - 一、保护函数内的变量安全，防止命名冲突
  - 二、内存维持一个变量，能够作缓存
  - 三、匿名自执行函数能够减小内耗
- 坏处
  - 一、增大内耗，形成内存泄漏
  - 二、闭包跨域访问，致使性能损失

跨域

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

构造函数

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

做用域链

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

cal、 apply、bind的区别

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

null和undefined的区别

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

js设计模式

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

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

js的遍历

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

性能测试工具

4、ES6的基本语法

var、let和const赋值

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是新的数据结构，成员的值是惟一的
[...set]
Array.from(new Set(array)) Set结构数组化

新增数据类型Symbol

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

``模板字符串

怎么实现继承

Class继承

模块化

promise

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

async/await

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

5、html与css基础知识

块级元素和内联元素

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

如何实现水平垂直居中

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

display:none;和visibility:hidden;区别

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

清除浮动

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

css属性继承

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

static/relative/absolute/fixed的区别

一、static默认值，不设置属性，会按正常的文档流
二、relative相对定位，相对它自己的位置
三、absolute绝对定位，多是相对父元素的relative/absolute定位，也有多是相对body定位
四、fixed定位对象是根据浏览器窗口进行定位

link和@import区别

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

BFC

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

IE6的bug

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

6、浏览器兼容性

不一样浏览器margin和padding不一样

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

IE6双边距问题

解决：display:inline;

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

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

图片默认有间距

解决：float布局

IE9不能使用opacity

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

边距重叠问题

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

cursor: hand在safari上不支持

解决：统一使用cursor:pointer;

7、HTTP的状态及请求

常见状态码

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

http流程

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

http方法

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

8、项目遇到的问题

vue

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

微信小程序

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

html、css

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

大前端必备知识

1、vue的基础知识

vue实现双向绑定原理

vue生命周期

vue组件通讯

vue的虚拟DOM

路由

vuex

如何解决单页面的SEO问题

2、微信小程序基础

目录

生命周期

路由

页面传递数据的方法

基本原理

数据请求封装

提升应用速度方法

双向绑定

3、js基础知识

原型、原型链

继承

闭包

跨域

构造函数

做用域链

cal、 apply、bind的区别

null和undefined的区别

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

原生方法

数据类型

js设计模式

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

js的遍历

性能测试工具

4、ES6的基本语法

var、let和const赋值

解构

箭头函数

Set去重

新增数据类型Symbol

``模板字符串

怎么实现继承

模块化

promise

async/await

5、html与css基础知识

块级元素和内联元素

如何实现水平垂直居中

display:none;和visibility:hidden;区别

清除浮动

css属性继承

static/relative/absolute/fixed的区别

link和@import区别

BFC

IE6的bug

6、浏览器兼容性

不一样浏览器margin和padding不一样

IE6双边距问题

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

图片默认有间距

IE9不能使用opacity

边距重叠问题

cursor: hand在safari上不支持

7、HTTP的状态及请求

常见状态码

http流程

http方法

8、项目遇到的问题

vue

微信小程序

html、css