js小知识

爬坑
1、空格

1. 标签中直接写的空格：

 

例如：  <font>xiao&nbsp;&nbsp;</font>   此处代表有两个空格

2. 使用vue动态设置文字时的空格：

\xa0或者\u0020

例如：<font>{{font}}</font>
		var vm=new Vue({
			el:"#div_id",
			data:{
				font:"",
			},
			methods:{
				get:function(){
					font="xiao\xa0\u0020"    //此处代表有空格，但是这两个表示的空格大小不相同
				}
			}
		});

2、vue中for循环中的input如何获取输入的文字

这种不行，可以获取并展示第一次服务器的值，但是无法修改，修改直接报错
<ul>
<li v-for="i in 8">
<input v-model="getModel(i)"/>  //这个方法根据不同的i，返回不同的数据源，但是不行
</li>
</ul>

正确的方式
<ul>
<li v-for="item in modelData">
<input v-model="item.model"/>  //这个方法可以直接将数据源的值做展示并修改，双向绑定
</li>
</ul>
数据源：
modelData:[{"model":"","index":1}...]   //index是为了方便记录当前所在下标的位置，model的值可以在使用前进行绑定设置

3、类似Android中的toast的写法

<!-- 中间的提示字符 -->
		<div id="toastDiv" v-show="canshow">
			<font class="font_toast">{{msg}}</font>
		</div>

#toastDiv{
	position:fixed;     //相当于relativelayout
  	left:49%;     //距左边的位置
  	top:49%;   //距上面的位置
  	margin-top:-50px;
  	margin-left:-50px;
}
.font_toast{
	width:auto;
	height:auto;
	border-radius: 10,10,10,10;    //圆角
	padding-left:20px;   //内边距
	padding-right:20px;
	padding-top:15px;
	padding-bottom:15px;
	background:rgba(210,210,210, 0.8);   //有点灰，有点透明度
	font-size:18px;
	color:#000000;   
}

//提示消息的响应
			var vmToast=new Vue({   //中间提示信息
				el:"#toastDiv",
				data:{
					msg:"",  //展示信息
					canshow:false,
					flag:true,   //标记，用来拒绝事件未完成时的重复点击
				},
				methods:{
					show:function(msg,callback){
						//this.canshow=true;  //展示,可以不需要，测试发现fadein可以完成显示
						if(!this.flag)return;  //如果当前有toast未完成，将拒绝toast
						this.flag=false; //做标记
						this.msg=msg; //显示想要展示的数据
						$("#toastDiv").fadeIn(500);
						self.setTimeout(function(){   //显示1.2s后，执行fadeout隐藏事件
							$("#toastDiv").fadeOut(500,function(){
							//隐藏事件执行完成后清除标记并判断callback的类型，若有值并且属于
							//function方法，则执行该回调方法
								vmToast.flag=true;
								(callback && typeof(callback) === "function") && callback();
							});
						},1200);	
					},
				}
			})

4、对axios发送请求的封装，此种一般是异步请求

sengPost:function(url,data1,callBack1,callBack2){   //发送请求
	var CancelToken=axios.CancelToken;
	axios({
		headers:{
			'Content-Type':'application/json',
			'x-requested-with':'XMLHttpRequest'   //这里加这个请求头，是为了方便我的后台全局捕获
			//异常那里区分本次请求异常是来自异步请求还是网页请求；分别返回json数据和网页
		},
		transformRequest:[function(data){
			data=JSON.stringify(data);
			return data;
		}],
		timeout:5000,
		url:url,
		method:'post',
		//params:{},
		data:data1,
		cancelToken:new CancelToken(function(cancel){
			vm.cancelCurrentTag=cancel;
  			vm.cancelTag.push(cancel);
		})
	}).then(function(res){
		vm.cancelFlag();
		(callBack1 && typeof(callBack1) === "function") && callBack1(res);
	}).catch(function(err){
		if(err!="Cancel"){  //非代码取消请求造成的异常，才输出显示
			vm.cancelFlag();
			(callBack2 && typeof(callBack2) === "function") && callBack2(err);
		}
	})
},

