图片懒加载问题
原理: 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
优点: 解决页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题.
预加载的插件--echo.js
Demo (网上找到的一个demo代码)
JS中Dom 0级和DOM 2级有什么不同
0级DOM
分为2个:一是在标签内写onclick事件
二是在JS写onlicke=function(){}函数
2级DOM
只有一个:监听方法,原生有两个方法用来添加和移除事件处理程序:addEventListener()和removeEventListener()。
它们都有三个参数:第一个参数是事件名(如click);
第二个参数是事件处理程序函数;
第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用
- addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。
- removeEventListener():不能移除匿名添加的函数。
区别:
如果定义了两个dom0级事件,dom0级事件会覆盖
dom2不会覆盖,会依次执行
dom0和dom2可以共存,不互相覆盖,但是dom0之间依然会覆盖
原生Ajax
GET方法:创建 ajax 对象
var ajax = new XMLHttpRequest();
向服务器发起请求
ajax.open('GET','/checkuser',true);//异步同步
ajax.send();
响应
ajax.onreadystatechange=function(){
if(ajax.readyState == 4 &&ajax.status == 200){
var d = ajax.responseText;
}
}
POST方法:
var ajax = new XMLHttpRequest();
ajax.open('post','/aa');
ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');
ajax.send('username='+user.value);
ajax.onreadystatechange = function(){
if(ajax.readyState == 2 &&ajax.status == 200){
var res = ajax.responseText;
};
};
两个盒子左固宽右自适应
第一种方法:
.left{
width:200px;
float:left;
height:200px;
}
.right{
height:200px;
margin-left:200px;
}
第二种方法:
.outside{
position:relative;
}
.left{
width:200px;
height:200px;
position:absoluete;
top:0;
left:0;
}
.right{
height:200px;
}
Vue组件之间传值
父向子:
子组件Child.vue中props一个['tag'] 在template中{{tag}}
父组件data{msg:'hello'} template中 <Child :tag='msg'></Child> ,
子组件内容---
父组件内容---
子向父:
子组件中点击触发函数send,send方法中使用$emit('sendMsg', this.data)第一个参数是自定义一个事件名字,第二个参数是要发送的内容
父组件中在子组件的标签内调用这个自定义的事件,@sendMsg='show',在show(data)这个方法中将子组件传来的值接受使用
子组件内容--
父组件内容--
如何实现修改url地址但是不刷新网页
由于ajax异步请求数据,不能在浏览器的历史中保留记录,也无法改变页面在浏览器中Url地址,不能点击浏览器的前进、后退按钮 ; 如果用户刷新了页面,或者用户改变了会话状态(浏览器的前进、后退、刷新),那么ajax就会丢失相关的数据。所以在h5中引入了history.pushState和history.replaceState很好的解决掉了Ajax存在的这个缺陷
工作原理 : 当使用ajax请求数据,使用window.history.pushState()将指定的URL添加到浏览器历史里,如果想要替换历史记录中的url可以用replaceState是将指定的URL替换当前的URL.这样就可以实现修改url而不刷新页面;通过监听popstate事件,可以监听到用户触发的前进和后退功能