vue的优势:
基于html放入模板语法,响应式的更新机制,可以让我们更快更高效的开发项目;渐进式的开发理念
vue项目中的错误处理:
1 后台接口错误
2 代码逻辑错误
后台接口错误:
axios interceptor实现网络请求的response拦截
1 判断给定的日期是否是工作日
date.getDay()%6==0
2 反转字符串
str.split(' ').reverse().join(' ');
3 判断当前选项卡是否在视图/焦点中
document.hidden
4 从日期获取时间,通过使用toTimeString() 方法将字符串切片用在正确的位置
new Date().toTimeString().slice(0,8)
5 按位取反~
~~ 取反两次去掉小数部分; Math.floor()
双非位运算符只对 32 位整数有效,对于任何大于 2147483647 的数字,双非位运算符 (~~) 都会给出错误的结果,这种情况下推荐使用 Math.floor() 方法。
~~12.3333 12
6 检查当前元素是否处于焦点
const elementIsInFocus=(el)=>(el===docuement.activeElement)
7 检查当前用户是否支持触摸事件
const touchSupported=()=>{
('onTouchstart' in window || window.DocumentTouch&&document instanceof window.documentTouch )
}
8 检查当前用户是否在iphone设备上
const isAppleDevice=/Mac | iPad | iPhone | iPod /.test(navigator.platform);
算法题建议养成每天刷一道leetcode的习惯,重点刷数据结构(栈,链表,队列,树),动态规划,DFS,BFS
建议优先掌握:
instanceof (考察对原型链的理解)
new (对创建对象实例过程的理解)
call&apply&bind (对this指向的理解)
手写promise (对异步的理解)
手写原生ajax (对ajax原理和http请求方式的理解,重点是get和post请求的实现)
其他:数组,字符串的api的实现,难度相对较低。只要了解数组,字符串的常用方法的用法,现场就能写出来个大概。(ps:笔者认为数组的reduce方法比较难,这块有余力可以单独看一些,即使面试没让你实现reduce,写其他题时用上它也是很加分的)
instanceof 是判断一个实例是否是其父类或者祖先类型的实例
函数柯里化
柯里化的定义:接收一部分参数,返回一个函数接收剩余参数,接收足够参数后,执行原函数。
函数深拷贝
1 递归拷贝
2 Object.parse(Object.stringfy(obj))
缺点:
2 循环对象用这种方法的时候会抛出异常
1 诸如 Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型在进行序列化时会丢失。
3 function undefined会丢失
3 如果有一个单级对象,例如没有嵌套的对象,那么我们也可以使用扩展符来实现深拷贝。
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};
浅拷贝
Object.assign(obj1,obj2)
GET和post的区别:
1 get请求回退是无害的,post回退需要重新发送请求
2 get请求,参数在url上,参数长度有限制
3 post的参数在请求体上,没有长度限制
4 get请求产生的url可以bookmark
5 get请求的参数会被完整保留在浏览器历史记录里面,而post中的参数不会被保留
6 get请求的url中传送的参数只接受ASICC字符,post没有限制
7get比post更不安全,参数暴露在URL上,所以不能用来传递敏感信息
Vue组件通信方式:
1 props $emit 父子组件
2 Vuex
state 数据存储,是store中唯一数据源
getters
action 需要通过提交mutation修改state的值,可以进行异步操作
mutation 修改数据的唯一途径,只能进行同步操作
mapState mapMutations MapActions
3 $attrs $listeners 跨级组件通信
$attrs 除了props class style之外的属性
$listeners 除了native修饰的v-on事件监听器
4 $parent $refs children root
5 provide inject
provide(){
return {
}},
祖先组件向所有的子孙后代注入一个依赖,可以注入属性和方法,从而实现跨级父子组件通信。
provide 和inject的绑定对于原始类型来说并不是可响应的,
6 Vue.observable 实现迷你vuex
export const state=Vue.observable({
count:0
});
export const mutations={
increment(){state.count++},
decrement(){state.count--}
}
7 中央bus EventBus
混入 mixins
默认的事件流是:捕获阶段-目标阶段-冒泡阶段
.capture外层元素先触发事件,然后往深层传递
.passive:当页面滚动的时候就会一直触发 onScroll 事件,这个其实是存在性能问题的,尤其是在移动端,当给他加上 .passive 后触发的就不会那么频繁了
自定义指令
.sync 子组件更新父组件的数据 $emit('update:obj',value)
自定义指令
function install(){
Vue.directive('auth',{
inserted(){}
});
}
export default{install}
在main.js中
import Auth from '.utils/auth'
Vue.use(Auth)
删除自己 el.parentNode.removeChild(el);
自动化导入模块
优雅导出请求接口
// api.js
import http from './config/httpServer.js'
/* 登入页面获取公钥 */
export const getPublicKey = (data) => {
return http({ url: '/userGateway/user/getPublicKey' }, data)
}
// 用户登录
export const login = data => {
return http({ url: '/userGateway/userSentry/login' }, data)
}
// 验证码登录
export const loginByCode = data => {
return http({ url: '/userGateway/userSentry/loginByCode' }, data)
}
优化:
const ApiList={
getPublicKey :'/userGateway/user/getPublicKey',
login :'/userGateway/userSentry/login',
'loginByCode':'/userGateway/userSentry/loginByCode'
};
const API={};
Object.keys(ApiList).forEach((item)=>{
Api[item]=(data)=>{
return http({ url: ApiList[item]}, data)
}
});
export default Api;
监听子组件的钩子函数
parent.vue
<child @mounted='doSomething'></child>
child.vue
mounted(){this.$emit('mounted')}
简单写法:
parent.vue
<child @hook:mounted='doSomething'></child>
深入watch用法
deep:true
immediate:true
多个handlers
实际上,watch 可以设置为数组,支持类型为 String、Object 和 Function。触发后,多个处理函数都将被调用
https://mp.weixin.qq.com/s/MchD5YiXvuIjhvkj86hTlg
跨域本质是浏览器基于同源策略的一种安全手段
协议 主机 端口
跨域是浏览器的限制,抓包工具和postman可以正常获取数据,
解决跨的方法:
JSONP
CORS 跨域资源共享 是有一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止
前端js代码获取跨域请求的响应
Proxy
vue-cli webpack 搭建本地服务器。设置请求代理 devServer:proxy
通过nginx实现代理
发布订阅模式
单例模式
https://mp.weixin.qq.com/s/fByGtad10ghK5Nn-elrw4w
与(&&)短路运算
只有某个值为true时调用一个函数,可以使用&&短路形式书写
isLogined&&goHomePage()
10. 多条件检查
对于多个值匹配,我们可以将所有的值放到数组中,然后使用indexOf()或includes()方法。
//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
// Execute some code
}
// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
// Execute some code
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) {
// Execute some code
}
获取数组的最大值
1 通过Array.reduce(pre,cur,index,arr)
max=arr.reduce((pre,cur)=>{return Math.max(pre,cur)});
2 Math.max(...arr) 扩展运算符