前端实战案例 ​

数组模拟dictionary与二重排序 ​

1. 参考链接：

   js 字典排序JS sort()排序及 JS sort()双重排序前 K 个高频单词

2. 详解：

   • 关于 sort

     • sort([function(a,b){return ±num}])

     • 不传 function 则按照字典序升序排序，传 function 则按数字大小排序，负数为升序排序，正数为降序排序

       • 注意：

         上面的字典序指按 unicode 编码序，若要按拼音序，需要 str.sort (function(a,b){return a.localeCompare(b)})

         如果需要对象属性按拼音排序，可先用Object.keys，把key排序好，再赋值到新对象

     • sort 按照字典序降序排序方法，通过比较 if(a>b)，返回正数还是负数，控制排序顺序

     • 多重排序也可通过 if 判断，返回正负数控制排序顺序，其中 if 里面的参数可以与原数组 array1 无关，如 array2[a]>array2[b]

   • 样例

     统计词频，按照词频降序排序，词频相同按照字典序升序排序

     javascript

     let words = [
       "plpaboutit",
       "jnoqzdute",
       "sfvkdqf",
       "mjc",
       "nkpllqzjzp",
       "foqqenbey",
       "ssnanizsav",
       "nkpllqzjzp",
       "sfvkdqf",
       "isnjmy",
       "pnqsz",
       "hhqpvvt",
       "fvvdtpnzx",
       "jkqonvenhx",
       "cyxwlef",
       "hhqpvvt",
       "fvvdtpnzx",
       "plpaboutit",
       "sfvkdqf",
       "mjc",
       "fvvdtpnzx",
       "bwumsj",
       "foqqenbey",
       "isnjmy",
       "nkpllqzjzp",
       "hhqpvvt",
       "foqqenbey",
       "fvvdtpnzx",
       "bwumsj",
       "hhqpvvt",
       "fvvdtpnzx",
       "jkqonvenhx",
       "jnoqzdute",
       "foqqenbey",
       "jnoqzdute",
       "foqqenbey",
       "hhqpvvt",
       "ssnanizsav",
       "mjc",
       "foqqenbey",
       "bwumsj",
       "ssnanizsav",
       "fvvdtpnzx",
       "nkpllqzjzp",
       "jkqonvenhx",
       "hhqpvvt",
       "mjc",
       "isnjmy",
       "bwumsj",
       "pnqsz",
       "hhqpvvt",
       "nkpllqzjzp",
       "jnoqzdute",
       "pnqsz",
       "nkpllqzjzp",
       "jnoqzdute",
       "foqqenbey",
       "nkpllqzjzp",
       "hhqpvvt",
       "fvvdtpnzx",
       "plpaboutit",
       "jnoqzdute",
       "sfvkdqf",
       "fvvdtpnzx",
       "jkqonvenhx",
       "jnoqzdute",
       "nkpllqzjzp",
       "jnoqzdute",
       "fvvdtpnzx",
       "jkqonvenhx",
       "hhqpvvt",
       "isnjmy",
       "jkqonvenhx",
       "ssnanizsav",
       "jnoqzdute",
       "jkqonvenhx",
       "fvvdtpnzx",
       "hhqpvvt",
       "bwumsj",
       "nkpllqzjzp",
       "bwumsj",
       "jkqonvenhx",
       "jnoqzdute",
       "pnqsz",
       "foqqenbey",
       "sfvkdqf",
       "sfvkdqf",
     ];
     let dictionary = new Array();
     for (let i = 0; i < words.length; i++) {
       if (!dictionary[words[i]]) {
         dictionary[words[i]] = 1;
       } else {
         dictionary[words[i]]++;
       }
     }
     let result = Object.keys(dictionary).sort((a, b) => {
       if (dictionary[a] == dictionary[b]) {
         if (a > b) {
           return 1;
         } else {
           return -1;
         }
       }
       return dictionary[b] - dictionary[a];
     });
     for (let value of result) {
       console.log(value, dictionary[value]);
     }

前端截图上传服务器实现 ​

1. 参考链接：

   浅析 js 实现网页截图的两种方式

2. 详解：

   • canvas 思路:(html2canvas)

   将dom转换成canvas图片。
   
   递归取出目标模版的所有DOM节点，填充到一个rederList，并附加是否为顶层元素/包含内容的容器 等信息
   
   通过z-index postion float等css属性和元素的层级信息将rederList排序，计算出一个canvas的renderQueue
   
   遍历renderQueue，将css样式转为setFillStyle可识别的参数，依据nodeType调用相对应canvas方法，如文本则调用fillText，图片drawImage，设置背景色的div调用fillRect等
   
   将画好的canvas填充进页面

   优缺点:复杂度高，稳定性强。

   • svg 思路:(rasterizeHTML.js)

   svg的标签里有个foreignObject标签，可以加载其它命名空间的xml(xhtml)文档,只需要将要渲染的DOM扔进<foreignObject></foreignObject>，利用Blob构建svg图像。
   通过一系列的hack技巧替我们绕过了许多限制:
   1.将<img/>的url 转为 dataURI
   2.将background-color从style中取出，修改url后重新插入样式表
   3.将link的的样式通过ajax down下来然后注入<style></sytle>

   优缺点:简单，只能对已经存在的静态资源进行处理，而对 js 动态生成并不能实时处理。

   • 上传
   javascript

   var fd = new FormData();
   fd.append("img", imgBlob);
   $.ajax({
     type: "POST",
     url: "http://tmpfile.coding.io/img",
     dataType: "json",
     data: fd,
     crossDomain: true,
     processData: false,
     contentType: false,
     success: function (data) {
       if (data && data.path) {
         console.log("http://tmpfile.coding.io/tmp" + data.path);
       }
     },
   });

日历的实现 ​

1. 参考链接：

   Date

2. 详解：

   • new Date()

     用法：

     • new Date();
     • new Date(value);
     • new Date(dateString);
     • new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

     new Date(this.selectedYear,this.selectedMonth,0)会获得当月最后一天的日期

   • set 方法

   凡是 set 方法，传入数超出合理范围，会自动转为毫秒处理，再使用 get 获取信息，因此日月的加减不需要处理进位和退位问题。

   • 6x7 的日历显示

     • 新开长度为 42 的数组

     • 因为第一行一定会出现本月的数字，于是 getDay 计算本月 1 号时星期几，确定 1 号位于数组的位置

     • 从 1 号开始填充本月进数组

     • 通过日期加减，把数组剩余位置填满

     • 设置 ul 宽度，使 li 每 7 格换一次行

   javascript

   // 根据给定日期算出星期
   getDay(date){
       return new Date(date).getDay();
   }
   
   // 获取某月的天数
   getMonthNumber(){
       let d = new Date(this.selectedYear,this.selectedMonth,0);
       let num = d.getDate();
       return num;
   }
   
   // 获取某一天的昨天和明天
   // date 代表指定的日期，格式：2018-09-27
   // day 传-1表始前一天，传1表始后一天
   getNextDate(date,day) {
       var dd = new Date(date);
       dd.setDate(dd.getDate() + day);
       var y = dd.getFullYear();
       var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
       var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
       return y + "-" + m + "-" + d;
   }
   
   // 获取日历中某一天的昨天和明天的数字
   getNextDayNumber(date,day){
       var dd = new Date(date);
       dd.setDate(dd.getDate() + day);
       var d = dd.getDate();
       return d;
   }

图片懒加载 ​

1. 参考链接

   js 实现图片懒加载原理

   图片懒加载原理及实现

2. 详解

   • 描述

     一个网页包含大量图片，并发加载会影响渲染速度和占用带宽，如果改为可视区域加载，则能优化性能。

   • 原理

     图片是否加载取决于 img 标签的 src，先不给 src 赋值，等到进入可视区域再赋值，这时候才请求图片

   • 思路

     1. loading 图片
     2. 判断可视区域：$img.offset().top <= $(window).height()+$(window).scrollTop() 元素距离顶部的距离<=可视区域高度+窗口滚动距离
     3. 替换图片

   • 实现

     html

     <div class="imgList">
       <img class="lazy" src="img/loading.gif" data-src="img/pic1" alt="pic" />
       <img class="lazy" src="img/loading.gif" data-src="img/pic2" alt="pic" />
       <img class="lazy" src="img/loading.gif" data-src="img/pic3" alt="pic" />
     </div>
     <script>
       $(() => {
         let lazyload = () => {
           for (let i = 0; i < $(".lazy").length; i++) {
             if (
               $(".lazy").eq(i).offset().top <=
               $(window).height() + $(window).scrollTop()
             ) {
               $(".lazy").eq(i).attr("src", $(".lazy").eq(i).data("src"));
             }
           }
         };
         lazyload();
         $(window).on("scroll", function () {
           lazyload();
         });
       });
     </script>

获取URL参数 ​

1. 参考链接

   【干货】私藏的这些高级工具函数，你拥有几个?

   正则获取 URL 参数

2. 详解

   • 获取指定 URL 参数
   javascript

   function getUrlParams(name) {
     //(^|&)从头开始或匹配字符&,([^&]*)匹配不是&的任何内容,(&|$)遇到下一个&或者结束
     //在正则表达式中，增加一个()代表着匹配数组中增加一个值, 因此代码中的正则匹配后数组中应包含4个值(完整匹配+3个括号)
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
     var r = window.location.search.substr(1).match(reg);
     if (r != null) return unescape(r[2]); //获取([^&]*)的结果
     return null;
   }
   
   window.location = "http://www.baidu.com?name=elephant&age=25&sex=male";
   var name = getUrlParams("name"); //elephant
   var age = getUrlParams("age"); //25
   var sex = getUrlParams("sex"); //male

   • 获取所有的 URL 参数
   javascript

   function parse_url(_url) {
     //定义函数
     var pattern = /(\w+)=(\w+)/gi; //定义正则表达式
     var parames = {}; //定义数组
     url.replace(pattern, function (a, b, c) {
       //替换函数(完整匹配+2个括号)
       parames[b] = c;
     });
     return parames; //返回这个数组.
   }
   
   var url = "http://www.baidu.com?name=elephant&age=25&sex=male";
   var params = parse_url(url); // ["name=elephant", "age=25", "sex=male"]

   • URLSearchParams和URL(IE不支持)
   javascript

   const urlSP = new URLSearchParams(location.search);
   function getQueryString(key){
       return urlSP.get(key)
   }
   
   const urlObj = new URL(location.href);
   function getQueryString(key){
       return urlObj.searchParams.get(key)
   }
   
   //测试地址： /index.html?pid=10
   
   const log = console.log;
   getQueryString
   
   log("pid", getQueryString("pid"));  // pid 10
   log("cid", getQueryString("cid"));  // cid null

