前端背景知识查漏补缺

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

前端中的中间件

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

编程小结

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

不抓包,如何学的了HTTPS

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

不抓包,如何学得了 TCP

2018-03-14
阅读 4 分钟
6k
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中的类型转换

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

你对Number一无所知

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

从非数组对象转数组方法小结

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

跨文档通信的7种方法

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

构建二叉树进行数值数组的去重及优化

2018-02-15
阅读 8 分钟
5.5k
构建二叉树进行数值数组的去重及优化 常见两层循环实现数组去重 {代码...} 构建二叉树实现去重(仅适用于数值类型的数组) 将先前遍历过的元素,构建成二叉树,树中每个结点都满足:左子结点的值 < 当前结点的值 < 右子结点的值 这样优化了判断元素是否之前出现过的过程 若元素比当前结点大,只需要判断元素是否在...

山寨一个 Promise

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

四谈快速排序(含尾递归)

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

三谈归并排序(含尾递归)

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

异步读取文件的几种姿势

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

解构小结

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

JS简明基础

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

重构smart-import

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

记第一次发布npm包经历,smart-import

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

自动 Import 工具,前端打字员的自我救赎

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

我不该动你的,Event Loops(深坑)

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

D3的一点理解

2017-12-28
阅读 6 分钟
1.9k
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

用 Node 实现简单 WebSocket 协议

2017-12-28
阅读 8 分钟
4.2k
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.

注水:mermaid 学习笔记

2017-12-25
阅读 2 分钟
5.2k
Generation of diagram and flowchart from text in a similar manner as markdown

收集的可视化的demo

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

缓存浅析

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

Fetch&CORS的简单实验

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

CSRF浅析

2017-12-14
阅读 5 分钟
2.4k
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浅析

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

用Canvas画一棵二叉树

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

红黑树的删除

2017-11-22
阅读 9 分钟
8k
删除红黑树中一个结点,删除的结点是其子结点状态和颜色的组合。子结点的状态有三种:无子结点、只有一个子结点、有两个子结点。颜色有红色和黑色两种。所以共会有6种组合。