//还有一种链式的写法

在这里插入代码片

//data中的
sendPost:{
	me:"",
	url2:"",
	timeout:1000*15,
	da:{},
	function1:null,
	function2:null,
	CancelToken:axios.CancelToken,
	method:function(me){
		this.me=me;
		return this;
	},
	url:function(url){
		this.url2=url;
		return this;
	},
	time:function(timeout){
		this.timeout=timeout;
		return this;
	},
	data:function(da){
		this.da=(da==null?"{}":da);
		return this;
	},
	success:function(function1){
		this.function1=function1;
		return this;
	},
	fail:function(function2){
		this.function2=function2;
		return this;
	},
	send:function(){
		let that=this;
		if(that.me==""||that.url2==""){
			vmToast.show("请求方法和地址为必填项",3000);
			return;
		}
		console.log("执行了")
		axios({
			headers:{
				'Content-Type':'application/json',
				'x-requested-with':'XMLHttpRequest'  //为了后台区分是异步请求，还是网页请求
			},
			transformRequest:[function(data){
				data=JSON.stringify(data);
				return data;
			}],
			timeout:that.timeout,
			url:that.url2,
			method:that.me,
			params:{},
			data:that.da,
			cancelToken:new that.CancelToken(function(cancel){
				//存储键值对映射
				vm.cancelTag.push({"url":that.url2,"cancel":cancel});
				})
			}).then(function(res){
				vmMain.cancelFlag(that.url2);
				(that.function1 && typeof(that.function1) === "function") && that.function1(res.data);
			}).catch(function(err){
				if(err!="Cancel"){  //非代码取消请求造成的异常，才输出显示
					vmMain.cancelFlag(that.url2);
					(that.function2 && typeof(that.function2) === "function") && that.function2("\u0020\u0020\u0020\u0020"+err+"\u0020\u0020\u0020\u0020");
				}
			})
		}
	},
	//method中的
	cancelAll:function(){   //取消之前的全部请求
		$.each(vm.cancelTag,function(i,item){
			item.cancel();
		})
		vm.cancelTag=[];   //取消完之后，再清空记录
	},
	cancel:function(url){   //取消单个的请求，并将其从集合中移除
		let j=-1;
		$.each(vm.cancelTag,function(i,item){
			if(item.url==url){
				item.cancel();
				j=i;
			}
		})
		if(j!=-1)vm.cancelTag.splice(j,1);
	},
	cancelFlag:function(url){    //正常完成请求，移除其中的数据
		var j=-1;
		$.each(vm.cancelTag,function(i,item){
			if(item.url==url)j=i;
		})
		if(j!=-1)vm.cancelTag.splice(j,1);
	},
	cancelTagHasNoUrl:function(url){  //true说明没有此URL正在请求
		var j=-1;
		$.each(vm.cancelTag,function(i,item){
			if(item.url==url)j=i;
		})
		return j==-1;
	},

//vm中

//data里的数据
cancelTag:[],  //取消的tag
configureData:"",//配置内容

5、js链式调用的写法（参考：https://www.cnblogs.com/7qin/p/10236853.html）

//写一个最容易看懂的
var a = {
    b: function(bb) {
        console.log(bb);
        return this;
    },    
    c: function(cc) {
        console.log(cc)
        return this;
    },    
    d: function(dd) {
        console.log(dd)
        return this;
    }
}
a.b(1).c(2).d(3);

6、同步请求，暂时还是记录ajax

$.ajax({
 url:'/comm/test1.php',
 type:'POST', //GET
 async:false, //或false,是否异步
 data:{
  name:'yang',age:25
 },
 timeout:5000, //超时时间
 dataType:'json', //返回的数据格式：
 beforeSend:function(xhr){
 },
 success:function(data,textStatus,jqXHR){
 },
 error:function(xhr,textStatus){
 },
 complete:function(){
 }
})

7、js控制页面滑动到指定位置

//页面
$("body,html").animate({
	scrollTop: "0px"
}, time);
//针对div ，不能使用#直接确定某个div
$('div').prop('scrollTop','100px')

留作记录