js操作cookie ​

1. 参考链接：

• 十道大厂面试题(含答案)总结
• JS 中 cookie 的设置，读取，删除，更新覆盖等
• 运用 JS 设置 cookie、读取 cookie、删除 cookie

2. 详解：

• 获取

function getCookie(name) {
  var arr,
    reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if ((arr = document.cookie.match(reg))) return unescape(arr[2]);
  else return null;
}

• 设置/添加

function setCookie(name, value) {
  var Days = 30;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie =
    name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

• 更新

function updateCookie(name, value) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var currentValue = getCookie(name);
  if (currentValue != null) {
    document.cookie =
      name + "=" + escape(value) + ";expires=" + exp.toGMTString();
  }
}

• 删除

function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

文件切片上传 ​

1. 参考链接

   前端 h5 文件切片上传,后台 php 接收切片并合并

2. 详解

   没法实现错误重传，中途断网则中断，因为：

   1. 重传则快速递归 ajax 卡死浏览器，没法实现休眠 3 秒(js 单线程原因)来使 ajax 间隔开，因为 settimeout 没法同步执行，await 也没用
   2. 如果改为保存状态，把后面的执行完，再回头执行，也无法避免快速递归卡死的情况
   3. 无法通过服务器响应来阻塞程序，因为断网服务器不会有响应

   解决的办法：上传文件前，通过文件名(文件名相同，文件不同，则自行负责)向服务器询问是否有此文件的片段，有则返回序号，从序号开始继续分片上传。

   上传内容：

   1. 文件名
   2. 分片名
   3. 文件二进制流
   4. 分片序号
   5. 分片大小
   6. (总文件大小)
   7. (分片总数)
   html

   <input id="in" type="file" />
   <script>
     $(function () {
       let pieceSize = 10;
       var totalSize = 0;
   
       $("#in").on("change", function () {
         handleFiles(this.files);
       });
   
       async function handleFiles(fileList) {
         var i = 0;
         while (i < fileList.length) {
           console.log("=================================================");
           console.log(
             "开始处理第" +
               i +
               "个文件, 文件是" +
               fileList[i]["name"] +
               "大小是:" +
               fileList[i]["size"]
           );
           var targetFile = fileList[i];
           totalSize += targetFile.size;
           await uploadFile(targetFile, i);
           i++;
           if (i == fileList.length) return;
         }
       }
   
       async function uploadFile(targetFile, index) {
         //console.log(targetFile);
         var tmp = targetFile.name.split(".");
         //var filename = "file-" + guid() + '.' + tmp[tmp.length - 1];
         var fileSize = targetFile.size;
         var total = Math.ceil(fileSize / pieceSize);
   
         await handle();
   
         async function handle() {
           var i = 0;
           var start = (end = 0);
           while (i < total) {
             end = start + pieceSize;
   
             if (end >= fileSize) {
               end = fileSize;
             }
   
             console.log(
               "文件的index:" + index + "| 处理文件切片 i:" + i,
               "start:" + start,
               "end:" + end
             );
             var frag = targetFile.slice(start, end);
   
             var filename = "file-" + i + "." + tmp[tmp.length - 1];
   
             await send(filename, frag, i, total, function () {
               console.log(
                 "文件的index:" + index + "| 切片上传完成 回调 res111",
                 i
               );
             });
   
             start = end;
             i++;
           }
         }
       }
   
       //send
       async function send(filename, frag, index, total, cb) {
         var formData = new FormData();
         var fragname = "frag-" + index;
   
         formData.append("filename", filename);
         formData.append("fragname", fragname);
         formData.append("file", frag);
         formData.append("fragindex", index);
         formData.append("total", total);
   
         await $.ajax({
           url: "/cms/test1",
           type: "POST",
           cache: false,
           data: formData,
           processData: false,
           contentType: false,
         })
           .done(function (res) {
             //console.log('res:' + index);
             cb && cb();
           })
           .fail(function (res) {});
       }
     });
   </script>

大文件切片并行下载 ​

1. 参考链接

JavaScript 中如何实现大文件并行下载？

HTTP之HEAD请求

文件下载，搞懂这9种场景就够了

2. 详解

• range范围下载

  • http范围请求range

    如果在响应中存在 Accept-Ranges 首部（并且它的值不为 “none”），那么表示该服务器支持范围请求。

    在一个 Range 首部中，可以一次性请求多个部分，服务器会以 multipart 文件的形式将其返回。

    如果服务器返回的是范围响应，需要使用 206 Partial Content 状态码。

    假如所请求的范围不合法，那么服务器会返回 416 Range Not Satisfiable 状态码，表示客户端错误。

    服务器允许忽略 Range 首部，从而返回整个文件，状态码用 200 。

    range请求头

    Range: bytes=0-50, 100-150, 150-200
    Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, ...
    range-end如果不存在，表示此范围一直延伸到文档结束。

  • head请求

    HEAD方法与GET类似，但是HEAD并不返回消息体。

    这种方法可以用来获取请求中隐含的元信息，而无需传输实体本身。

    这个方法经常用来:

    1. 测试超链接的有效性，可用性和最近修改。
    2. 检查网页是否被串改。
    3. 获取下载文件大小。
    4. 获取网页的标志信息，获取rss种子信息，或者传递安全认证信息等。

  • 样例

  html

  <!DOCTYPE html>
  <html lang="zh-cn">
  
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多线程下载示例</title>
    <script>
      function concatenate(arrays) {
        if (!arrays.length) return null;
        let totalLength = arrays.reduce((acc, value) => acc + value.length, 0);
        let result = new Uint8Array(totalLength);
        let length = 0;
        for (let array of arrays) {
          result.set(array, length);
          length += array.length;
        }
        return result;
      }
  
      function getContentLength(url) {
        return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest();
          xhr.open("HEAD", url);// 发送 HEAD 请求
          xhr.send();
          xhr.onload = function () {
            resolve(
              // xhr.getResponseHeader("Accept-Ranges") === "bytes" &&
              ~~xhr.getResponseHeader("Content-Length") // 获取当前 url 对应文件的内容长度
            );
          };
          xhr.onerror = reject;
        });
      }
  
      function getBinaryContent(url, start, end, i) {
        return new Promise((resolve, reject) => {
          try {
            let xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.setRequestHeader("range", `bytes=${start}-${end}`); // 请求头上设置范围请求信息
            xhr.responseType = "arraybuffer"; // 设置返回的类型为arraybuffer
            xhr.onload = function () {
              resolve({
                index: i, // 文件块的索引
                buffer: xhr.response, // 范围请求对应的数据
              });
            };
            xhr.send();
          } catch (err) {
            reject(new Error(err));
          }
        });
      }
  
      function saveAs({ name, buffers, mime = "application/octet-stream" }) {
        const blob = new Blob([buffers], { type: mime });
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.download = name || Math.random();
        a.href = blobUrl;
        a.click();
        URL.revokeObjectURL(blob);
      }
  
      // poolLimit（数字类型）：表示限制的并发数；
      // array（数组类型）：表示任务数组；
      // iteratorFn（函数类型）：表示迭代函数，用于实现对每个任务项进行处理，该函数会返回一个 Promise 对象或异步函数。
      async function asyncPool(poolLimit, array, iteratorFn) {
        const ret = []; // 存储所有的异步任务
        const executing = []; // 存储正在执行的异步任务
        for (const item of array) {
          // 调用iteratorFn函数创建异步任务
          const p = Promise.resolve().then(() => iteratorFn(item, array));
          ret.push(p); // 保存新的异步任务
          console.log(`ret:${ret},executing:${executing}`);
          // 当poolLimit值小于或等于总任务个数时，进行并发控制
          if (poolLimit <= array.length) {
            // 当任务完成后，从正在执行的任务数组中移除已完成的任务
            const e = p.then(() => executing.splice(executing.indexOf(e), 1));
            executing.push(e); // 保存正在执行的异步任务
            console.log(`e:${e}`);
            if (executing.length >= poolLimit) {
              await Promise.race(executing); // 等待较快的任务执行完成
            }
          }
        }
        return Promise.all(ret);
      }
  
      // url（字符串类型）：预下载资源的地址；
      // chunkSize（数字类型）：分块的大小，单位为字节；
      // poolLimit（数字类型）：表示限制的并发数。
      async function download({ url, chunkSize, poolLimit = 1 }) {
        const contentLength = await getContentLength(url);
        const chunks = typeof chunkSize === "number" ? Math.ceil(contentLength / chunkSize) : 1;
        console.log(`contentLength:${contentLength},chunkSize:${chunkSize},chunks:${chunks}`);
        const results = await asyncPool(
          poolLimit,
          [...new Array(chunks).keys()],
          (i) => {
            let start = i * chunkSize;
            let end = i + 1 == chunks ? contentLength - 1 : (i + 1) * chunkSize - 1;
            console.log(`start:${start},end:${end}`);
            return getBinaryContent(url, start, end, i);
          }
        );
        console.log(`results${results}`)
        const sortedBuffers = results.map((item) => new Uint8Array(item.buffer));
        console.log(`sortedBuffers${sortedBuffers}`)
        return concatenate(sortedBuffers);
      }
    </script>
  </head>
  
  <body>
    <p>文件地址：<input type="text" id="fileUrl" value="" /></p>
    <div>
      <h3>多线程下载</h3>
      <button onclick="multiThreadedDownload()">多线程下载</button>
    </div>
    <script>
      function multiThreadedDownload() {
        const url = document.querySelector("#fileUrl").value;
        if (!url || !/https?/.test(url)) return;
        console.log("多线程下载开始: " + +new Date());
        download({
          url,
          chunkSize: 2 * 1024 * 1024,
          poolLimit: 6,
        }).then((buffers) => {
          console.log("多线程下载结束: " + +new Date());
          saveAs({ buffers, name: "我的压缩包", mime: "application/zip" });
        });
      }
    </script>
  </body>
  
  </html>

  • 样例2

  range

  前端代码

  html

  <h3>范围下载示例</h3>
  <button onclick="download()">下载</button>
  <script>
    async function download() {
      try {
        let rangeContent = await getBinaryContent(
          "http://localhost:3000/file.txt",
          0, 100, "text"
        );
        const blob = new Blob([rangeContent], {
          type: "text/plain;charset=utf-8",
        });
        saveAs(blob, "hello.txt");
      } catch (error) {
        console.error(error);
      }
    }
  
    function getBinaryContent(url, start, end, responseType = "arraybuffer") {
      return new Promise((resolve, reject) => {
        try {
          let xhr = new XMLHttpRequest();
          xhr.open("GET", url, true);
          xhr.setRequestHeader("range", `bytes=${start}-${end}`);
          xhr.responseType = responseType;
          xhr.onload = function () {
            resolve(xhr.response);
          };
            xhr.send();
        } catch (err) {
            reject(new Error(err));
        }
      });
    }
  </script>

  服务端代码

  javascript

  const Koa = require("koa");
  const cors = require("@koa/cors");
  const serve = require("koa-static");
  const range = require("koa-range");
  
  const PORT = 3000;
  const app = new Koa();
  
  // 注册中间件
  app.use(cors());
  app.use(range);
  app.use(serve("."));
  
  app.listen(PORT, () => {
    console.log(`应用已经启动：http://localhost:${PORT}/`);
  });

