前端学习日记 -- 八月

2019-08-01

1、柯里化与连续箭头函数（闭包）：https://blog.csdn.net/allangold/article/details/86667908
?❤️柯里化应用：https://www.jianshu.com/p/4b293581a03f（优）

练习（题目出自30s）

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
// example
const firstTwoMax = ary(Math.max, 2);
[[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]

2、?❤️混淆
代码混淆（Obfuscated code）是将程序中的代码以某种规则转换为难以阅读和理解的代码的一种行为。
令APK（博客为Android工程）难以被逆向工程，即很大程度上增加反编译的成本。（此外，Android当中的“混淆”还能够在打包时移除无用资源，显著减少APK体积）

3、文章《个人中小型前端项目架构》：http://www.360doc.com/content/17/0428/07/9200790_649258811.shtml

4、⚠️⚠️
exports 导出的东西需要 require 引入！
export 导出的东西需要 import 引入！

2019-08-02（leec）

lc 1、Set类型没有length，可以使用[…set] 转换成数组

let s = new Set([1,2,3,2,1,1,3,5,3,2])
let a = [...s]

2019-08-05

1、&判断奇偶

num = 3
num & 1 === 1 // true 奇数
num = 4
num & 1 === 1 // false 偶数

2、canvas文字渐变

var context = canvas.getContext('2d');
var g = context.createLinearGradient(0,0,canvas.width,0);
g.addColorStop(0, 'red');
g.addColorStop(0.5, 'blue');
g.addColorStop(1, 'purple');
context.fillStyle = g;
context.font = '36px fantasy';
context.fillText('hello canvas', 0, 100);

3、document自定义事件

document.addEventListener('hi', e => console.log(e.detail));
document.dispatchEvent(new CustomEvent('hi', {detail: '你好'}))

4、动画 - 掘金 - 划个知识点 - 爱的魔力转圈圈

.div {transition: all 5s;
}
.div:hover{transform: rotate(2turn);
}

5、产品调研：
用户是谁，身份与权限
功能是什么，为了怎样的目的
如何增长的
哪个核心诉求留下了用户，使其不得不使用此产品
目前的核心数据规模
国外产品都很容易查到
中国产品除了PR稿就只能预估了

6、window.location.origin 这个属性在移动端中一定要慎用。
因为好多浏览器没有这个属性
用下面的方法代替
${window.location.protocol}//${window.location.host}

7、近5年，前端开发程序员整出了多少新玩意儿：
html开发者开发了phonegap，C# .net开发者开发了Xaramin，Angular开发者开发了ionic，React开发者开发了React Native，Vue开发者开发了Weex，Dart开发者开发了Flutter…未来还会有更多新东西出来。。。

8、?使用渐变，一个div实现进度条 - #掘金沸点#
https://juejin.im/pin/5cba77f75188256ab43076a3

9、暂停动画

div:hover{ animation-play-state: pause }

10、普通元素也可以像textarea一样resize

li{overflow: hidden;resize: auto;
}

11、鉴权
https://blog.csdn.net/weixin_40442219/article/details/83377530
“乍的一看好像和前面的seesion-cookie有点像，seesion-cookie是通过seesionid来作为浏览器和服务端的链接桥梁，而token验证方式貌似是token来起到seesionid的角色。其实这两者差别是很大的。

sessionid 他只是一个唯一标识的字符串，服务端是根据这个字符串，来查询在服务器端保持的seesion，这里面才保存着用户的登陆状态。但是token本身就是一种登陆成功凭证，他是在登陆成功后根据某种规则生成的一种信息凭证，他里面本身就保存着用户的登陆状态。服务器端只需要根据定义的规则校验这个token是否合法就行。
session-cookie是需要cookie配合的，居然要cookie，那么在http代理客户端的选择上就是只有浏览器了，因为只有浏览器才会去解析请求响应头里面的cookie,然后每次请求再默认带上该域名下的cookie。但是我们知道http代理客户端不只有浏览器，还有原生APP等等，这个时候cookie是不起作用的，或者浏览器端是可以禁止cookie的(虽然可以，但是这基本上是属于吃饱没事干的人干的事)…，但是token 就不一样，他是登陆请求在登陆成功后再请求响应体中返回的信息，客户端在收到响应的时候，可以把他存在本地的cookie,storage，或者内存中，然后再下一次请求的请求头重带上这个token就行了。简单点来说cookie-session机制他限制了客户端的类型，而token验证机制丰富了客户端类型。
时效性。session-cookie的sessionid实在登陆的时候生成的而且在登出事时一直不变的，在一定程度上安全就会低，而token是可以在一段时间内动态改变的。
可扩展性。token验证本身是比较灵活的，一是token的解决方案有许多，常用的是JWT,二来我们可以基于token验证机制，专门做一个鉴权服务，用它向多个服务的请求进行统一鉴权。”

12、工厂模式：https://www.jianshu.com/p/11918dd0f694

2019-08-06

1、Node 单线程https://segmentfault.com/a/1190000005953543

2019-08-08

1、?❤️Object.keys / Object.values / Object.entries：https://juejin.im/post/5d48c275f265da03b12032a1

2、antd手册
前端发展史：
静态页面阶段：后端 MVC
AJAX 阶段：实现了（获取数据 => 处理数据 => 展示数据）完整业务逻辑
前端 MVC 阶段：MVVM
SPA 阶段：开发页面 => 开发前端应用
React：网页组件的解决方案，任何应用架构都可以采用（React 本身的定位很单纯，它是一个网页组件的解决方案。也就是说，它只解决怎么把复杂的页面拆分成一个个组件，然后一个个独立的组件又怎么拼装成可以互相协同的网页。）
antd 基于 React 框架，采用 Redux 架构，进行封装后大大了简化开发工作量?
https://www.yuque.com/ant-design/course/sc1lvc

umi：
本课程选择使用 umi 作为编译工具。其实 umi 不仅仅是一个编译工具，它同时也是一个前端框架。它对社区的 webpack，react-router 等进行的封装，使得我们可以基于它快速搭建一个 React 项目。
umi 有各种类型的脚手架，方便你快速启动项目。

Node JS：
首先，请安装 NodeJS。NodeJS 是一个 JS 执行环境，umi 基于 JS 编写，并且需要在你的开发机上运行，所以依赖于它。

2019-08-09

1、运行时加载 / 静态化加载：https://www.cnblogs.com/liaojie970/p/7376682.html
2、ES6加载CommonJS模块可以使用import；CommonJS模块加载ES6模块不能使用require，只能使用import：https://juejin.im/post/5ae04fba6fb9a07acb3c8ac5

3、❤️深度好文Blob：https://juejin.im/post/59e35d0e6fb9a045030f1f35

2019-08-12

1、文件上传(tencent)：https://cloud.tencent.com/developer/article/1004961
0）FileUpload 对象
1）XMLHttpRequest Level 1 和 XMLHttpRequest Level 2 区别
2）xhr.upload.onprogress回调与html5 progress标签
3）图片预览
4）html5拖拽
5）IE form+iframe

2、❤️[待看]收藏 ajax：http://louiszhai.github.io/2016/11/02/ajax/

3、浏览器文件API：https://juejin.im/post/5b32fb5cf265da598223df9e
0）FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。
1）将 dataURL 转为 blob对象

4、上传下载：https://juejin.im/post/59598ecf5188250d8d141fff
0）?Base64 编码: html5支持 Base64 编码 b to a 编码；a to b 解码

var a = "http://localhost:8000/.."
var b = btoa(a);  // aHR0cDovL2xvY2FsaG9zdDo4MDAwLy4u
var c = atob(b);  // http://localhost:8000/..

5、移动端图片上传旋转、压缩的解决方案：https://github.com/lin-xin/blog/issues/18

6、file.type只是根据后缀名，只能了解基本的（待验证）

7、Blob文件上传：https://segmentfault.com/a/1190000015852421
Blob URL的长度一般比较短，但Data URL因为直接存储图片base64编码后的数据，往往很长，如上图所示，浏览器在显示Data URL时使用了省略号（…）。当显式大图片时，使用Blob URL能获取更好的可能性。
Blob URL可以方便的使用XMLHttpRequest获取源数据,比如设置XMLHttpRequest返回的数据类型为blob
Blob URL 只能在当前应用内部使用，把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL相比之下，就有很好的移植性，可以在任意浏览器中使用。

8、说说node中可读流和可写流：https://juejin.im/post/5a6edd53518825732b1a1b2e

9、?Node drain：https://yq.aliyun.com/articles/3161
Returns true if the entire data was flushed successfully to the kernel buffer. Returns false if all or part of the data was queued in user memory. ‘drain’ will be emitted when the buffer is again free.

10、❤️移动端实时音视频直播技术详解（一）：开篇 http://www.52im.net/thread-853-1-1.html

2019-08-13

1、文件概述 / 计算机程序的思维逻辑：https://mp.weixin.qq.com/s?__biz=MzIxOTI1NTk5Nw==&mid=2650047392&idx=1&sn=793b8b06084ada1db486fe8f98901386&chksm=8fde2672b8a9af64120ef6924fc3fb798365d3a26dcb5966adc1fd7d74c0d761e016daa197a0#rd
0）所有文件都是以二进制形式保存的，与数据类型相似，文件也有文件类型的概念（以后缀名形式体现），文件类型可粗略分为两类，一类是文本文件（.txt / .java / .html），另一类是二进制文件（.zip / .pdf / .mp3 / .xlsx）。分为文本文件和二进制文件。
基本上，文本文件里的每个二进制字节都是某个可打印字符的一部分，都可以用最基本的文本编辑器进行查看和编辑，如notepad / vi
二进制文件中，每个字节可以表示字符、颜色、字体、声音大小等等，如果用基本的文本编辑器打开，一般都是满屏乱码，需要专门的应用程序进行查看和编辑。
文本文件的编码（我们一般不知道一个文本文件用什么编码的，UTF-8可以使用BOM头）

1）文件系统，常见的文件系统有FAT32和NTFS

操作系统中有一个临时文件的概念，临时文件位于一个特定目录，比如Windows 7，一般位于"C:\Users\用户名\AppData\Local\Temp"，Linux系统，位于"/tmp"，操作系统会有一定的策略自动清理不用的临时文件。临时文件一般不是用户手工创建的，而是应用程序产生的，用于临时目的。

2、JS进行utf8编码和解码：https://www.cnblogs.com/coloc/p/8111601.html
Web要求URL的查询字符串采用UTF-8编码，对于一些特殊字符或者中文等，会编码成多个字节，变成%加相应16进制码的形式。比如：汉字中将会被编码为%E4%B8%AD

3、❤️浅谈node.js中的stream(流)：https://segmentfault.com/a/1190000014138192
用实例 / 实践说话
我的通俗理解：⚠️highWaterMark表示一次最多读/写多少字符，不是缓冲区的大小（rs._readableState.length获取缓冲区中数据长度，.buffer获取缓冲区内容）
⚠️注意highWaterMark也不是最多读入，可以比它多（当read（值）值 > highWaterMark的时候）
**1）**可读流的工作模式：读到缓冲区（pause / flow模式），如果是flow模式，会读到（highWaterMark字节的放入缓冲区）highWaterMark那么多，就不能再放入缓冲区了，读取数据（read），然后缓冲区小于highWaterMark，会接着放入缓冲区highWaterMark字节的数据（3-1+3）

当read（值）值 > highWaterMark，会
**2）**可写流的工作模式：写入缓冲区，写到缓冲区满（不断替换？？），系统在某个时刻写入文件，缓冲区drain，接着写

2019-08-14

1、可写流：https://stackoverflow.com/questions/35801568/stream-highwatermark-misunderstanding
❗️write函数返回false，依然可写（后续数据不丢失），但是存入内存，不建议
SO A：2) If the highWaterMark limit is reached, the stream cannot buffer anymore, so the #write method returns false to let you know that what you tried to write won’t be write (never).
This is false, data is still buffered, the stream doesn’t lose it. But you should stop writing at this point. This is to allow backpressure to propagate.
Your question is addressed in the writable.write(chunk[, encoding][, callback]) docs:
This return value is strictly advisory. You MAY continue to write, even if it returns false. However, writes will be buffered in memory, so it is best not to do this excessively. Instead, wait for the ‘drain’ event before writing more data.

