web前段小知识杂记
1.苹果浏览器下input border不起作用
CSS增加设置：
-webkit-appearance: none;
2.IE浏览器URL请求地址中，url中携带参数中有中文，中文不能自动转成URL格式，需要强制装换
增加：encodeURI(url)方法。
3.display设置为inline-block的时候，一行中的元素之前会有间距。
设置父元素：font-size:0
或者设置 margen-left:-4px;
4.ajax请求携带上cookies
原生ajax请求方式：
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);
xhr.withCredentials = true; //支持跨域发送cookies
xhr.send();
jquery的ajax的post方法请求：
$.ajax({
type: "POST",
url: "http://xxx.com/api/test",
dataType: 'jsonp',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function(){
},
error:function(){
}
})
服务器端设置：
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin:http://www.xxx.com");
5.ajax请求的时候设置头信息
//设置Header值，并发送到服务器
function set(){
$.ajax({
url: "Services",
type: "POST",
//1-参数模式
headers: {
"SID" : "10086"
},
beforeSend: function(reqObj, settings) {
//2-动态设置
reqObj.setRequestHeader('XXX', 'VVV');
},
data: {},
error: function(resObj, textStatus, errorThrown) {
//TODO
},
success: function(data, textStatus, resObj) {
alert(resObj.responseText);
}
});
}
6.关于websocket，在前端建立websocket连接之后，如果后台服务器重启，或者断开之后，客户端websocket不会主动重写链接.
解决办法是，将建立websocket的代码封装成一个函数，在websocket.onclose中调用。
如下：
function create_websocket(){
var websocket=new Websocket("ws:");
websocket.onopen=function(){
//do something
}
websocket.onmessage=function(web)
{
//do something
}
websocket.onclose=function(){
setTimeout(function(){
create_websocket();
},5000);
}
}
7.对象采用数组的方法访问
Object.keys()
var bookAuthors = {
"Farmer Giles of Ham": "J.R.R. Tolkien",
"Out of the Silent Planet": "C.S. Lewis",
"The Place of the Lion": "Charles Williams",
"Poetic Diction": "Owen Barfield"
};
var arr = Object.keys(bookAuthors);
8.在IE内核浏览器下，button按钮需要设置line-height，默认从父元素获取line-height.
9.input change事件是在失去焦点后执行。
10.判断是否为IE浏览器
if ("\v" == "v") //true为IE浏览器
11.select默认样式
select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
12.2个inline-block的元素并排的时候会会出现对不齐的问题，这是由于baseline问题引起的，可以将两个元素设置为同样的高度，另外设置:
vertical-align: top 或者
vertical-algin: bottom
13.对于ajax请求，在对同一接口短时间内执行多次请求，返回数据队列与接口请求队列不一致问题处理方法。
//1.对每个ajax请求结果请求判断，如果没有请求成功，不让用户执行新的请求。
// 2.在对同一接口进行数据请求之前终止之前未完成的接口请求。
var request;
function search() {
var get_url='/company/search/?keyword=' + keyword;
if(request!=null)
{
//终止请求
request.abort();
}
console.log(request);
request=$.ajax({
url:get_url,
type:"GET",
success: function(data){
dearch_deal(data);
request=null;
}
});
function dearch_deal(data) {
//处理逻辑
}
return false;
}
14.安卓手机在webview标签中默认最小字体为8px;用rem单位，计算基准值的时候需要设置一下安卓手机的webview
mWebView.getSettings().setMinimumFontSize(1);
mWebView.getSettings().setMinimumLogicalFontSize(1);
15.在苹果浏览器下new Data()不支持yyyy-dd-mm这种格式
//可以直接转换一下
new Date('2011-04-12'.replace(/-/g, "/"))
- #### fixed浏览器无效
fixed定位的元素，如果父级有transform样式，值不为none，那么fixed定位就会失效。
解决方法：使用transform样式的元素，不要包含fixed定位的子元素。或者transform(none)；
17.html页面在ios下白屏的问题
问题描述：在ios的wkwebview下采用Vue进行列表渲染，下拉后点击某一下再返回会出现页面白屏的Bug，
解决办法：用windows.scrollTo(1,0)执行一下
18.lineHeight在安卓下不居中的问题
问题描述：在安卓部分机型上设置lineheight文字会偏上
解决办法：
line-height:
border-top:1px solide transparent;
19.CORS 跨域发送 Cookie
20.cookie详解（含vue-cookie）
21.单点登录（SSO）的设计与实现
22.漫谈单点登录（SSO）
23.新语法
let a=1
`a${a}b` //相当于是字符串拼接 输出 a1b
24.让vue-cli初始化后的项目集成支持SSR
25.在进行js浮点运算的时候一定要注意js的运算精度，结果采用toFixed() 控制小数位
注意：tofixed(2) 输出为字符串
比如 60.79+12
控制台输出：72.78999999999999