• 大文件分块下载

  使用这个库来实现并发控制:asyncPool

  示例:big-file

• chunked 下载

  分块传输编码主要应用于传输大量的数据,在请求在没有被处理完之前无法获得响应的长度,如从数据库中查询获得的数据生成一个大的 HTML 表格，或者需要传输大量的图片

  Transfer-Encoding 和 Content-Length 这两个字段是互斥的，也就是说响应报文中这两个字段不能同时出现。

  响应头配置 Transfer-Encoding

  Transfer-Encoding: chunked
  Transfer-Encoding: gzip, chunked

  • 分块传输的编码规则

    • 每个分块包含分块长度和数据块两个部分；
    • 分块长度使用 16 进制数字表示，以 \r\n 结尾；
    • 数据块紧跟在分块长度后面，也使用 \r\n 结尾，但数据不包含 \r\n；
    • 终止块是一个常规的分块，表示块的结束。不同之处在于其长度为 0，即 0\r\n\r\n。

  • 样例

    chunked

    前端代码

    html

    <h3>chunked 下载示例</h3>
    <button onclick="download()">下载</button>
    <script>
      const chunkedUrl = "http://localhost:3000/file?filename=file.txt";
    
      function download() {
        return fetch(chunkedUrl)
          .then(processChunkedResponse)
          .then(onChunkedResponseComplete)
          .catch(onChunkedResponseError);
      }
    
      function processChunkedResponse(response) {
        let text = "";
        let reader = response.body.getReader();
        let decoder = new TextDecoder();
    
        return readChunk();
    
        function readChunk() {
          return reader.read().then(appendChunks);
        }
    
        function appendChunks(result) {
          let chunk = decoder.decode(result.value || new Uint8Array(), {
            stream: !result.done,
          });
          console.log("已接收到的数据：", chunk);
          console.log("本次已成功接收", chunk.length, "bytes");
          text += chunk;
          console.log("目前为止共接收", text.length, "bytes\n");
          if (result.done) {
            return text;
          } else {
            return readChunk();
          }
        }
      }
    
      function onChunkedResponseComplete(result) {
        let blob = new Blob([result], {
          type: "text/plain;charset=utf-8",
        });
        saveAs(blob, "hello.txt");
      }
    
      function onChunkedResponseError(err) {
        console.error(err);
      }
    </script>

    服务端代码

    javascript

    const fs = require("fs");
    const path = require("path");
    const Koa = require("koa");
    const cors = require("@koa/cors");
    const Router = require("@koa/router");
    
    const app = new Koa();
    const router = new Router();
    const PORT = 3000;
    
    router.get("/file", async (ctx, next) => {
      const { filename } = ctx.query;
      const filePath = path.join(__dirname, filename);
      ctx.set({
        "Content-Type": "text/plain;charset=utf-8",
      });
      ctx.body = fs.createReadStream(filePath);
    });
    
    // 注册中间件
    app.use(async (ctx, next) => {
      try {
        await next();
      } catch (error) {
        // ENOENT（无此文件或目录）：通常是由文件操作引起的，这表明在给定的路径上无法找到任何文件或目录
        ctx.status = error.code === "ENOENT" ? 404 : 500;
        ctx.body = error.code === "ENOENT" ? "文件不存在" : "服务器开小差";
      }
    });
    app.use(cors());
    app.use(router.routes()).use(router.allowedMethods());
    
    app.listen(PORT, () => {
      console.log(`应用已经启动：http://localhost:${PORT}/`);
    });

• 其它非切片下载

  • base64 格式下载

    base64

    前端代码

    html

    <h3>base64 下载示例</h3>
    <img id="imgPreview" src="./static/body.png" />
    <select id="picSelect">
      <option value="body">body.png</option>
      <option value="eyes">eyes.png</option>
      <option value="mouth">mouth.png</option>
    </select>
    <button onclick="download()">下载</button>
    <script>
    const picSelectEle = document.querySelector("#picSelect");
    const imgPreviewEle = document.querySelector("#imgPreview");
    
    picSelectEle.addEventListener("change", (event) => {
      imgPreviewEle.src = "./static/" + picSelectEle.value + ".png";
    });
    
    const request = axios.create({
      baseURL: "http://localhost:3000",
      timeout: 60000,
    });
    
    function base64ToBlob(base64, mimeType) {
      let bytes = window.atob(base64);
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeType });
    }
    
    async function download() {
      const response = await request.get("/file", {
        params: {
          filename: picSelectEle.value + ".png",
        },
      });
      if (response && response.data && response.data.code === 1) {
        const fileData = response.data.data;
        const { name, type, content } = fileData;
        const imgBlob = base64ToBlob(content, type);
        saveAs(imgBlob, name);
      }
    }
    </script>

    服务端代码

    javascript

    // base64/file-server.js
    const fs = require("fs");
    const path = require("path");
    const mime = require("mime");
    const Koa = require("koa");
    const cors = require("@koa/cors");
    const Router = require("@koa/router");
    
    const app = new Koa();
    const router = new Router();
    const PORT = 3000;
    const STATIC_PATH = path.join(__dirname, "./static/");
    
    router.get("/file", async (ctx, next) => {
      const { filename } = ctx.query;
      const filePath = STATIC_PATH + filename;
      const fileBuffer = fs.readFileSync(filePath);
      ctx.body = {
        code: 1,
        data: {
          name: filename,
          type: mime.getType(filename),
          content: fileBuffer.toString("base64"),
        },
      };
    });
    
    // 注册中间件
    app.use(async (ctx, next) => {
      try {
        await next();
      } catch (error) {
        ctx.body = {
          code: 0,
          msg: "服务器开小差",
        };
      }
    });
    app.use(cors());
    app.use(router.routes()).use(router.allowedMethods());
    
    app.listen(PORT, () => {
      console.log(`应用已经启动：http://localhost:${PORT}/`);
    });

  • 附件形式下载

    在服务端下载的场景中，设置 Content-Disposition 响应头来指示响应的内容以何种形式展示，是以内联（inline）的形式，还是以附件（attachment）的形式下载并保存到本地。

    Content-Disposition: inline
    Content-Disposition: attachment
    Content-Disposition: attachment; filename="mouth.png"

    在 HTTP 表单的场景下， Content-Disposition 也可以作为 multipart body 中的消息头

    Content-Disposition: form-data
    Content-Disposition: form-data; name="fieldName"
    Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

    attachment

    javascript

    // attachment/file-server.js
    const fs = require("fs");
    const path = require("path");
    const Koa = require("koa");
    const Router = require("@koa/router");
    
    const app = new Koa();
    const router = new Router();
    const PORT = 3000;
    const STATIC_PATH = path.join(__dirname, "./static/");
    
    // http://localhost:3000/file?filename=mouth.png
    router.get("/file", async (ctx, next) => {
      const { filename } = ctx.query;
      const filePath = STATIC_PATH + filename;
      const fStats = fs.statSync(filePath);
      ctx.set({
        "Content-Type": "application/octet-stream",
        "Content-Disposition": `attachment; filename=${filename}`,
        "Content-Length": fStats.size,
      });
      ctx.body = fs.createReadStream(filePath);
    });
    
    // 注册中间件
    app.use(async (ctx, next) => {
      try {
        await next();
      } catch (error) {
        // ENOENT（无此文件或目录）：通常是由文件操作引起的，这表明在给定的路径上无法找到任何文件或目录
        ctx.status = error.code === "ENOENT" ? 404 : 500;
        ctx.body = error.code === "ENOENT" ? "文件不存在" : "服务器开小差";
      }
    });
    app.use(router.routes()).use(router.allowedMethods());
    
    app.listen(PORT, () => {
      console.log(`应用已经启动：http://localhost:${PORT}/`);
    });

  • Zip 下载

    JSZip可供前端压缩文件，可压缩上传和下载压缩

    Zip

    html

    <h3>Zip 下载示例</h3>
    <div>
      <img src="../images/body.png" />
      <img src="../images/eyes.png" />
      <img src="../images/mouth.png" />
    </div>
    <button onclick="download()">打包下载</button>
    <script>
    const images = ["body.png", "eyes.png", "mouth.png"];
    const imageUrls = images.map((name) => "../images/" + name);
    
    async function download() {
      let zip = new JSZip();
      Promise.all(imageUrls.map(getFileContent)).then((contents) => {
        contents.forEach((content, i) => {
          zip.file(images[i], content);
        });
        zip.generateAsync({ type: "blob" }).then(function (blob) {
          saveAs(blob, "material.zip");
        });
      });
    }
    
    // 从指定的url上下载文件内容
    function getFileContent(fileUrl) {
      return new JSZip.external.Promise(function (resolve, reject) {
        // 调用jszip-utils库提供的getBinaryContent方法获取文件内容
        JSZipUtils.getBinaryContent(fileUrl, function (err, data) {
          if (err) {
            reject(err);
          } else {
            resolve(data);
          }
        });
      });
    }
    </script>

  • FileSaver 下载

    FileSaver

    它是 HTML5 版本的 saveAs() FileSaver 实现，支持大多数主流的浏览器，非常适合在客户端上生成文件的 Web 应用程序

    可以使用它提供的 saveAs 方法来保存文件

    javascript

    FileSaver saveAs(
      Blob/File/Url, //支持 Blob/File/Url 三种类型
      optional DOMString filename, //文件名（可选）
      optional Object { autoBom }//配置对象（可选）自动提供 Unicode 文本编码提示，则需要设置 { autoBom: true}
    )

    保存文本

    javascript

    let blob = new Blob(["大家好，我是阿宝哥!"], { type: "text/plain;charset=utf-8" });
    saveAs(blob, "hello.txt");

    保存线上资源

    javascript

    //同域:使用 a[download] 方式下载
    //跨域:使用 同步的 HEAD 请求 来判断是否支持 CORS 机制
      //支持:数据下载并使用 Blob URL 实现文件下载
      //不支持:尝试使用 a[download] 方式下载
    saveAs("https://httpbin.org/image", "image.jpg");

    保存 canvas 画布内容:canvas.toBlob() 方法并非在所有浏览器中都可用,兼容处理canvas-toBlob.js

    javascript

    let canvas = document.getElementById("my-canvas");
    canvas.toBlob(function(blob) {
      saveAs(blob, "abao.png");
    });

    file-saver

    javascript

    function download() {
      if (!imgDataUrl) {
        alert("请先合成图片");
        return;
      }
      const imgBlob = dataUrlToBlob(imgDataUrl, "image/png");
      saveAs(imgBlob, "face.png");
    }

  • showSaveFilePicker API 下载

    兼容性要求较高(chrome 86+)

    save-file-picker

    javascript

    async function saveFile(blob, filename) {
      try {
        const handle = await window.showSaveFilePicker({
          suggestedName: filename,
          types: [
            {
              description: "PNG file",
              accept: {
                "image/png": [".png"],
              },
            },
            {
              description: "Jpeg file",
              accept: {
                "image/jpeg": [".jpeg"],
              },
            },
          ],
        });
        const writable = await handle.createWritable();
        await writable.write(blob);
        await writable.close();
        return handle;
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
    
    function download() {
      if (!imgDataUrl) {
        alert("请先合成图片");
        return;
      }
      const imgBlob = dataUrlToBlob(imgDataUrl, "image/png");
      saveFile(imgBlob, "face.png");
    }

  • a 标签下载

    a-tag

    javascript

    function dataUrlToBlob(base64, mimeType) {
      let bytes = window.atob(base64.split(",")[1]);
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeType });
    }
    
    // 保存文件
    function saveFile(blob, filename) {
      const a = document.createElement("a");
      a.download = filename;
      a.href = URL.createObjectURL(blob);
      a.click();
      URL.revokeObjectURL(a.href)
    }