2、❤️缓冲区Buffer：https://juejin.im/post/5d3a3b8ff265da1b8d166323#comment
知乎：https://www.zhihu.com/question/26190832

‘ascii’ - 仅适用于 7 位 ASCII 数据。此编码速度很快，如果设置则会剥离高位。
‘utf8’ - 多字节编码的 Unicode 字符。许多网页和其他文档格式都使用 UTF-8。
‘utf16le’ - 2 或 4 个字节，小端序编码的 Unicode 字符。支持代理对（U+10000 至 U+10FFFF）。
‘ucs2’ - ‘utf16le’ 的别名。
‘base64’ - Base64 编码。当从字符串创建 Buffer 时，此编码也会正确地接受 RFC 4648 第 5 节中指定的 “URL 和文件名安全字母”。
‘latin1’ - 一种将 Buffer 编码成单字节编码字符串的方法（由 RFC 1345 中的 IANA 定义，第 63 页，作为 Latin-1 的补充块和 C0/C1 控制码）。
‘binary’ - ‘latin1’ 的别名。
‘hex’ - 将每个字节编码成两个十六进制的字符。

3、ASCII码（109、77、25105是ASCII码）

4、fetch文件上传添加Content-type请求头问题：https://segmentfault.com/a/1190000010205162
答：不加

