大前端必备知识

摘要：一的基础知识实现双向绑定原理中的设置属性值获取属性值过程劫持并监听所有属性发生变化，通知观察者函数负责向观察者列表添加对应更新函数编译解析初始化更新生命周期和中的数据和方法还没初始化和初始化完成模板已经在内存编译好了，尚未挂载到页面页面挂载

一、vue的基础知识 vue实现双向绑定原理

1、Object.defineProperty()中的set/get设置属性值/获取属性值

2、过程

Observer劫持并监听所有属性

发生变化，通知Dep观察者（update函数）

Watcher负责向观察者列表添加对应更新函数

Compile编译解析

初始化/更新

vue生命周期

beforeCreate

data和methods中的数据和方法还没初始化

created

data和methods初始化完成

beforeMount

模板已经在内存编译好了，尚未挂载到页面

mounted

页面挂载完成，可以操作DOM

beforeUpdate

页面数据是旧的，data数据是新的，页面和最新数据还没同步

updated

页面和data已经保持最新

beforeDestory

进入销毁阶段，data、methodes...还可用

destroyed

组件已经完全销毁，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的区别

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 } })

vuex

state定义共享变量

mutations同步修改共享变量（更改state,提交mutation）

actions可以提交mutation,action中执行store.commit

getter计算属性

如何解决单页面的SEO问题

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绑定事件方法，监听变化

三、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:"女"}     

                 

闭包

含义

就是能读取其他函数内部变量的函数

作用

好处

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跨域通用方法

构造函数

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

作用域链

作用域：变量和函数可访问范围，或者说变量或函数起作用的区域

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

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不支持使用

性能测试工具 四、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函数生成

用途

1、用作属性名

``模板字符串 怎么实现继承

Class继承

模块化 promise

含义

对象构造函数

resolve表示成功回调

reject表示失败回调

方法

promise.all

要多个异步请求一起成功才返回成功

promise.race

只返回第一个执行完成的异步操作结果

async/await

含义

在方法外层必须 async异步函数

await必须执行完异步操作，才会执行下一步

用法

内置执行器

返回Promise

五、html与css基础知识 块级元素和内联元素

块级元素

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:none;和visibility:hidden;区别

display//不占位隐藏

visibility//占位隐藏

清除浮动

1、添加子元素伪元素选择器

2、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的区别

1、static默认值，不设置属性，会按正常的文档流

2、relative相对定位，相对它本身的位置

3、absolute绝对定位，可能是相对父元素的relative/absolute定位，也有可能是相对body定位

4、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标签模拟

六、浏览器兼容性 不同浏览器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;

七、HTTP的状态及请求 常见状态码

200 成功，一切正常

302 重定向

304未修改

403服务器禁止访问

404找不到请求的资源

500服务器错误

http流程

1、建立连接

2、客户端发送请求到服务器

3、服务器返回相应信息：状态行、协议版本好、成功或错误代码

4、客户端接收服务器返回信息显示在用户显示屏，然后断开链接

http方法

GET获取数据

POST传输数据

PUT传输文件

HEAD获取报文首部

DELET删除文件

OPTIONS查询相应URL支持的HTTP方法

八、项目遇到的问题 vue

1、兼容IE10：组件babel-polyfill

2、打包后线上资源图片路径地址不对：修改cofig/index.js配置文件公共路径

微信小程序

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

html、css

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

Copyright © KEN卓越