长列表优化 ​

1. 参考链接：

   简洁、巧妙、高效的长列表，无限下拉方案

   vue-virtual-scroll-list 源代码

   Intersection Observer

2. 详解

   • 两个要素

     1. intersection observer

        • 作用

          IntersectionObserver 接口 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根

          异步查询元素相对于其他元素或视窗的位置，消除了昂贵的 DOM 查询和样式读取成本。兼容性较差，需要 polyfill。

        • 场景

          1. 页面滚动时的懒加载实现。
          2. 无限下拉（本文的实现）。
          3. 监测某些广告元素的曝光情况来做相关数据统计。
          4. 监测用户的滚动行为是否到达了目标位置来实现一些交互逻辑（比如视频元素滚动到隐藏位置时暂停播放）。

     2. padding

   • 长列表优化思路

     • 监听一个固定长度列表的首尾元素是否进入视窗;
     • 更新当前页面内渲染的第一个元素对应的序号;
     • 根据上述序号，获取目标数据元素，列表内容重新渲染成对应内容;
     • 容器 padding 调整，模拟滚动实现。

     核心：利用父元素的 padding 去填充随着无限下拉而本该有的、越来越多的 DOM 元素，仅仅保留视窗区域上下一定数量的 DOM 元素来进行数据渲染。

   • 实现

     1. 监听一个固定长度列表的首尾元素是否进入视窗

        javascript

        // 观察者创建
        this.observer = new IntersectionObserver(callback, options);
        
        // 观察列表第一个以及最后一个元素
        this.observer.observe(this.firstItem);
        this.observer.observe(this.lastItem);
        
        //当他们其中一个重新进入视窗时，callback 函数就会触发
        const callback = (entries) => {
          entries.forEach((entry) => {
            if (entry.target.id === firstItemId) {
              // 当第一个元素进入视窗
            } else if (entry.target.id === lastItemId) {
              // 当最后一个元素进入视窗
            }
          });
        };

     2. 更新当前页面渲染的第一个元素对应的序号 (firstIndex)

        • 用一个数组来维护需要渲染到页面中的数据。数组的长度会随着不断请求新的数据而不断变大，而渲染的始终是其中一定数量的元素,比如 20 个

        • 最开始渲染的是数组中序号为 0 - 19 的元素，即此时对应的 firstIndex 为 0

        • 当序号为 19 的元素（即上一步的 lastItem ）进入视窗时，我们就会往后渲染 10 个元素，即渲染序号为 10 - 29 的元素，那么此时的 firstIndex 为 10

        • 下一次就是，当序号为 29 的元素进入视窗时，继续往后渲染 10 个元素，即渲染序号为 20 - 39 的元素，那么此时的 firstIndex 为 20，以此类推

        javascript

        // 我们对原先的 firstIndex 做了缓存
        const { currentIndex } = this.domDataCache;
        
        // 以全部容器内所有元素的一半作为每一次渲染的增量
        const increment = Math.floor(this.listSize / 2);
        
        let firstIndex;
        
        //更新 firstIndex，是为了根据页面的滚动情况，知道接下来哪些数据应该被获取、渲染
        if (isScrollDown) {
          // 向下滚动时序号增加
          firstIndex = currentIndex + increment;
        } else {
          // 向上滚动时序号减少
          firstIndex = currentIndex - increment;
        }

     3. 根据上述序号，获取对应数据元素，列表重新渲染成新的内容

        javascript

        //根据 firstIndex 查询数据，然后将目标数据渲染到页面上
        const renderFunction = (firstIndex) => {
          // offset = firstIndex, limit = 10 => getData
          // getData Done =>  new dataItems => render DOM
        };

     4. padding 调整，模拟滚动实现

        这 10 个新的数据元素，我们用原来已有的 DOM 元素去渲染，替换掉已经离开视窗、不可见的数据元素;而本该由更多 DOM 元素进一步撑开容器高度的部分，我们用 padding 填充来模拟实现。

        向下滚动

        javascript

        // padding的增量 = 每一个item的高度 x 新的数据项的数目
        const remPaddingsVal = itemHeight * Math.floor(this.listSize / 2);
        
        if (isScrollDown) {
          // paddingTop新增，填充顶部位置
          newCurrentPaddingTop = currentPaddingTop + remPaddingsVal;
        
          if (currentPaddingBottom === 0) {
            newCurrentPaddingBottom = 0;
          } else {
            // 如果原来有paddingBottom则减去，会有滚动到底部的元素进行替代
            newCurrentPaddingBottom = currentPaddingBottom - remPaddingsVal;
          }
        }

        向上滚动

        javascript

        // padding的增量 = 每一个item的高度 x 新的数据项的数目
        const remPaddingsVal = itemHeight * Math.floor(this.listSize / 2);
        
        if (!isScrollDown) {
          // paddingBottom新增，填充底部位置
          newCurrentPaddingBottom = currentPaddingBottom + remPaddingsVal;
        
          if (currentPaddingTop === 0) {
            newCurrentPaddingTop = 0;
          } else {
            // 如果原来有paddingTop则减去，会有滚动到顶部的元素进行替代
            newCurrentPaddingTop = currentPaddingTop - remPaddingsVal;
          }
        }

        最后是 padding 设置更新以及相关缓存数据更新

        javascript

        // 容器padding重新设置
        this.updateContainerPadding({
          newCurrentPaddingBottom,
          newCurrentPaddingTop,
        });
        
        // DOM元素相关数据缓存更新
        this.updateDomDataCache({
          currentPaddingTop: newCurrentPaddingTop,
          currentPaddingBottom: newCurrentPaddingBottom,
        });

     • 优势

       把同步触发的滚动事件变为异步，无需做防抖

     • 缺陷

       1. padding 计算依赖列表项固定高度
       2. 数据请求过程需要 loading 效果
       3. 需要兼容用户难以预测的滚动行为

   • 其它库

     • iScroll

       scroll 事件监听，translate 上下移，视窗外元素插入队尾，循环队列，无限下拉

活动倒计时 ​

1. 参考链接：

   js 计算两个时间时间差（天时分秒）

   js 计算两个时间差 年月日时分秒

2. 详解

   1. 方法概述

      计算时间 getTime()的时间戳差值，换算为年月日时分秒，setInterval 调用一次逻辑

   2. 实现

      javascript

      var future = "2017-04-04";
      
      var calculationTime = function (future) {
        var s1 = new Date(future.replace(/-/g, "/")),
          s2 = new Date(),
          runTime = parseInt((s1.getTime() - s2.getTime()) / 1000);
        var year = Math.floor(runTime / 86400 / 365);
        runTime = runTime % (86400 * 365);
        var month = Math.floor(runTime / 86400 / 30);
        runTime = runTime % (86400 * 30);
        var day = Math.floor(runTime / 86400);
        runTime = runTime % 86400;
        var hour = Math.floor(runTime / 3600);
        runTime = runTime % 3600;
        var minute = Math.floor(runTime / 60);
        runTime = runTime % 60;
        var second = runTime;
        return [year, month, day, hour, minute, second];
      };
      setInterval(function () {
        var result = calculationTime(future);
        //更新视图
      }, 1000);

摄像头抓拍与RTC音视频会议 ​