2019-08-15

1、❤️张大大对于文件的¥#¥@#%¥%……¥文章～～～：理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
2、❤️张大大引用文章的大神：https://blog.csdn.net/hfahe/article/details/7421203

3、base64：https://juejin.im/post/5bd00c0251882577787451f4
为什么会有Base64编码呢？因为有些网络传送渠道并不支持所有的字节，例如传统的邮件只支持可见字符的传送，像ASCII码的控制字符就不能通过邮件传送。这样用途就受到了很大的限制，比如图片二进制流的每个字节不可能全部是可见字符，所以就传送不了。最好的方法就是在不改变传统协议的情况下，做一种扩展方案来支持二进制文件的传送。把不可打印的字符也能用可打印字符来表示，问题就解决了。Base64编码应运而生，Base64就是一种基于64个可打印字符来表示二进制数据的表示方法。

4、gif图片优点：
大小1 * 1 像素，png格式，大小88字节。//zxx: 当图片颜色简单到一定程度的时候，gif格式图片大小要小于png8, 所以，这个点如果保存成gif格式，只需要43字节，为png一半大小

# CSS代码：
.dot {background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);*background-image:url(/wordpress/wp-content/themes/default/images/zxx_dotted.gif);background-repeat:repeat-x;background-position:left bottom;
}
# HTML代码：
<div class="dot">下面这个虚点点↘</div>

