ajax、axios、fetch 的异同点?(这种问题一般直接分别说三者的特点)
ajax
$.ajax({
type: 'POST',
url: 'xxxx',
data: 'xxxxx',
dataType: 'xxxxx',
success: function () {},
error: function () {}
});
特点:
- ajax 是基于 MVC模式的,没有适应 MVVM 的大军
- ajax 是基于 XMLHttpRequest(XHR)进行的封装,api 操作不够简洁
- 基于Jquery , 不能够被单独使用(必须引入jquery,有点坑爹)
- 异步请求不是特别友好,操作繁琐
- 有新生的fetch即将取代
axios
axios({
method: 'post',
url: 'xxxxx',
data: {
firstName: 'xxxx',
lastName: 'xxxxx'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
特点:
- 支持 Promise API
- 是从 node.js 创建 http 请求
- 提供丰富的 api
- 支持请求、响应拦截
- 客户端支持防止CSRF
- 自动进行数据的装换(默认返回JSON数据)
fetch
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
特点:
- 脱离的 XHR,直接挂载在window对象上
- API丰富,更加底层
- 使用上更加简洁
- 不支持超时控制
- 无法检测进度
- 浏览器的支持不够友好
仁者见仁,智者见智,不管白猫黑猫,能抓老鼠就是好猫,喜欢那个用哪个,没有绝对的好坏
vue中在哪个阶段进行异步请求比较合适(阿里,百度),为什么?
一般在 created 里面就可以,如果涉及到需要页面加载完成之后对页面有操作的的话就用 mounted。
vue中vuex的mapSetter是怎么实现的
export function mapGetters (getters) {
const res = {}
normalizeMap(getters).forEach(({ key, val }) => {
res[key] = function mappedGetter () {
if (!(val in this.$store.getters)) {
console.error(`[vuex] unknown getter: ${val}`)
}
return this.$store.getters[val]
}
})
return res
}
function normalizeMap (map) {
return Array.isArray(map)
? map.map(key => ({ key, val: key }))
: Object.keys(map).map(key => ({ key, val: map[key] }))
}
ES6 模块与 CommonJS 模块的差异
什么是尾递归?
application cache是怎么设置的(网易)
该特性已经从 Web 标准中删除,只做简单了解
参见MDN文档
vue项目中使用到的优化手段
根据项目实际情况,怎么用就这么说,千万别给自己挖坑
解决浏览器的兼容问题
html5shiv.js
解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
respond.js
解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
picturefill.js
解决 IE 9 10 11 等浏览器不支持 标签的问题
<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>
浏览器 CSS 兼容前缀
-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句
完美解决 Placeholder
<input type="text" value="Name *" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name *';}">
清除浮动 最佳实践
.fl { float: left; }
.fr { float: right; }
.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }
.clearfix { zoom: 1; }
BFC 解决边距重叠问题
当相邻元素都设置了 margin 边距时,margin 将取最大值,舍弃小值。为了不让边距重叠,可以给子元素加一个父元素,并设置该父元素为 BFC:overflow: hidden;
<div class="box" id="box">
<p>Lorem ipsum dolor sit.</p>
<div style="overflow: hidden;">
<p>Lorem ipsum dolor sit.</p>
</div>
<p>Lorem ipsum dolor sit.</p>
</div>
解决 IE9 以下浏览器不能使用 opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
键盘事件 keyCode 兼容性写法
var inp = document.getElementById('inp')
var result = document.getElementById('result')
function getKeyCode(e) {
e = e ? e : (window.event ? window.event : "")
return e.keyCode ? e.keyCode : e.which
}
inp.onkeypress = function(e) {
result.innerHTML = getKeyCode(e)
}
求窗口大小的兼容写法
// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;
// 网页内容实际宽高(包括工具栏和滚动条等边线)
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;
// 网页内容实际宽高 (不包括工具栏和滚动条等边线)
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;
// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
跨浏览器事件对象
var EventUtil = {
// 事件监听(添加事件)
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
// 事件监听(移除事件)
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
// 获取事件对象
getEvent: function(event) {
return event ? event : window.event;
},
// 获取目标对象
getTarget: function(event) {
return event.target || event.srcElement;
},
// 组织默认事件
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
// 获取键码
getCharCode: function(event) {
if (typeof event.charCode == "number") {
return event.charCode;
} else {
return event.keyCode; // IE8及之前版本
}
0;
},
// mousewheel 事件 非常流行,而且所有浏览器都支持它,所以 HTML 5 也加入了该事件 )
getWheelDelta: function(event) {
if (event.wheelDelta) {
return client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta;
} else {
return -event.detail * 40;
}
},
// 跨浏览器取得相关元素(鼠标当前进入的元素)
getRelatedTarget: function(event) {
if (event.relatedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement; // IE9+
} else if (event.fromElement) {
return event.fromElement; // IE8
} else {
return null;
}
},
// 获取剪切版的内容
getClipboardText: function(event) {
var clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData("text");
},
// 发送剪切版的内容
setClipboardText: function(event, value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text", value);
}
}
};
// 跨浏览器的写法:获取鼠标页面坐标位置
EventUtil.addHandler(div, "click", function(event) {
event = EventUtil.getEvent(event);
let obj = {};
(obj.pageX = event.pageX), (obj.pageY = event.pageY);
if (pageX === undefined) {
pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if (pageY === undefined) {
pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
return obj;
});
// 某个鼠标事件发生时,通过检测这几个属性就可以确定用户是否同时按下了其中的键。
EventUtil.addHandler(div, "click", function(event) {
event = EventUtil.getEvent(event);
var keys = new Array();
(event.shiftKey) && (keys.push("shift"));
(event.ctrlKey) && (keys.push("ctrl"));
(event.altKey) && (keys.push("alt"));
(event.metaKey) && (keys.push("meta"));
window.console.log("Keys: " + keys.join(","));
});
更多的干货请点击这里
react-native 实战项目学习
欢迎各位看官的批评和指正,共同学习和成长
希望该文章对您有帮助,也希望得到您的鼓励和支持