1. 参考链接：

   js 调用摄像头拍照上传图片

   getUserMedia API 及 HTML5 调用摄像头和麦克风

   MediaDevices.getUserMedia` undefined 的问题

   基于webrtc的音视频聊天，视频会议的实现

2. 详解

通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境：

• localhost 域
• 开启了 HTTPS 的域
• 使用 file:/// 协议打开的本地文件

其他情况下，比如在一个 HTTP 站点上，navigator.mediaDevices 的值为 undefined。

如果想要 HTTP 环境下也能使用和调试 MediaDevices.getUserMedia()，可通过开启 Chrome 的相应参数。

通过相应参数启动 Chrome
传递相应参数来启动 Chrome，以 http://example.com 为例，

--unsafely-treat-insecure-origin-as-secure="http://example.com"
开启相应 flag
通过传递相应参数来启动 Chrome Insecure origins treated as secure flag 并填入相应白名单。

打开 chrome://flags/#unsafely-treat-insecure-origin-as-secure
将该 flag 切换成 enable 状态
输入框中填写需要开启的域名，譬如 http://example.com"，多个以逗号分隔。
重启后生效。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>摄像头拍照</title>
  </head>
  <body>
    <video id="video" width="480" height="320" controls></video>
    <div>
      <button id="open">开启摄像头</button>
      <button id="close">关闭摄像头</button>
      <button id="capture">拍照</button>
    </div>
    <canvas id="canvas" width="480" height="320"></canvas>
    <img id="img" width="480" height="320" />
    <script>
      let video = document.getElementById("video");
      let canvas = document.getElementById("canvas");
      let context = canvas.getContext("2d");

      //访问用户媒体设备的兼容方法
      function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
          //最新的标准API
          navigator.mediaDevices
            .getUserMedia(constraints)
            .then(success)
            .catch(error);
        } else if (navigator.webkitGetUserMedia) {
          //webkit核心浏览器
          navigator.webkitGetUserMedia(constraints, success, error);
        } else if (navigator.mozGetUserMedia) {
          //firfox浏览器
          navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
          //旧版API
          navigator.getUserMedia(constraints, success, error);
        }
      }

      // 打开摄像头成功回调
      function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
      }

      // 打开摄像头失败回调
      function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
      }

      // 关闭摄像头
      function closeMedia() {
        let stream = video.srcObject;
        let tracks = stream.getTracks();

        tracks.forEach(function (track) {
          track.stop();
        });

        video.srcObject = null;
      }

      // 开启摄像头
      function openMedia() {
        if (
          navigator.mediaDevices.getUserMedia ||
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia
        ) {
          //调用用户媒体设备, 访问摄像头
          getUserMedia({ video: { width: 480, height: 320 } }, success, error);
        } else {
          alert("不支持访问用户媒体");
        }
      }

      document.getElementById("open").addEventListener("click", function () {
        openMedia();
      });

      document.getElementById("close").addEventListener("click", function () {
        closeMedia();
      });

      document.getElementById("capture").addEventListener("click", function () {
        context.drawImage(video, 0, 0, 480, 320);
        let src = canvas.toDataURL("image/png");
        document.getElementById("img").src = src; //上传src部分(base64)即可
        // $.ajax({
        //   url:"...",
        //   type:"post",
        //   data:{"imgData":src},
        //   success:function(data){
        //     console.log(data);
        //   },
        //   error:function(){
        //     console.log("服务端异常！");
        //   }
        // });
      });
    </script>
  </body>
</html>

采集本地摄像头和麦的媒体数据

navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => {
  //这里的stream就是我们想要的视频流和音频流的集合了
  //如果要在本地预览视频和音频，则只需要在html中添加一个video标签，将stream流赋给video标签即可，代码如下：
  let localVideo = document.getElementById('video标签的id');
  localVideo.srcObject = stream;
  localVideo.muted = true;
  localVideo.play();
})

RTCPeerConnection

let rtcPeerConnection = new RTCPeerConnection({
  "iceServers":[{
      "url": "stun:stun.l.google.com:19302"
      },{
      "url": "turn:服务器IP", 
      "credential":"密码",
      "username":"账号"
  }]
});
//监听stun返回的NAT穿透信息：ICECandidate
rtcPeerConnection.onicecandidate = (event) => {
  //如果获取到了我的NAT穿透消息，则立马通过websocket将event.candidate传送到对方。一旦双方通过candidate成功建立连接，就会通过下面这个监听进行音视频流的传输。
  wx.send(event.candidate)
}
//监听传输轨道的传输数据
rtcPeerConnection.ontrack = (event) => {
  //通过event.streams就能获取到对方传送过来的音视频流，将他再添加到另一个video标签上，就是可以看到对方的画面啦
  let remoteVideo = document.getElementById("对方video标签的id");
  remoteVideo.srcObject = event.streams[0];
  remoteVideo.play();
}
//这里的localVideo是知识点解析的第1步获取到的本地音视频video标签，将他的流加入到传输轨道，连接一旦建立就立马触发ontrack事件，将本地的音视频流传到对方。
for (const track of localVideo.stream.getTracks()) {
  rtcPeerConnection.addTrack(track, this.videos[0].stream);
}

向对方发起offer

rtcPeerConnection.createOffer({iceRestart: true, offerToReceiveAudio: true, offerToReceiveVideo: true}).then(
  (sessionDescription) => {
    rtcPeerConnection.setLocalDescription(sessionDescription)
    //这里还需要将sessionDescription通过websocket发送给对方，对方才能收到视频邀请
    wx.send(sessionDescription)
  }
)

如果对方收到了offer，那么就设置对方sessionDescription，并回传一个应答answer

//这里的sessionDescription是通过offer传过来的
rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(sessionDescription));
rtcPeerConnection.createAnswer({iceRestart: true, offerToReceiveAudio: true, offerToReceiveVideo: true}).then(
  (sessionDescription) => {
    rtcPeerConnection.setLocalDescription(sessionDescription)
    //这里将sessionDescription通过websocket回传给邀请方
    wx.send(sessionDescription)
  }
)

发送方收到了answer应答后也同样设置对方sessionDescription

rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(sessionDescription));

当STUN服务器获取到icecandidate后并通过websocket传过来了，我们就需要将对方candidate设置一下，对应第一步的onicecandidate监听事件

rtcPeerConnection.addIceCandidate(candidate)

js加解密哈希编码 ​

1. 参考链接：

   js中常见的数据加密与解密的方法

   js中使用btoa和atob进行Base64的编码和解码

   JS实现Base64编码、解码，即window.atob，window.btoa功能

2. 详解

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script src="https://cdn.bootcss.com/jsencrypt/3.0.0-beta.1/jsencrypt.js"></script>
<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.js"></script>
<script type="text/javascript">
    //md5
    var hash = md5("111111"); // "96e79218965eb72c92a549dd5a330112"
    console.log(hash);

    //RSA
    //公钥
    var PUBLIC_KEY = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCADB+zg4Ou3fv6rY8159gw4fkJbuMPeM41ttw20leKjSKQWOgBixHJjXbkRvoMmUQkWq67xWzpMgKB7t8LIJx+n0dLP+6YDqbfFEJJ2i1Va4U1yJyGht0bEW0tpadKX3i5JwUwQIBPiC7VSWhtVyAKtzTYeun/fqpxTDAbulrj4QIDAQAB';
    //私钥
    var PRIVATE_KEY = 'MIICWwIBAAKBgQCADB+zg4Ou3fv6rY8159gw4fkJbuMPeM41ttw20leKjSKQWOgBixHJjXbkRvoMmUQkWq67xWzpMgKB7t8LIJx+n0dLP+6YDqbfFEJJ2i1Va4U1yJyGht0bEW0tpadKX3i5JwUwQIBPiC7VSWhtVyAKtzTYeun/fqpxTDAbulrj4QIDAQABAoGACj/Y2m0orBAfvHvfrpBtc9LlX2sX/g6M7wFr6hrMdWOBBJiL5Z0PTO39D3Ow +IjcyqN+62UiUnOK04IJKiJaSa1HNWagW2aAOblca1lYyYD6wlUotMV3bgk9lly0dD0lUTd8XWOmo1NdTEFW7y1OB4pYgMcT+iv4o0cr4sAtWisCQQCD6EmjEpMI5dcfZcrSXbT+WQGvdVCjAhivVMbNYeZq37ARt+9mTnaoA6Ss/QGQ5qvO9jMhx8x9/e8EfA+AX2rzAkEA+II3IXRXY3xbjDnK84kunlWpImH6XofN2V/TGEH1/Iqa909PHhuL4mhSt0iC70/y1g5kbmXyXE5s5gEsPqmC2wJAAU9uY9NMaJs33tT5Bcvuf1RNAvwsV+Iucpdp/iJJ0qf0LMjh9Oc0oIiguyMsP886x6yEZ4J/koTSOf4tfT31ZwJAMs28I5S7QNVtic9O1FbZNvlgKG1LWAP/a08RwsXJWiWj5KdMD2WmRVT6hAnI6s+3X1d15LPmxkQqMyNOPkk9PQJAJyPGWOjrCjzwojE0lN4NtS9brx6JbPy/sFkHX5LN8Xv45+XOKp14JgRcABTfWfvnnoWoWKha2cyJFlf8AdCIuQ==';
    //使用公钥加密
    var encrypt = new JSEncrypt();
      //encrypt.setPrivateKey('-----BEGIN RSA PRIVATE KEY-----'+PRIVATE_KEY+'-----END RSA PRIVATE KEY-----');
    encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
    var encrypted = encrypt.encrypt('ceshi01');
    console.log('加密后数据:%o', encrypted);
    //使用私钥解密
    var decrypt = new JSEncrypt();
    //decrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
    decrypt.setPrivateKey('-----BEGIN RSA PRIVATE KEY-----'+PRIVATE_KEY+'-----END RSA PRIVATE KEY-----');
    var uncrypted = decrypt.decrypt(encrypted);
    console.log('解密后数据:%o', uncrypted);

    //AES
    var aseKey = "12345678"     //秘钥必须为：8/16/32位
    var message = "我是一个密码";
    //加密 DES/AES切换只需要修改 CryptoJS.AES <=> CryptoJS.DES
    var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }).toString();
    console.log(encrypt); // 0Gh9NGnwOpgmB525QS0JhVJlsn5Ev9cHbABgypzhGnM
    //解密
    var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    }).toString(CryptoJS.enc.Utf8);
    console.log(decrypt); // 我是一个密码 

    //base64
    window.btoa('<script src="test.js"></script>'); 
    window.atob("PHNjcmlwdCBzcmM9InRlc3QuanMiPjwvc2NyaXB0Pg=="); 
    //不能使用window的情况
    var Base64 = {
      _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
      _utf8_encode: function(string) {
        string = string.replace(/\r\n/g,"\n");
        let utftext = "";
        for (let n = 0; n < string.length; n++) {
          let c = string.charCodeAt(n);
          if (c < 128) {
            utftext += String.fromCharCode(c);
          } else if((c > 127) && (c < 2048)) {
            utftext += String.fromCharCode((c >> 6) | 192);
            utftext += String.fromCharCode((c & 63) | 128);
          } else {
            utftext += String.fromCharCode((c >> 12) | 224);
            utftext += String.fromCharCode(((c >> 6) & 63) | 128);
            utftext += String.fromCharCode((c & 63) | 128);
          }

        }
        return utftext;
      },
      _utf8_decode: function(utftext) {
        let string = "";
        let i = 0;
        let c = 0;
        let c1 = 0;
        let c2 = 0;
        let c3 = 0;
        while ( i < utftext.length ) {
          c = utftext.charCodeAt(i);
          if (c < 128) {
            string += String.fromCharCode(c);
            i++;
          } else if((c > 191) && (c < 224)) {
            c2 = utftext.charCodeAt(i+1);
            string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
            i += 2;
          } else {
            c2 = utftext.charCodeAt(i+1);
            c3 = utftext.charCodeAt(i+2);
            string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
          }
        }
        return string;
      },
      encode: function(input) {
        let output = "";
        let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        let i = 0;
        input = this._utf8_encode(input);
        while (i < input.length) {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output = output +
            this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
            this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
        }
        return output;
      },
      decode: function(input) {
        let output = "";
        let chr1, chr2, chr3;
        let enc1, enc2, enc3, enc4;
        let i = 0;
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
        while (i < input.length) {
            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));
            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
            output = output + String.fromCharCode(chr1);
            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }
        output = this._utf8_decode(output);
        return output;
      }
    }
    // 定义字符串
    var string = 'Hello World!';
    // 加密
    var encodedString = Base64.encode(string);
    console.log(encodedString); // 输出: "SGVsbG8gV29ybGQh"
    // 解密
    var decodedString = Base64.decode(encodedString);
    console.log(decodedString); // 输出: "Hello World!"
</script>

文件内容读取 ​

1. 参考链接：

   • 使用 JS 读取本地文本文件
   • JS 前端 new FileReader 获取文件后显示乱码
   • UTF8 GB2312 之间的区别和关系

2. 详解

   需要在 input 手动选择文件，GB2312 编码支持简体中文字，UTF-8 支持简体中文字、繁体中文字、英文、日文、韩文等语言，如出现中文乱码，可切换编码。

   html

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <title>Document</title>
       <script type="text/javascript">
         function upload(input) {
           //支持chrome IE10
           if (window.FileReader) {
             var file = input.files[0];
             filename = file.name.split(".")[0];
             var reader = new FileReader();
             reader.onload = function () {
               console.log(this.result, this);
             };
             reader.readAsText(file, "gb2312");
           }
           //支持IE 7 8 9 10
           else if (typeof window.ActiveXObject != "undefined") {
             var xmlDoc;
             xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
             xmlDoc.async = false;
             xmlDoc.load(input.value);
             console.log(xmlDoc.xml);
           }
           //支持FF
           else if (
             document.implementation &&
             document.implementation.createDocument
           ) {
             var xmlDoc;
             xmlDoc = document.implementation.createDocument("", "", null);
             xmlDoc.async = false;
             xmlDoc.load(input.value);
             console.log(xmlDoc.xml);
           } else {
             alert("error");
           }
         }
       </script>
     </head>
     <body>
       <input type="file" onchange="upload(this)" />
     </body>
   </html>

隐藏滚动条与伪元素控制 ​

1. 参考链接：

• JS控制伪元素的方法汇总
• CSS实现隐藏滚动条但是可以滚动

2. 详解

   • CSS实现隐藏滚动条但是可以滚动

     css

     body::-webkit-scrollbar {
       display: none;
     }

   • JS实现隐藏滚动条但是可以滚动(不可撤销)

     javascript

     document.styleSheets[0].insertRule('body::-webkit-scrollbar{display:none}',0)
     //或
     document.styleSheets[0].addRule('body::-webkit-scrollbar','display:none')

   • JS实现隐藏滚动条但是可以滚动(可撤销)

     javascript

     var style = document.createElement("style");
     document.head.appendChild(style);
     style.sheet.addRule('body::-webkit-scrollbar','display:none');
     //或
     style.sheet.insertRule('body::-webkit-scrollbar{display:none}', 0);
     
     document.head.removeChild(style);

HTML5特性 ​

1. 参考链接：

• 10个好用的 HTML5 特性

2. 详解

• details

  向用户提供按需查看详细信息的效果

  html

  <details>
    <summary>Click Here to get the user details</summary>
    <table>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Location</th>
        <th>Job</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Adam</td>
        <td>Huston</td>
        <td>UI/UX</td>
      </tr>
    </table>
  </details>

• contenteditable属性

  在元素上设置以使内容可编辑的属性,适用于DIV，P，UL等元素。

  html

  <h2> Shoppping List(Content Editable) </h2>
  <ul class="content-editable" contenteditable="true">
      <li> 1. Milk </li>
      <li> 2. Bread </li>
      <li> 3. Honey </li>
  </ul>

• mark

  高亮

  html

  <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>

• map area

  定义一个图像映射(一个可点击的链接区域)。可点击的区域可以是这些形状中的任何一个，矩形，圆形或多边形区域。如果不指定任何形状，则会考虑整个图像。

  html

  <div>
      <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
  
      <map name="circusmap">
          <area shape="rect" coords="67,114,207,254" href="elephant.htm">
          <area shape="rect" coords="222,141,318, 256" href="lion.htm">
          <area shape="rect" coords="343,111,455, 267" href="horse.htm">
          <area shape="rect" coords="35,328,143,500" href="clown.htm">
          <area shape="circle" coords="426,409,100" href="clown.htm">
      </map>
  </div>

• data-* 属性

  用于存储页面或应用程序专用的自定义数据。 可以在 JavaScript 代码中使用存储的数据来创建更多的用户体验。

  属性名不能包含任何大写字母，并且必须在前缀“data-”之后至少有一个字符

  属性值可以是任何字符串

  html

  <h2> Know data attribute </h2>
  <div 
      class="data-attribute" 
      id="data-attr" 
      data-custom-attr="You are just Awesome!"> 
  I have a hidden secret!
  </div>

• output

  表示计算或用户操作的结果

  html

  <form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
    <input type="number" id="a" value="0">
            * <input type="number" id="b" value="0">
                  = <output name="x" for="a b"></output>
  </form>

• datalist

  包含了一组option元素，这些元素表示其它表单控件可选值,dataList的表现很像是一个select下拉列表，但它只是提示作用，并不限制用户在input输入框里输入什么

  html

  <form action="" method="get">
      <label for="fruit">Choose your fruit from the list:</label>
      <input list="fruits" name="fruit" id="fruit">
          <datalist id="fruits">
            <option value="Apple">
            <option value="Orange">
            <option value="Banana">
            <option value="Mango">
            <option value="Avacado">
          </datalist>
      <input type="submit">
  </form>

• input range

  给定一个滑块类型的范围选择器

  html

  <form method="post">
      <input 
          type="range" 
          name="range" 
          min="0" 
          max="100" 
          step="1" 
          value=""
          onchange="changeValue(event)"/>
  </form>
  <div class="range">
        <output id="output" name="result">  </output>
  </div>

• meter

  用来显示已知范围的标量值或者分数值。

  html

  <label for="home">/home/atapas</label>
  <meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>
  
  <label for="root">/root</label>
  <meter id="root" value="0.6">60%</meter><br>

• progress

  进度条

  html

  <label for="file">Downloading progress:</label>
  <progress id="file" value="32" max="100"> 32% </progress>

• input color

  颜色选择器

  html

  <input type="color" onchange="showColor(event)">
  <p id="colorMe">Color Me!</p>

微信扫码登录实现 ​

1. 参考链接：

• 某跳动面试官：说说微信扫码登录背后的实现原理？

2. 详解

3. 打开网页请求二维码

4. 服务器生成uuid唯一标记和过期时间，存入redis数据库，uuid为key

5. 服务器调用微信生成二维码接口，需要微信OAuth2.0协议参数(AppID 和 AppSecrect)

6. 微信校验后返回二维码

7. 手机已经登录过微信app，存在用户token，app服务器从中可以解密出userId

8. 手机扫码发送登录请求(二维码信息+token)，app服务器验证app token，通过后app服务器调用网页服务器后端回调接口，传入临时票据code，同时app服务器向app确认信息

9. app显示登录确认框

10. 确认后再次发送请求(二维码信息+token+ack)，app服务器得到uuid和userId，redis中保存uuid-userId

11. 接第6点，网页服务器拿到code，加上AppID和AppSecret请求微信开发平台换取access_token，则可请求获得用户账号数据

12. 根据微信账号数据，找到注册时的用户的网站数据

Dom转图片 ​

1. 参考链接：

• Dom转图片
• html2canvas github
• html2canvas
• dom-to-image github

2. 详解

3. html2canvas

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #poster{
            width: 700px; 
            height: 500px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        function takeScreenshot() {
            const node = document.getElementById('poster')
            html2canvas(node, {
                useCORS: true,
                height: node.offsetHeight,
                width: node.offsetWidth,
                scrollY: 0,
                scrollX: 0
            }).then(async (canvas) => {
                let oImg = new Image();
                oImg.src = canvas.toDataURL();  // 导出图片
                document.body.appendChild(oImg);  // 将生成的图片添加到body
            })
        }
    </script>
</head>
<body>
    <div id="poster">
        <input type="button" value="截图" onclick="takeScreenshot()">
    </div>
</body>
</html>
```