5、?DS :
0）文件在硬盘里是二进制，读到内存里就是相应的格式了，input取到的是个地址
1）编码的目的是加快传输
2）请求收到会先经过浏览器内部处理，如果是文件（要下载）就直接下载，ajax等可以收到数据，不能接收文件，浏览器机制
3）node stream可读流没解决

6、js机制图很好看

7、你不能预先把点点滴滴串在一起；唯有未来回顾时，你才会明白那些点点滴滴是如何串在一起的

世界都没有观过，哪儿来的世界观。生命本身就是体验，没有丰富的经历，如何有更多的感悟

8、如何使用HTML5实现拍照上传应用：https://blog.csdn.net/hfahe/article/details/7354912

2019-08-19

1、表单能否跨域：
浏览器遵从同源策略，限制ajax跨域的原因在于ajax网络请求是可以携带cookie的（痛殴设置withCredentials为true），比如用户打开了浏览器，登录了weibo.com，然后又打开了百度首页，这时候百度首页内的js，向weibo.com用withCredentials为true的ajax方式提交了一个post请求，是会携带浏览器和weibo.com之间的cookie的，所以浏览器就默认禁止了ajax跨域，服务器必须设置CORS才可以。
而form提交是不会携带cookie的，你也没办法设置一个hidden的表单项，然后通过js拿到其他domain的cookie，因为cookie是基于域的，无法访问其他域的cookie，所以浏览器认为form提交到某个域，是无法利用浏览器和这个域之间建立的cookie和cookie中的session的，故而，浏览器没有限制表单提交的跨域问题。

2、一件事“做得好”比较好，还是“做得快”比较好？
鱼和熊掌不能得兼，你怎么选择：做得好，付出的代价可能是耗时长、成本高；做得快，意味着完成度低、不是精品。
我很赞同一篇文章的结论：做得快更好。
做得快不仅可以让你在单位时间内完成更多的工作，而且因为你工作得很快，所以你会觉得成本低，从而倾向于做更多。
写一篇博客，你可能需要两天。这是很高的时间成本，你觉得太贵了，于是你很少写。但是，做好一件事的唯一方法，就是多做这件事。做得越快，这件事的时间成本就越低，你会愿意做得更多。
人们总是倾向于，多消费时间成本低的东西。网站很快，就会多访问；搜索很快，就会多搜索；文章很容易读懂，就会多读几篇。做得快的核心，就是要让时间成本降下来，从而多做。

3、⚠️❤️将this显示化（call）：https://www.yuque.com/kanbudongdeni/cya48m/xmayy3
由于 this 的模糊性，通过 call 转化将 this 显式传入：
obj.method(fn,1) ===> obj.method.call(obj,fn,1)
fn() ===> fn.call(undefined) // 这里默认为 this 为全局环境（window/global）
arguments[0]() ===> arguments[0].call(arguments)
由上面可以看出：三个函数调用，传入的 this 。

4、?复习 —— 信息量：https://mp.weixin.qq.com/s/S511MWL94EmlEvpnPwTHzQ

2019-08-20

1、ab测试：https://www.cnblogs.com/h–d/p/9903959.html

2019-08-21

1、JS策略模式：https://juejin.im/post/5d5ca0286fb9a06b317b64e7

export const StrategyMap = {}

2、知识管理：我那 “低效” 的个人知识管理 - phodal的文章 - 知乎
https://zhuanlan.zhihu.com/p/75966880

3、pro-tree项目引入ElementUI；页面布局使用ElementUI且改写成嵌套路由

2019-08-23

1、Vue的props：https://cn.vuejs.org/v2/guide/components-props.html
2、装mongodb，新建pro-tree-admin项目

3、私域流量：https://www.niaogebiji.com/article-23424-1.html?from=groupmessage