ECMAScript 与 JavaScript ECMAScript 是一套脚本语言的规范，内部编号 ECMA-262 该规范由 Ecma(European Computer Manufacturers Association) 制定 规范保证开发者按照规范编写的代码能在大部分浏览器中正常工作，因为这些浏览器约定去遵守规范 JavaScript，JScript 和 ActionScript 都是基于该规范的实现 阅读 ECMASc...

场景 {代码...} 现有函数 stepOne()，要求在不改写函数的基础上，在执行该函数之前添加检查 checkStepOne()， 检查返回 ture，再执行 stepOne() 我们大都会这样写 {代码...} 很明显，这样的 flow() 很不灵活 如果现在又有 stepTwo()，同样需要在执行之前进行检查 checkStepTwo()，再写一个flowTwo() 吗？ 不，修改函数 f...

给定数组arr，取n个数，和为sum，有哪些种取法 递归解法 {代码...} 递归优化，计算过程中去重 思路一的做法，存在大量的重复，实际上对 for 循环做一点修改，就可以在过程中避免重复 {代码...} 迭代 {代码...} 砝码问题 给一组砝码，给一个重量，问用该组砝码能否称出该重量。例如，一组砝码 [1,3]，一个重量 2，返回 tr...

测试背景 抓包工具：Wireshark 本机ip：10.129.135.155 目标网站：[链接] 握手过程 抓包截图 一目了然，No33,44,45，是TCP的三次握手，除此之外，建立TLS/SSL连接，也需要先建立握手 1. Client Hello 主要向服务端传递的信息 Version：客户端支持的版本 Random：客户端生成的随机数 Cipher Suites：客户端支持的密码套件...

Wireshark 本机ip: 192.168.0.72 访问地址: [[链接]]() 记录378，419，427就对应着著名的TCP三次握手 数据帧格式如下 三次握手流程图 SYN：建立连接 FIN：关闭连接 ACK：响应 PSH：数据传输 RST：连接重制 A->B:在吗？听的到吗？ B->A:在啊？你听得到吗？（告诉A，通过B的回复来确认，A->B通信正常） A->B:...

七种数据类型 JS 中共有七种数据类型 null undefined boolean number string symbol object 除了 object，所有的数据类型都被称为“原始数据类型” JS 中每个变量都保存了一个值，每个值都对应着一种数据类型 在使用过程中，值的数据类型会发生相应的变化，以促使代码正常运行 显示转换 Number() {代码...} 给 Number() 函...

在 JS 中，所有的数字都是基于 IEEE 754 的浮点数。除了浮点数，还有定点数，两者的区别就在于小数点的处理。同样是用64个bit表示一个数，定点数会用前 N 位来表示一个数的整数部分，用后 64 - N 来表示一个数的小数部分，这个 N 是固定的，对所有的数都是一样的。

Array.prototype.slice.call(obj) 该方法可以将类数组对象转换为数组，所谓类数组对象，就是含 length 和索引属性的对象 返回的数组长度取决于对象 length 属性的值，且非索引属性的值，或索引大于 length 的值都不会被返回到数组中 实锤如下 {代码...} 简洁写法 [].slice.call(obj) Array.from(obj) 该方法可以将类数组...

摘要 以下总结的跨文档通信方法，均是在服务器不参与的情况下（服务端无需特殊的代码）实现的 这里的通信，是指页面A向页面B传递信息 大致分为以下三类 通过 window.postMessage 实现双向通信 通过客户端存储实现通信 cookie webStorage indexedDB 在页面跳转的过程中携带信息 window.name Url 中 hash window.history.r...

构建二叉树进行数值数组的去重及优化 常见两层循环实现数组去重 {代码...} 构建二叉树实现去重（仅适用于数值类型的数组） 将先前遍历过的元素，构建成二叉树，树中每个结点都满足：左子结点的值 < 当前结点的值 < 右子结点的值 这样优化了判断元素是否之前出现过的过程 若元素比当前结点大，只需要判断元素是否在...

一点感悟 Promise 是编写异步的另一种方式，鄙人愚见，它就是 Callback 的一种封装 相比 Callback ，它有以下特点 Promise 将异步结果保存起来，可以随时获取 链式调用 then 方法会返回一个新的 Promise ，从而避免了回调地狱 决定一次异步有两个环节 发起异步事件 处理异步结果 Promise 可以给一个异步事件注册多个处理...

一谈，原始的快速排序 {代码...} 二谈，优化后的快速排序 适时的采用插入排序 代码略 随机化快速排序 改变选择主元 pivot 的方式，从选择末尾的元素，改为随机选择 修改 partition 函数 {代码...} 三路快排 {代码...} 尾递归 套路和三谈归并排序（含尾递归）中的一样，将要用但是来不及用的参数存起来，在合适的时候，再...