注意事项：

1. 生成的图片模糊

  导出的图片局部有些图片没有原图那么清晰，因为使用背景图片的原因。解决方法是直接使用标签

2. 生成出来的图片有白色边框

  在配置项中设置backgroundColor: null

3. 生成图片不显示

  图片素材出现跨域，在方法上调用时增加两个配置:allowTaint: true,useCORS: true 

  还有一个方法就是，把跨域的图片转为base64。

4. PNG图片不透明

  用到透明的PNG图片作为背景图，最后生成的图片却并不透明，因为html2canvas生成的canvas背景颜色默认为白色。

  添加一个配置项就好:backgroundColor: 'transparent'

5. 生成的图片加载闪动效果

  先让生成的图片隐藏，添加图片加载状态，等图片生成好以后再展示。

2. dom-to-image

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #poster{
            width: 700px; 
            height: 500px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
    <script type="text/javascript">
        function filter (node) {
          return (node.tagName !== 'i');
        }
        function takeScreenshot() {
            const node = document.getElementById('poster')
            domtoimage.toPng(node)
            .then((dataUrl) => {
                var img = new Image();
                img.src = dataUrl;
                document.body.appendChild(img);
            })
            .catch((error) => {
                console.error('oops, something went wrong!', error);
            });
            //将节点转化为jpg格式的图片
            // domtoimage.toJpeg(node, { quality: 0.95 })
            // .then((dataUrl) => {
            //     var img = new Image();
            //     img.src = dataUrl;
            //     document.body.appendChild(img);
            // })
            // .catch((error) => {
            //     console.error('oops, something went wrong!', error);
            // });
            //将节点转化为svg格式的图片，生成的图片的格式都是base64格式
            // domtoimage.toSvg(node, { filter: filter })
            // .then((dataUrl) => {
            //     var img = new Image();
            //     img.src = dataUrl;
            //     document.body.appendChild(img);
            // })
            // .catch((error) => {
            //     console.error('oops, something went wrong!', error);
            // });
            //将节点转化为二进制格式，这个可以直接将图片下载
            // domtoimage.toBlob(node)
            // .then((blob) => {
            //   window.saveAs(blob, 'poster.png');
            // })
            // .catch((error) => {
            //     console.error('oops, something went wrong!', error);
            // });
            //获取原始像素值，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。
            // domtoimage.toPixelData(node)
            // .then((pixels) => {
            //   for (var y = 0; y < node.scrollHeight; ++y) {
            //     for (var x = 0; x < node.scrollWidth; ++x) {
            //       pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
            //       /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            //       pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
            //     }
            //   }
            // })
            // .catch((error) => {
            //     console.error('oops, something went wrong!', error);
            // });
        }
    </script>
