最近做了一点环境模拟的工作，还是有点意思的，无意中发现自己其实已经在实现CommonJS规范了，那就正好去学习一下。
本来想上来就总结一下commonJS规范的概念，然后放一段完美的原理实现代码，perfect！其实最早也是按照这个模式去写了（一如既往的知识点搬来主义，哈哈哈），但是想了想还是从自己如何一步步实现并理解模块定义加载的角度来写，感觉这样印象更深更有助于理解。

Puppeteer（词的原意是操纵木偶）是一个通过DevTools Protocol控制headless chrome或chromium的node库，也可以通过配置来使用（non-headless）chrome或chromium。

chromium是谷歌开源的web浏览器项目，chrome是基于chromium开发的。

Puppeteer可以做什么？用户在浏览器中手动执行的大部分操作都可以通过puppeteer完成。

写在前面

工作后很久没有更新博文了，一些事看不惯，一些事改变不了，从开始积极地想要做些什么，到现在连伪工作都算不上，让自己不得不好好想想了。回过头来看自己工作这半年多，能说道说道的也只有混淆了(ps.接触了混淆，真心觉得混淆这门艺术高大上)，不过不能在这里分享，就只能在这里巩固拓展学习了～

Koa

koa由express的原班人马打造，和express相比，koa是一个轻量级的node框架，它的所有功能都能通过中间件实现，这种插拔式的架构设计模式，很符合unix哲学。

有关unix哲学，核心是简单原则，可以看这篇以及文末的评论。

想到最近实现的一个混淆策略，已经在实现第二版，但代码还是越写越绕，mentor在发现我第二版的混淆策略仍然有处理不了的样例时说让我改的下一版更优雅些、代码易懂一点。代码越写越绕的原因应该是写的过程中发现需要兼容到某几种特殊样例的情况，每次为了兼容这种情况都会在原有基础上改，改到后面看见那一坨坨的代码就晕。。。感觉还是自己思考时站的高度不够。

最近沉迷爬虫无法自拔。。。做到现在也算是有点收获，总结一下。

最开始想要爬的APP，用Charles抓包发现，抓到携带数据的包都是zip，批量解压后分析发现并没有有效的数据。猜测数据传输不是HTTP协议，抓不到包，只能通过群控来做。

然后想分析一些其它同类的APP，鉴于之前分析移动端APP可能抓不到包的情况，转而去看有没有对应的微信小程序。微信小程序的请求是一定能抓到包的，因为，微信小程序的项目在编译时是将wxml、wxss编译成js来压缩打包为wxapkg文件，微信小程序在微信中的运行其实就是在微信内嵌浏览器（渲染引擎：安卓端X5内核，IOS端Webkit内核）的JSCore（JS引擎）中解压执行JS代码。而浏览器中的请求一定是遵循http协议的（HTTP协议是Web浏览器和服务器之间通信一定遵循的规则）。所以比移动端APP抓到包的概率大很多。

Base64

Base64是一种基于64个可打印（可见）字符来表示二进制数据的表示方式。

用记事本去打开exe、jpg等文件时，会看到一大堆乱码，这是因为二进制文件中包含很多无法显示和打印的字符（计算机中任何数据都是按ascii码存储的，而ascii码的128个字符中有32个是不可见字符）。世界上存在着多种编码方式，同一个二进制数字可以被解释成不同的符号。因此，要想打开一个文本文件，就必须知道它的编码方式，否则用错误的编码方式解读，就会出现乱码。Base64是一种任意二进制到文本字符串的编码方法，常用于在URL、Cookie、网页中传输少量二进制数据。

写在前面

这学期无脑的写论文和改论文学习生活实在是百无聊赖，尽管同时也在学习英语看英语原著，但总是感觉有些乏味没能满足我的精神需求。虽然被困在学校困在实验室里，但思想不能被束缚。之前听过《人类简史》的大名，偶然在知乎上刷推荐书单看到，就决定读了。从小看的最多都是教科书课外辅导书作文书，可能是因为反感死记硬背，一直不喜欢文科类的科目，只喜欢理科思维性的科目，所以课外阅读很少，也直接导致了我看问题肤浅不够深入。不想说这本书论点论据的正确性，因为我还不够格来评价，只是在看的过程中发现书中很多观点和诠释问题的角度是对我固有思维的冲击，第一次在看书的过程中思维有了饥渴的感觉。看前半部分内容的过程中都在惊叹作者奇特的角度和观点，看到后面慢慢地自己能通过作者独特的视角去思考看待一些问题了。这本《人类简史》应该算是我的思维启蒙书了～～

