重复绑定
//原绑定方法：
//这种方法只会在原click方法中继续添加新方法；
$("#sdfsd").on("click",function(e){ ***** });
//解决办法更改绑定方法为：
$("#sdfsd").unbind("click").click(function(e){ ***** });
//这种方法也可以
$("#sdfsd").off().on("click",function(e){ ***** });
懒加载
主要在于，当前元素的offsetTop <= window.height + window.scrollTop就可以，在onload时间中添加一些特效。
图片上传
- Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。
- 生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。
- Blob对象有两个只读属性
size：二进制数据的大小，单位为字节。
type：二进制数据的MIME类型，全部为小写，如果类型未知，则该值为空字符串。- files就是FileList对象
- File API提供File对象，它是FileList对象的成员，包含了文件的一些元信息，比如文件名、上次改动时间、文件大小和文件类型。
readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。- FileReader对象采用异步方式读取文件，可以为一系列事件指定回调函数。
onabort方法：读取中断或调用reader.abort()方法时触发。
onerror方法：读取出错时触发。
onload方法：读取成功后触发。
onloadend方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
onloadstart方法：读取将要开始时触发。
onprogress方法：读取过程中周期性触发。- URL对象用于生成指向File对象或Blob对象的URL。
var objecturl = window.URL.createObjectURL(blob);
var reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result);//为文件内容或者img的src属性
}
reader.readAsText(blob);
<input id=“file1” type="file" name="img" multiple="multiple" />
<input type="file" name="img" accept="image/png,image/gif">
multiple支持多文件上传，accept支持的文件的类型
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
var blob = this.files[0];//获取第一文件，有lastModifiedDate（最新修改时间），name（文件名），size（大小），type（类型）
//files就是FileList对象
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);
网页布局问题
就是在商户list上面有个按钮，点击按钮不跳转，点击其他部分跳转，可以设置
event.stopPropagation();
//event.preventDefault();
点透问题
可以看出zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)
//引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
$("#cbFinish").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
$("#cbFinish").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
网友评论