</head>
<body>
    <div id="poster">
        <input type="button" value="截图" onclick="takeScreenshot()">
    </div>
</body>
</html>
```

注意事项：

1. 用于生成图片的dom元素不能display:none或opacity:0。可以用z-index放到其它元素下面；或者用绝对定位，将其放到某个div容器的可视区之外，然后容器设置overflow:hidden
2. 用于生成图片的dom元素的父元素们不能display:none
3. 综合1、2，即用于生成图片的dom元素要本身是可见的，且能计算到尺寸值，但不需要出现在视野中
4. 页面不能出现隐藏iframe的样式，例如iframe{display:none}
5. 生成后的图，会自动追加到用于生成的dom元素后面，类名是dom2img-result，如果不想把图片的样子展示给用户，可将其样式设置为opacity:0

html5相关 ​

1. 参考链接：

• 基础面试题+答案、分类学习整理（良心制作）持续更新
• html5手机网站需要加的那些meta/link标签，html5 meta全解
• HTML5离线存储原理

2. 详解

3. 对 Html5 的离线储存资源管理和加载

* 使⽤

  1. ⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；

    ```html
    <!DOCTYPE HTML>
    <html manifest = "cache.manifest">
    ...
    </html>
    ```

  2. 在 cache.manifest ⽂件的编写离线存储的资源

    ```
    CACHE MANIFEST
    #v0.11

    CACHE:

    js/app.js
    css/style.css

    NETWORK:
    resourse/logo.png

    FALLBACK:
    / /offline.html
    ```
    * CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
    * NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
    * FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

  3. 在离线状态时，操作 window.applicationCache 进⾏需求实现

    缓存立即执行
    ```javascript
    /*code1,简单粗暴的*/
    applicationCache.onupdateready = function(){
    　　applicationCache.swapCache();
    　　location.reload();
    };
    /*code2，缓存公用方法*/
    // var EventUtil = {
    // addHandler: function(element, type, handler) {
    // if (element.addEventListener) {
    // element.addEventListener(type, handler, false);
    // } else if (element.attachEvent) {
    // element.attachEvent(“on” + type, handler);
    // } else {
    // element["on" + type] = handler;
    // }
    // }
    // };
    // EventUtil.addHandler(applicationCache, “updateready”, function() { //缓存更新并已下载，要在下次进入页面生效
    // applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。
    // applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效
    // location.reload(); //重新载入页面
    // });
    ```

* 概念

  在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如 果是第⼀次访问 app ，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏ 离线存储。

  如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储。

* 优势

  1. 离线浏览--用户可在离线时使用它们
  2. 速度--已经缓存的资源加载得更快
  3. 减少服务器负载--浏览器将只从服务器下载更改过的资源

* 原理和环境

  HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

  引入manifest的页面,即使没有被列入缓存清单中，仍然会被用户代理缓存。因此，把.appcache文件更新下(如头部版本号)，刷新页面后才能更新离线HTML

* 注意事项

  * 站点离线存储的容量限制是5M
  * 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
  * 引用manifest的html必须与manifest文件同源，在同一个域下
  * 在manifest中使用的相对路径，相对参照物为manifest文件
  * CACHE MANIFEST字符串应在第一行，且必不可少
  * 系统会自动缓存引用清单文件的 HTML 文件
  * manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
  * FALLBACK中的资源必须和manifest文件同源
  * 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
  * 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
  * 当manifest文件发生改变时，资源请求本身也会触发更新

2. 严格模式与混杂模式

!DOCTYPE声明位于⽂档中的最前⾯，处于 html 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档

严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏

在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现

3. HTML全局属性

* class :为元素设置类标识
* data-* : 为元素增加⾃定义属性
* draggable : 设置元素是否可拖拽
* id : 元素 id ，⽂档内唯⼀
* lang : 元素内容的的语⾔
* style : ⾏内 css 样式
* title : 元素相关的建议信息

4. viewport的content属性作用

```html
<meta name="viewport" content="" />
width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
height – viewport 的高度 （范围从 223 到 10,000 ）
user-scalable [yes | no]是否允许缩放
initial-scale [数值] 初始化比例（范围从 > 0 到 10）
minimum-scale [数值] 允许缩放的最小比例
maximum-scale [数值] 允许缩放的最大比例
target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
     -- dpi_value 一般是70-400//没英寸像素点的个数
     -- device-dpi设备默认像素密度
     -- high-dpi 高像素密度
     -- medium-dpi 中等像素密度
     -- low-dpi 低像素密度