写在前面

毕业🎓前的日子真是度日如年，只能看书学英语参加各种英语角活动看视频，而且除了跑实验写的那点已经很久很久没有敲代码了。。。稍微学点东西安慰自己。。。之前只是知道Git这些命令怎么用，没有更详细地了解过。看廖老师的博文学习再学一遍Git加深印象。

Git：分布式版本控制系统

Git自动记录每次文件改动，还可以多人协作编辑，即版本控制，Github则是为开源项目免费提供Git存储。

Git是Linus为了方便管理Linux内核开发而开发的一个源码版本控制软件。

分布式版本控制系统没有中央服务器，比集中式版本控制系统 （例如：SVN）安全性高很多。Git不仅仅是不需要联网这么简单，还有极其强大的分支管理。

安装成功后Git需要自报家门，--global参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。

1
2

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

以前都没有总结过去一年的习惯，2017年感觉是我成长到现在最充实最有成就感的一年，想记录下来，当未来某天回首这一年能够为自己这一年的奋斗付出成长而热泪盈眶。

2017年，我24周岁，研三，在大连上学已经是第七年。

写在前面

最近恶补了线性代数的知识，大一时《线性代数》的课本居然一直留着，惊讶到我了，因为本科毕业时把所有课本都卖了，不知怎么想的唯独没卖《线性代数》这本书，当时居然知道三年后自己会用到，感觉好神奇😄。特别推荐一下马同学高等数学公众号以及感谢@大壮学长的讲解。

降维

高维数据意味着需要超过两个或三个维度来表示数据，在高维情形下出现的数据样本稀疏、距离计算困难等问题，是所有机器学习方法共同面对的严重障碍，称为“维数灾难”。

缓解维数灾难的重要途径是降维，即通过某种数学变换将原始高维属性空间转为一个低维子空间，在这个子空间中样本密度大幅提高，距离计算也变得更为容易。为什么能降维呢？因为很多时候，观测或收集到数据样本虽然是高维的，但与学习任务相关的也许仅是某个低维分布，即高维空间中的一个低维嵌入（embedding）。

写在前面

研二下做的文本分析不做了，转战机器学习人脸识别（老板要求发高质量高水平的文章），没接触过这个领域，不知道自己可以做到什么程度，这次有靠谱学长指导总是很欣慰的（比起之前小老师出去创业只能自己瞎鼓捣好太多了）。

Day 2017/10/18： 学长推荐入门阅读 Robust Face Recognition via Sparse Representation

说实话自己英文阅读水平很一般，而且线性代数学的那些知识基本都还给老师了，这篇论文看的着实心累。再加上自己很反感写论文，看的进度很慢，基本看几个词就走神的那种。在此特别特别特别感谢@超哥的耐心讲解。

MD5(Message Digest Algorithm 5)是一种信息摘要算法，它可以从任意长度的明文字符串生成128位的哈希值，是不可逆的。

MD5算法原理：

处理原文

计算原文长度(bit)对512取余的结果，如果不等于448，就需要填充原文使得原文对512求余的结果等于448。填充的方法是第一位填1，其余位填0。填充后，信息长度为512*N+448(N为每512位为一组的组数)。用剩余位置(512-448=64位)记录原文的真正长度，将长度的二进制值补在最后。信息长度变为512(N+1)。

设置初始值

MD5的哈希结果长度为128位，按每32位一组分成4组，这4组结果是由4个初始值A、B、C、D经过不断演变得到。MD5的官方实现中这4个32位的整数参数称为链接变量，设置如下：

本文总结了服务器将信息主动推送到客户端的几种实现方式：

1. Ajax polling
2. Long polling
3. HTTP Stream
4. WebSockets
5. Server-Sent Events

Ajax是一种从页面向服务器请求数据的技术，Comet是一种服务器向页面推送数据的技术。

有两种方式实现Comet：长轮询和流。

绑定事件几种方式：

1. HTML事件处理程序<input type="button" value="click me" onclick="alert('clicked')"/>

