프런트엔드 개발 문제

반복 바인딩

// ：
// click ；
$("#sdfsd").on("click",function(e){ ***** });
// ：
$("#sdfsd").unbind("click").click(function(e){ ***** });
// 
$("#sdfsd").off().on("click",function(e){ ***** });

게으르다

주로 현재 요소의 offset Top <= 윈도우에 있습니다.height + window.scrollTop은 온로드 시간에 필터를 추가하면 됩니다.

사진 업로드

Blob(Binary Large Object) 대상은 2진 데이터를 대표하고 일련의 조작 인터페이스를 제공한다.다른 바이너리 데이터를 조작하는 API(예를 들어 File 대상)는 모두 Blob 대상을 바탕으로 만들어진 것으로 그 속성과 방법을 계승한다..

Blob 대상을 생성하는 데는 두 가지 방법이 있다. 하나는 Blob 구조 함수를 사용하는 것이고, 다른 하나는 기존의 Blob 대상에 대해 슬라이스 방법으로 일부분을 자르는 것이다

Blob 대상은 두 개의 읽기 전용 속성size가 있습니다. 이진 데이터의 크기, 단위는 바이트입니다.type: 바이너리 데이터의 MIME 형식입니다. 모두 소문자입니다. 형식이 알 수 없으면 빈 문자열입니다.

파일이 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 방법: 읽기 중단이나 리더를 호출합니다.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에 연결된 터치 이벤트를 겸청하여tap 이벤트의 시뮬레이션을 완성하고tap 이벤트는document에 거품을 일으켜 촉발하는 것을 알 수 있다. 왜냐하면 클릭 이벤트는 지연 촉발이 있기 때문이다(이것이 바로 이동단이 클릭을 사용하지 않고tap을 사용하는 이유이다)(대략 300ms,safari의 더블 클릭 이벤트를 실현하기 위한 디자인)

// fastclick.js， fastclick js 
 $("#cbFinish").on("touchend", function (event) {
     // 
     event.preventDefault();
 });
 $("#cbFinish").on("tap", function (event) {
     setTimeout(function(){
     // 
     },320);
 });