1、企微分享功能流程？
- 签名获取
首先将本页面的完整url传递给后端，后端使用js ticket、url等信息生成签名，返回给前端签名、时间戳、随机字符串，微信的appId，前端使用wx.config配置微信jsapi权限。
2、http和https区别？
https是http的安全版本，也叫超文本安全传输，https是有加密传输协议的通道，并且SSL提供了安全加密基础，https主要是用于http的传输，并且在HTTP与TCP之间有一个特殊的加密/身份验证。
- http是一种普通的传输协议，在互联网上，所有的文件都要遵守这个HTTP协议，同时超文本也是http传输的基本部分，实现客户端和服务器的相互请求。
- http默认端口80，https默认端口443，且两者链接方式不同。
- http传输明文，https是ssl(握手协议)加密的，https的安全性更高。
- https是需要申请证书的，而http不需要。
3、什么是埋点，是否处理过？
- 适用于监控用户页面行为的形式，一般是引入第三方包实现的。
除了之前写过的gio埋点以外，还有前段时间一起联调过客户团队自己开发的用于销售行为检测回溯的包，先引入包，然后配置相关参数，然后就可以自动抓取用户行为操作过程了。
埋点01.jpg
埋点02.jpg
4、nextTick()
- 是将回调函数延迟在下一次dom更新数据后调用。意思就是当数据更新了，在dom中渲染后，自动执行该函数。
- 在created中需要进行dom操作一定要放在里边使用。
5、prototype 继承，原型链
所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName
};
var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML = "我的父亲是 " + myFather.name();
6、new Promise()
var p = new Promise((resolve,reject)=>{
setTimeout(function(){
var count = 0;
if(count){
resolve( count );
}else{
reject( count );
}
},1000)
});
p.then(res=>{ //异步调用
console.log(res);
},err=>{
console.log(err)
})
console.log(1); //比then先执行，也就证明then是异步调用
7、数组去重
- i. new Set(arr)
- ii. indexOf,然后挨个push进去。留重，filter筛选
- iii. for循环，然后arr.splice删除
8、vuex状态管理器
mutations 也是一个对象，这个对象里面可以存放改变state 的初始值的方法，且为同步操作；（commit提交，this.store.actions和dispatch两种）
- state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使用它来修改数据(类似于methods)
- getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
- actions： 发起异步请求
- modules： 模块拆分。
9、 pop 、 push 、shift 、 unshift 、 slice 、 splice
修改删除数组方法
pop() —— 删除数组中的最后一个元素，并返回这个元素（无参数）
push() —— 添加到数组中的最后一个元素
shift() —— 删除数组的第一个元素, 并返回这个元素（无参数）
unshift()——方法可向数组的开头添加一个或更多元素，并返回新数组的长度
array.slice(start, end)，截取数组，不修改原数组
array.splice(index, howmany, item1, …, itemX);截取数组，修改原数组
10、loadsh -- 封装的js库
- 1._.chunk(array, [size=1]) “数组切割”
- 2_.cloneDeep(value) “深拷贝”
- 3_.compact(array) “过滤假值”
- 4_.remove(array, [predicate=_.identity]) “移除数组对象中指定元素”
- 5_.unionWith([arrays], [comparator]) “数组对象合并去重”
- 6_.map(collection, [iteratee=_.identity]) “过滤”
- 7_.uniqBy(array, [iteratee=_.identity]) “数组对象去重”
- 8_.pullAll(array, values) “移除数组指定元素”
- 9_.pullAllWith(array, values, [comparator]) “移除数组对象指定元素”
11、sessionStorage、localStorage、cookie 区别？
- 存储大小。
session、local 存储大小5M，cookie大约4k - 数据有效期不同。
cookie可以设置过期时间，也可以手动清空。(后端设置：)
accessToken:系统设置2个小时，refreshToken设置12个小时。
cookie.setMaxAge(0);//不记录cookie
cookie.setMaxAge(-1);//会话级cookie，关闭浏览器失效
cookie.setMaxAge(60*60);//过期时间为1小时
session：仅在浏览器关闭前有效。
local：永久有效，除非手动清除
- 作用域。
cookie在所有同源窗口共享。
session仅在一个浏览器共享，不同浏览器不共享。
local在所有同源窗口共享。 - 通信。
cookie: 通过http,在浏览器和服务器传递。
session、local仅在客户端。 - 应用。
cookie判断用户是否登陆过，记忆密码自动登录。
session敏感账号一次登录，关闭浏览器删除。
local个人长期登录， 长期保存数据
12、vue 生命周期
created，mounted，beforedestory,destoryed
13、CSS垂直居中的8种方法
- 1、通过verticle-align:middle实现CSS垂直居中。
- 2、通过display:flex实现CSS垂直居中。
- 3、通过伪元素:before实现CSS垂直居中。
- 4、通过display:table-cell实现CSS垂直居中。
- 5、通过隐藏节点实现CSS垂直居中。
- 6、已知父元素高度通过transform实现CSS垂直居中。
- 7、到垂直居中的位置。
- 8、通过line-height实现CSS垂直居中。
14、echarts可视化图表库
15、Redux 是和react使用的，状态管理器
state、effect(action)、reducer
16、css 选择器：类、id，属性，伪类元素
- 后代。>子选择器 。+相邻兄弟。~通用兄弟（同级的所有兄弟）。
- 伪类：a:link a:active a:hover a:visited
17、async 和 await
async返回的是一个promise对象
async声明一个异步方法，await 等待异步执行。
await就是等待这个promise的返回结果后，再继续执行
await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值
18、防抖节流 debounce, throttle
- 防抖 （多次触发 只执行最后一次）
高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。
防抖的应用场景：
i. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖.
ii. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
iii. 文本编辑器实时保存，当无任何更改操作一秒后进行保存- 节流 （规定时间内 只触发一次）
高频率触发的事件,在指定的单位时间内，只响应第一次。
节流的应用场景:
i. 鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
ii. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
iii. 浏览器播放事件，每个一秒计算一次进度信息等
19、get 和 post 区别
- 1、发送的数据数量。
在Get中，只能发送有限数量的数据，因为数据是在URL中发送的；
在POST中，可以发送大量的数据，因为数据是在正文主体中发送的。 - 2、安全性。
GET方法发送的数据不受保护，因为数据在URL栏中公开，这增加了漏洞和黑客攻击的风险。
POST方法发送的数据是安全的，因为数据未在URL栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。 - 3、加入书签中。
GET查询的结果可以加入书签中，因为它以URL的形式存在；而POST查询的结果无法加入书签中。 - 4、可变大小。
GET方法中的可变大小约为2000个字符。而，POST方法最多允许8 Mb的可变大小。 - 5、缓存。
GET方法的数据是可缓存的，而POST方法的数据是无法缓存的。 - 6、主要作用。
GET方法主要用于获取信息。而，POST方法主要用于更新数据。
20、构造函数的使用
构造函数一般首字母会大写，为了和普通函数区分。
构造函数的属性和方法前必须加this关键字，指代要生成的对象
总结：
一个构造函数可以通过new创建多个实例对象
创建构造函数时，里面的属性和方法前必须加this
构造函数不需要return 就可以返回结果
- new 就是执行构造函数，返回一个对象，不写new就是普通函数的调用，没有创造对象的能力
function Dog(){}
var d1 = new Dog();
var d2 = Dog();
- 调用函数时，如果不传递参数，()可以不写，如果传递参数就必须写，建议都写上.
function Dog(){}
var d1 = new Dog();
var d2 = new Dog;
- 构造函数中的this,由于和 new 连用的关系，是指向当前实例对象的
function Dog(){
console.log(this);
}
var d1 = new Dog();// this => d1
var d2 = new Dog();// this => d2
网友评论