2. DOM0级事件处理程序$btn.onclick = function(){}

3. DOM2级事件处理程序$btn.addEventListener('click', function(){}, false)

解除绑定：

1. $btn.onclick = null;

2. $btn.removeEventListener()传入参数和addEventListener参数相同，也就是通过addEventListener添加的匿名函数无法移除。

   1 2 3

   function handler(){} $btn.addEventListener('click', handler, false); $btn.removeEventListener('click', handler, false);

题记

其实很多时候看书都有点心浮气躁，总是看一会儿就被别的事情打断了，最近很难静下心有一个完整的时间段来不思考任何烦心事好好地看书。

第二部分 this和对象原型

第一章 关于this

1.1 为什么要用this

如果不使用this就需要给函数体显式地传入一个上下文对象，this提供了一种更优雅的方式来隐式传递一个对象的引用，让api设计更简洁而且易于复用。

题记

这本书前后通读了两遍，是我看过的所有前端书籍📚中（虽然没全读完过几本，基本都是翻几页感觉内容没吸引到我就撇一边了。。。），内容质量最赞，最值得反复阅读体会的一本书，而且每次重读，会因为时间阅历不同都会有不同的体会和领悟，强烈推荐！！！

之后一定会不止两遍的重复阅读，而且还要读英文原著，先立Flag。

为什么会读了两遍？读第一次，哇，这内容讲的好深入，发现自己之前对JS的理解和应用都是浮于表面。后来因为找实习写论文一些事情，没有全看完。等到我再拾起来看之前看过的内容时，发现自己对看过的内容根本没吸收多少，所以就又重读了一遍。而且读第二遍的时候做了读书笔记，因为是图书馆借的书，没敢在书上乱画，所以写了markdown记录自己读时觉得值得重复研读的知识点。

第一部分 作用域和闭包

第1章 作用域是什么

1.1 编译原理

JS是一门编译语言，JS引擎进行编译过程。

DOM操作是JS最基础的部分，前段时间重构的一个项目中使用JQuery来操作大量的DOM节点，就算是操作相同的节点也直接使用$去直接获取元素，JQuery是可以很方便的操作DOM，但是其底层封装的实现也依然是原生JS中提供的获取元素的API。现在项目里用到的knockoutJS，算是MVVM的鼻祖，虽说实现了数据绑定渲染，但其底层没有用到虚拟DOM，也就还是应该用了原生JS获取DOM元素的API。

前端应用状态管理

记得最开始做IFE的任务中有个题目是让实现一个排序表格，附上当时写的代码，每次点击排序按钮，都要重新渲染整个table中的元素。DOM操作有多耗性能？看下图：

最近遇到几个很类似的题目，都用到正则做字符串操作，就想总结一下。

知识点

正则创建方式

1. var reg = new RegExp(/are/, 'g');

2. var reg = /are/i;

注意使用构造函数时字符的转义规则。

Expression Flags

正则模式匹配符

\g：在字符串中查找所有可能的匹配，返回结果是多个

\i：匹配时不区分大小写

\m：多行匹配

水平垂直居中

文本的水平垂直居中

text-align + line-height

盒模型的水平垂直居中

1. 绝对定位 + top:50%;left:50%; + margin-left,margin-top元素宽高的一半

2. 弹性布局 display:flex; + justify-content:center; + align-items:center;

3. 表格布局 display:table;text-align:center; + display:table-cell;vertical-align:middle;

Ajax = 异步JS + XML

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新(不阻塞)。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建XMLHttpRequest对象，用于和服务器交换数据

浏览器兼容写法：

1
2
3
4
5
6
7

var xhr;
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}eles if(window.ActiveXObject){
	// code for IE5,IE6
	xhr = new ActiveXObject(Microsoft.XMLHTTP);
}

过程大致分为网络通信和页面渲染：

1. DNS解析：根据输入域名查找对应的IP地址

2. TCP三次握手：浏览器向服务器发起TCP连接

3. 握手成功后浏览器向服务器发起HTTP请求

4. 服务器接收到请求，将数据返回给浏览器

5. 浏览器下载HTML文档(响应报头，状态码200)，同时设置缓存，返回304则表示有缓存直接用缓存

6. 浏览器解析渲染页面。

7. TCP四次挥手断开连接