前端开发遇到的问题

重复绑定

//原绑定方法：
//这种方法只会在原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);

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);
 });