一谈，原始的归并排序 {代码...} 二谈，优化后的归并排序 优化算法的指导思想之一，找到某些可以简化处理的特殊情况 合并时的特殊情况 当 leftArr 的最后一个元素小于 rightArr 的第一个元素时，那么顺序就应该是 [leftArr, rightArr] 当 rightArr 的最后一个元素小于 leftArr 的第一个元素时，那么顺序就应该是 [rightA...

臆想的 {代码...} 臆想中，读取文件是有返回值的，将返回值，即文件内容，赋给一个变量，然后决定对读取到的内容进行相应的操作，例如打印文件中的内容。 简而言之，臆想中，读取文件，打印文件是相互分开的。 回调 {代码...} 实际上，在经常使用的回调中，读取文件和针对文件内容相应的操作是在一起的， 你在要求读取文...

基本概念 作用 解构是有组织的从对象或数组中提取信息片段 条件 明确从哪提取信息片段，即信息来源于哪个对象或数组 明确提取什么信息片段，即对象的哪个属性或数组的第几个元素 其他 解构除了提取信息片段之外，还有一些辅助的功能 为可能提取不到的信息设置默认值 为提取到的信息重新命名 场景 解构的使用场景不仅在声...

数据类型 在最新的 ECMAScript 规范中，定义了7种数据类型 null undefined boolean number string symbol(不了解) object 其中前6种为基础数据类型，只有 object 为引用类型 基础数据类型和引用类型划分的依据是其在内存中存储的形式 基础数据类型在内存对应的位置存储的是null，undefined，字符串，数值或布尔值(symbol...

前情提要 自动 Import 工具，前端打字员的自我救赎 记第一次发布npm包经历，smart-import GitHub:smart-import develop是重构中的代码 master是1.0版本可以工作的代码 配置文件 from：待导入的模块 to：引用模块的文件 template：引用模块的方式 ignored：忽略的模块 {代码...} 实现监听文件的删除和添加 {代码...} 以上...

故事背景 前情提要：自动 Import 工具，前端打字员的自我救赎 github: smart-import smart-import 的功能 根据配置文件，在目标文件中自动导入规定目录下自定义模块，并监听规定目录下文件的变动，自动更新 尚在测试中 smart-import 的使用 安装工具 {代码...} 编写配置文件smart-import.json {代码...} extname：需要自...

自动 import 工具 先推荐两个干货，关于正则的regexr，regexper，前者验证正则是否和预期一样，后者以图的形式表达正则，有助于理解天书般的别人写的正则 作为一个前端打字员，一个经常遇到的场景就是在路由文件中引入模块，比如这样 在 router/index.js 中写入 {代码...} 如果修改了模块的名字，增加了模块或者删除了模...

我不该动你的，Event Loops 写在前面的话 本意是想好好研究下 Event Loops， 看了几篇博客后，才意识到作为前端打字员的我有多无知，这坑忒深了。 macrotask？，microtask？，MutationObserver？ 这些都是啥？规范还没写清楚？不同浏览器运行的还未必一样？ 但为了使自己养成经常总结的习惯，还是写点什么吧。 故事的开...

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

In order to communicate using the WebSocket protocol, you need to create a WebSocket object; this will automatically attempt to open the connection to the server.

Generation of diagram and flowchart from text in a similar manner as markdown

表现形式 联动效果 西班牙过去24小时电力生产构成，不同颜色代表不同电力来源，基于D3，有源码 一种分布的表现方式，基于D3，有源码 类似上图，只不过浮动旁边对应不同的文字，基于D3，有源码 联动效果还行 在一条直线上，可以通过线的粗细，或线上点的形态，增加表现数据的维度 联动效果还不错 看看就好，有文档介绍怎...

概念 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。——MDN 缓存能缓解服务器压力，提高响应速度，提升用户体验。 以下讨论的缓存是针对对img/script/css资源而言的，且缓存策略都是依靠 http 报文的首部来实现。 实验 搭建实验环境 编写 html 文件 {代码...} 服务端代码 {代码...} 访问 [链接]:3210 , 看...

跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服...

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents.。 ——MDN

概念 Cookie是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。——MDN 来做个实验 服务端代码 {代码...} ./static/index.html内容如下 {代码...} 这里推荐一款chrome插件，EditThisCookie，方便进行cookie的管理 启动服务端，当我们第一次访问[链接]:3210/时，...

笔墨伺候 {代码...} 树的样子 {代码...} 构思构思 这样一幅大作，无非就是由黑色的正方形+线段构成这正方形怎么画 {代码...} 这直线怎么画 {代码...} 这关系怎么画 {代码...} 现在遇到个小问题，如何确定节点的子节的位置？ 父节点与子结点在y轴上的距离固定，为正方形长度unit的两倍；父节点与子结点在x轴上的距离满足n...

删除红黑树中一个结点，删除的结点是其子结点状态和颜色的组合。子结点的状态有三种：无子结点、只有一个子结点、有两个子结点。颜色有红色和黑色两种。所以共会有6种组合。