```

怎样处理 移动端 1px 被 渲染成 2px 问题?

* 局部处理

  mate 标签中的 viewport 属性 ， initial-scale 设置为 1

  rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；

* 全局处理

  mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5

  rem 按照设计稿标准⾛即可

5. meta 相关

```html
<!DOCTYPE html> <!--H5标准声明，使⽤ HTML5 doctype，不区分⼤⼩写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明⽂档使⽤的字符编码-->
<!-- 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用指定浏览器使用特定的文档模式-->
<meta name=”description” content=”不超过150个字符”/> <!--⻚⾯描述-->
<meta name=”keywords” content=””/> <!-- ⻚⾯关键词-->
<meta name=”author” content=”name, [email protected]”/> <!--⽹⻚作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标 是否启⽤ WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”renderer” content=”webkit”> <!-- 启⽤360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使⽤兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”> <!--针对⼿持设备优化，主要是针对一些老的不识别viewport的浏览器-->
<meta name=”MobileOptimized” content=”320″> <!--微软的⽼式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应⽤模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应⽤模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone 设置⻚⾯不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
```

在线预览文件 ​

1. 参考链接：

• 前端实现在线预览pdf、word、xls、ppt等文件

2. 详解

• 免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览（不可编辑）

  1. 微软的在线预览功能(必须是公共网络可访问的office文件)

  https://view.officeapps.live.com/op/view.aspx?src=http://www.xdocin.com/demo/demo.docx

  2. google的文档在线预览(需翻墙)

  https://docs.google.com/viewer?url=http://www.xdocin.com/demo/demo.docx

• 利用后端将文件转为图片，前端以图片形式预览（可行方案）

• 购买在线预览服务

  • 百度DOC文档服务

  • 永中

  • I DOC VIEW

  • XDOC

• 其它

  • kkfileview

移动端开发指南 ​

1. 参考链接：

• 中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

2. 详解

• 调用系统功能

  html

  <a href="tel:10086">拨打电话给10086</a>
  <a href="sms:10086">发送短信给10086</a>
  <a href="mailto:[email protected]">发送邮件给[email protected]</a>
  <input type="file" accept="image/*"><!-- 选择指定类型文件 -->
  <input type="file" multiple><!-- 多选文件 -->

• 忽略自动识别

  有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的a

  html

  <!-- 忽略自动识别电话 -->
  <meta name="format-detection" content="telephone=no">
  <!-- 忽略自动识别电话和邮箱 -->
  <meta name="format-detection" content="telephone=no, email=no">

• 弹出数字键盘

  html

  <!-- 纯数字带#和* -->
  <input type="tel">
  
  <!-- 纯数字 -->
  <input pattern="\d*">

• 唤醒原生应用

  通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]

  • scheme：应用标识，表示应用在系统里的唯一标识
  • path：应用行为，表示应用某个页面或功能
  • query：应用参数，表示应用页面或应用功能所需的条件参数

  URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。

  若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。

  html

  <!-- 打开微信 -->
  <a href="weixin://">打开微信</a>
  
  <!-- 打开支付宝 -->
  <a href="alipays://">打开支付宝</a>
  
  <!-- 打开支付宝的扫一扫 -->
  <a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>
  
  <!-- 打开支付宝的蚂蚁森林 -->
  <a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

• 禁止页面缩放

  具体见html5相关,或css常见问题-flexible与高清屏

  html

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

• 禁止页面缓存

  解析见网络相关问题-强制缓存和协商缓存

  html

  <meta http-equiv="Cache-Control" content="no-cache">

• 禁止字母大写

  有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。

  html

  <input autocapitalize="off" autocorrect="off">

• 浏览器配置

  具体见html5相关

  针对Safari配置

  html

  <!-- 设置Safari全屏，在iOS7+无效 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  
  <!-- 改变Safari状态栏样式，可选default/black/black-translucent，需在上述全屏模式下才有效 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  
  <!-- 添加页面启动占位图 -->
  <link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
  
  <!-- 保存网站到桌面时添加图标 -->
  <link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
  
  <!-- 保存网站到桌面时添加图标且清除默认光泽 -->
  <link rel="apple-touch-icon-precomposed" href="pig.jpg">

  针对其他浏览器配置

  html

  <!-- 强制QQ浏览器竖屏 -->
  <meta name="x5-orientation" content="portrait">
  
  <!-- 强制QQ浏览器全屏 -->
  <meta name="x5-fullscreen" content="true">
  
  <!-- 开启QQ浏览器应用模式 -->
  <meta name="x5-page-mode" content="app">
  
  <!-- 强制UC浏览器竖屏 -->
  <meta name="screen-orientation" content="portrait">
  
  <!-- 强制UC浏览器全屏 -->
  <meta name="full-screen" content="yes">
  
  <!-- 开启UC浏览器应用模式 -->
  <meta name="browsermode" content="application">
  
  <!-- 开启360浏览器极速模式 -->
  <meta name="renderer" content="webkit">

• 让:active有效，让:hover无效

  有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给body注册一个空的touchstart事件可将两种状态反转。

  html

  <body ontouchstart></body>

• 优化弹性滚动

  在苹果系统上非body元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。

  css

  body {
      -webkit-overflow-scrolling: touch;
  }
  .elem {
      overflow: auto;
  }

• 禁止滚动传播

  移动端浏览器有一个奇怪行为:当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为滚动传播。若不想产生这种奇怪行为可直接禁止。

  css

  .elem {
      overscroll-behavior: contain;
  }

• 禁止屏幕抖动

  对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。

  每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。

  css

  body {
      padding-right: calc(100vw - 100%);
  }

• 禁止长按操作

  有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。

  有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。

  但声明user-select:none会让input和textarea无法输入文本，可对其声明user-select:auto排除在外。

  css

  * {
      /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
      user-select: none; /* 禁止长按选择文字 */
      -webkit-touch-callout: none;
  }
  input,textarea {
      user-select: auto;
  }

• 禁止字体调整

  旋转屏幕可能会改变字体大小，声明text-size-adjust:100%让字体大小保持不变。

  css

  * {
      text-size-adjust: 100%;
  }

• 禁止高亮显示

  触摸元素会出现半透明灰色遮罩

  css

  * {
      -webkit-tap-highlight-color: transparent;
  }

• 禁止动画闪屏

  在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了。

  css

  .elem {
      perspective: 1000;
      backface-visibility: hidden;
      transform-style: preserve-3d;
  }

• 美化滚动条

  • ::-webkit-scrollbar：滚动条整体部分
  • ::-webkit-scrollbar-track：滚动条轨道部分
  • ::-webkit-scrollbar-thumb：滚动条滑块部分
  css

  ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: transparent;
  }
  ::-webkit-scrollbar-track {
      background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-image: linear-gradient(135deg, #09f, #3c9);
  }

• placeholder颜色

  css

  input::-webkit-input-placeholder {
      color: #66f;
  }

• input文本偏上问题

  桌面端浏览器里声明line-height等于height就能解决，但移动端浏览器里还是未能解决，需将line-height声明为normal才行。

  css

  input {
      line-height: normal;
  }

• 下拉选项右对齐

  css

  select option {
      direction: rtl;
  }

• 修复点击无效

  在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。

  css

  .elem {
      cursor: pointer;
  }

• 文本换行

  若接口返回字段包含\n或br，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理。

  css

  * {
      white-space: pre-line;
  }

• 描绘一像素边框

  详见css常见问题-flexible与高清屏

  css

  .elem {
      position: relative;
      width: 200px;
      height: 80px;
      &::after {
          position: absolute;
          left: 0;
          top: 0;
          border: 1px solid #f66;
          width: 200%;
          height: 200%;
          content: "";
          transform: scale(.5);
          transform-origin: left top;
      }
  }

• 溢出文本省略号

  css

  .elem {
      width: 400px;
      line-height: 30px;
      font-size: 20px;
      &.sl-ellipsis {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
      &.ml-ellipsis {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
      }
  }

• 禁止点击穿透

  当用户执行第一次单击后会预留300ms检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。

  在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。该解决方案监听用户是否做了双击操作，所以还是可直接使用click事件，而点击穿透就交给该fastclick自动判断。

  javascript

  import Fastclick from "fastclick";
  
  FastClick.attach(document.body);

• 禁止滑动穿透

  移动端浏览器里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动。

  禁止body滚动又会引发其它问题：

  • 弹窗打开后内部内容无法滚动
  • 弹窗关闭后页面滚动位置丢失
  • Webview能上下滑动露出底色
  css

  body.static {
      position: fixed;
      left: 0;
      width: 100%;
  }

  javascript

  const body = document.body;
  const openBtn = document.getElementById("open-btn");
  const closeBtn = document.getElementById("close-btn");
  openBtn.addEventListener("click", e => {
      e.stopPropagation();
      const scrollTop = document.scrollingElement.scrollTop;
      body.classList.add("static");
      body.style.top = `-${scrollTop}px`;
  });
  closeBtn.addEventListener("click", e => {
      e.stopPropagation();
      body.classList.remove("static");
      body.style.top = "";
  });

• 支持往返刷新

  点击移动端浏览器的前进按钮或后退按钮，有时不会自动执行旧页面的JS代码，这与往返缓存有关。

  往返缓存指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。

  该策略具体表现为：当用户前往新页面前将旧页面的DOM状态保存在BFCache里，当用户返回旧页面前将旧页面的DOM状态从BFCache里取出并加载。大部分移动端浏览器都会部署BFCache，可大大节省接口请求的时间和带宽。

  若在Vue SPA上使用keep-alive也不能让页面刷新，可将接口请求放到beforeRouteEnter()里。

  解决方案1

  javascript

  // 在新页面监听页面销毁事件
  window.addEventListener("onunload", () => {
      // 执行旧页面代码
  });

  解决方案2:pageshow事件在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与load事件的区别。pageshow事件暴露的persisted可判断页面是否从BFCache里取出。

  javascript

  window.addEventListener("pageshow", e => e.persisted && location.reload());

• 解析有效日期

  在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date，但在安卓系统上解析这种日期格式完全无问题。可用YYYY/MM/DD HH:mm:ss这种日期格式

  javascript

  const date = "2019-03-31 21:30:00";
  new Date(date.replace(/\-/g, "-"));

• 修复高度坍塌

  出现以下三个条件时,输入框失焦后页面未回弹:

  • 页面高度过小
  • 输入框在页面底部或视窗中下方
  • 输入框聚焦输入文本

  只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

  javascript

  const input = document.getElementById("input");
  let scrollTop = 0;
  input.addEventListener("focus", () => {
      scrollTop = document.scrollingElement.scrollTop;
  });
  input.addEventListener("blur", () => {
      document.scrollingElement.scrollTo(0, this.scrollTop);
  });

• 修复输入监听

  在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。当输入框监听keyup事件时，逐个输入英文和数字会有效，但逐个输入中文不会有效，需按回车键才会有效。此时可用input事件代替输入框的keyup/keydown/keypress事件。

• 简化回到顶部

  编写一个返回顶部函数需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，一行核心代码就能搞定。

  • scrollIntoView

    • behavior：动画过渡效果，默认auto无，可选smooth平滑
    • inline：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐
    • block：垂直方向对齐方式，默认start顶部对齐，可选center中间对齐、end底部对齐和nearest就近对齐
  javascript

  const gotopBtn = document.getElementById("gotop-btn");
  openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));

• 简化懒加载

  编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，该函数无需监听容器的scroll事件，通过浏览器自身机制完成滚动监听。

  懒加载

  html

  <img data-src="pig.jpg">
  <!-- 很多<img> -->

  javascript

  const imgs = document.querySelectorAll("img.lazyload");
  const observer = new IntersectionObserver(nodes => {
      nodes.forEach(v => {
          if (v.isIntersecting) { // 判断是否进入可视区域
              v.target.src = v.target.dataset.src; // 赋值加载图片
              observer.unobserve(v.target); // 停止监听已加载的图片
          }
      });
  });
  imgs.forEach(v => observer.observe(v));

  下拉加载

  html

  <ul>
      <li></li>
      <!-- 很多<li> -->
  </ul>
  <!-- 也可将#bottom以<li>的形式插入到<ul>内部的最后位置 -->
  <div id="bottom"></div>

  javascript

  const bottom = document.getElementById("bottom");
  const observer = new IntersectionObserver(nodes => {
      const tgt = nodes[0]; // 反正只有一个
      if (item.isIntersecting) {
          console.log("已到底部，请求接口");
          // 执行接口请求代码
      }
  })
  bottom.observe(bottom);

• 优化扫码识别

  通常移动端浏览器都会配备长按二维码图片识别链接的功能，但长按二维码可能无法识别或错误识别。

  二维码生成方式有以下三种:

  • 使用img渲染
  • 使用svg渲染
  • 使用canvas渲染

  大部分移动端浏览器只能识别img渲染的二维码，若使用SVG和Canvas的方式生成二维码，那就想方设法把二维码数据转换成Base64再赋值到img的src上。

  一个页面可能存在多个二维码，若长按二维码只能识别最后一个，那只能控制每个页面只存在一个二维码。

• 自动播放媒体

  少部分浏览器autoplay即可

  一般浏览器需js控制

  javascript

  const audio = document.getElementById("audio");
  const video = document.getElementById("video");
  audio.play();
  video.play();

  微信浏览器需监听其应用SDK加载完成才能触发

  javascript

  document.addEventListener("WeixinJSBridgeReady", () => {
      // 执行上述媒体自动播放代码
  });

  苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被Safari自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次。

  javascript

  document.body.addEventListener("touchstart", () => {
      // 执行上述媒体自动播放代码
  }, { once: true });