javascript

[tanyafuzhou]

Summary

TODO

References

• JavaScript专题之数组去重 阅读 | JavaScript专题之数组去重 #37
• 经典面试题1-4及在线编程题1-3答案
• A list of funny and tricky JavaScript examples
• Chrome 文件选择延迟 Bug
• JS高级技巧

[tanyafuzhou]

CMD AMD UMD

• https://segmentfault.com/a/1190000004873947

[tanyafuzhou]

csrf

• 中文：跨站请求伪造
• csrf 是什么
• 为了防止 csrf，服务端会生成 session_id 给到客户端，客户端利用 cookie 存储 session_id，或者开发者手动地在页面上存储session_id，当客户端发起请求，带上该 session_id，与服务端存储的 session_id进行比较是否相等，以确认该客户端的请求是真正的请求，而不是伪造的请求

session & cookie

• session 是服务端的一个概念，cookie是客户端的概念
• session 要借助 cookie 实现功能

[tanyafuzhou]

base64

• Base64 编码的思想是是采用64个基本的 ASCII 码字符对数据进行重新编码。它将需要编码的数据拆分成字节数组。以3个字节为一组。按顺序排列24位数据，再把这24位数据分成4组，即每组6位。再在每组的的最高位前补两个0凑足一个字节。这样就把一个3字节为一组的数据重新编码成了4个字节。当所要编码的数据的字节数不是3的整倍数，也就是说在分组时最后一组不够3个字节。这时在最后一组填充1到2个0字节。并在最后编码完成后在结尾添加1到2个"="。（ 注 BASE64 字符表：ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/）
• 从以上编码规则可以得知，通过 Base64 编码，原来的3个字节编码后将成为4个字节，即字节增加了33.3%，数据量相应变大。所以 20M 的数据通过 Base64 编码后大小大概为 20M * 133.3% = 26.67M。

blob

• Blob 对象可以看做是存放二进制数据的容器，允许我们可以通过js直接操作二进制数据。一个 Blob 对象就是一个包含有只读原始数据的类文件对象。File 接口基于 Blob，继承了 Blob 的功能，并且扩展支持了用户计算机上的本地文件。

图片压缩

• canvas.toDataURI 是转成 base64
• 要想减少 base64的体积，将其重新转为二进制即可

function convertToBinary(dataURI, props) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    let byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    let ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    // return new Blob([ab]);
    return new Blob([ab], {
        ...props
    });
}

dataURI

• 什么是data URI scheme及如何使用data URI scheme

[tanyafuzhou]

正则表达式

• 语法
  • 可视化工具

[tanyafuzhou]

• JavaScript 浮点数陷阱及解法

[tanyafuzhou]

计算机视觉

• A modern approach for Computer Vision on the web

[tanyafuzhou]

webpack

• webpack编译流程漫谈
• Webpack——令人困惑的地方

Webpack Monitor : Webpack Monitor 是一个高可配置的 Webpack 插件，其能够捕获构建生成的，生产环境中包体关键统计指标；并且 Webpack Monitor 提供了交互式地分析工具，来帮助开发者更好地审视包体的构成，以此来识别与选择可用的优化策略。

[tanyafuzhou]

字符串转数字

• JavaScript 字符串转数字：陷阱

[tanyafuzhou]

• 基于 JavaScript 的浏览器自动化与网页抓取: 本文的核心内容是介绍如何使用 Headless Chrome、Puppeteer 以及 Node.js 进行网页抓取，我们在过去的清单中也多次推荐过 Puppeteer 相关的内容。

[tanyafuzhou]

typescript

• 使用 TypeScript 编写 React 与 Redux 应用
• [typescript playground] (https://www.typescriptlang.org/play/index.html#src=class%20A%20%7B%0D%0A%20constructor(public%20centerX%20%3D%200%2C%20public%20centerY%20%3D%200)%20%7B%0D%0A%20%7D%0D%0A%7D)

[tanyafuzhou]

图片占位

SQIP: SQIP 是基于 SVG 的 LQIO 方案，其能够用于生成可用的 SVG 格式的图片替代（Image PlaceHolder）；所谓的 Image PlaceHolder 即指那些能够从图片中捕获图片的主要色彩，并且在图片加载完成之前先占用相同尺寸的资源。而于 2012 年提出的 LQIP 则是主流的 Image PlaceHolder 解决方案，Facebook、Pinterest、Medium 等公司皆有其相应的开源库；SQIP 希望能够在替代图的质量与文件大小之间达成较好地平衡。

[tanyafuzhou]

this

• 我认为讲解的最完善的 this

[tanyafuzhou]

机器学习

• mlhelper 是 JavaScript 中机器学习相关的算法与工具库，其提供了常见的 kNN、决策树（ID3）、矩阵运算、向量运算、文件解析以及常见的数据模型可视化功能。

[tanyafuzhou]

CORS

• 为什么XMLHttpRequest的POST请求会变OPTIONS请求－XMLHttpRequest对象对HTTP请求的访问控制（CORS跨站资源共享）
  

[tanyafuzhou]

二维码

• https://github.com/aralejs/qrcode