前端学习日记 --七月

20190703

1、react300问：
react的合成事件：初步了解e.nativeEvent
https://segmentfault.com/a/1190000015725214

2、Visual DOM工作原理：

3、高阶组件
举例：增加props

function HOC(WrappedComponent){
	return class Text extends Component {
		render(){
			const newProps = {a:1; b:2}
			return <WrappedComponent {...this.props} {...newProps} />
		}
	}
}

4、⚠️调用super(props)后，可以访问this.props，之前能访问props（在constructor内，之外可以用this.props）

5、setState动态key：

this.setState({
	[event.target.id] : event.target.value
});

6、⚠️传递函数给setState

this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});  // 三句执行完 this.state.count = 1

this.setState((preState, props) => {
	count: preState.count + props.increment
}); 

20190708

1、“函数的形参是值的传递，传递对象的话，函数接受的是这个对象的指针。”
⚠️这一段很重要：我们可以把ECMAScript函数的参数想象成局部变量。在向参数传递基本类型的值时，被传递的值被复制给一个局部变量（即命名参数，或者用ECMAScript的概念来说，就是arguments对象中的一个元素）。在向参数传递引用类型时，会把这个值在内存中的地址（指针）复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。

面试题：

function changeObjProperty(o) {
  o.siteUrl = "http://www.baidu.com"
  o = new Object()
  o.siteUrl = "http://www.google.com"
} 
let webSite = new Object();
changeObjProperty(webSite);
console.log(webSite.siteUrl);

2、https :

请求挟持

3、referer防盗链
目前的云存储服务商大部分都支持referer防盗链。其原理就是在访问资源时，请求头会带上发起请求的页面地址，判断其不存在（表示直接访问图片地址）或不在白名单内，即为盗链。

4、[译]现代框架存在的根本原因
https://juejin.im/post/5d1df53fe51d4510a5033627

20190711

1、延迟函数 —— 由一个delay函数开启立即执行函数大门：

const delay = (()=>{
	let timer = 0;
	return (callback, ms)=>{
		clearTimeout(timer);
		timer = setTimeout(callback,ms);
	};
})();

简单好用的延迟函数，我的理解是通过立即执行函数让timer变量“锁”在delay的函数作用域内，不污染全局变量。
React数据管理中最常见的模式和技巧
官方解释：这个函数的基本前提是它自动清除 setTimeout()。因此，当它被调用时，如果它在超时之前被再次调用，它会清除自己以避免 JavaScript 调用堆栈溢出的问题。在指定的毫秒延迟之后，该函数就像一个常规的 setTimeout 一样执行它所包含的代码（即在用户停止输入 3000 毫秒后再调用）。

2、由1引申：setTimeout会返回一个id，是标志该定时器的唯一id，也是clearTimeout传入的值。

2019-07-13

1、eslint格式化
http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html
进入vscode配置中:
配置代码为：

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

2019-07-17

1、【回看】回调是什么以及怎么处理？http://callbackhell.com/

2、非关系型数据库与全栈：https://segmentfault.com/q/1010000016910793
【知乎好文】MongoDB 等 NoSQL 与关系型数据库相比，有什么优缺点及适用场景？https://www.zhihu.com/question/20059632

与关系型数据库中表结构不同，文档中可以嵌入数组和子文档，就像程序中的数组和成员变量一样。这是关系型数据库三范式不允许的。但实际中我们经常看到一对多和一对一的数据。比如，一篇博客文章的 Tag 列表作为文章的一部分非常直观，而把 Tag 与文章的从属关系单独放一张表里就不那么自然。再比如，一个订单下面的收货地址，包括省、市、区、街道和门牌，作为一个子文档，与订单的信用卡地址很容易区分开。更方便的是，嵌入的数组和子文档之上可以直接建立索引，比如我可以很快找到所有 Tag 包含 MongoDB 的文章。

其实，我挺喜欢关系型数据库那些理论的，SQL 语言可以很精确地形式化，赏心悦目。然而，三范式强调的「数据没有任何冗余」并不是今天程序员们最关心的问题。他们用着方便不方便才是更重要的问题。

2019-07-22

1、node的path模块：
api: basename / extname / resolve / relative
https://mp.weixin.qq.com/s/Wyi0W5m0fnE5TuvE5sDw1Q

2019-07-23

1、Map / Set
Set是没有重复的数组
const s = new Set();
s.add(3)

Map键值对集合，键可以是对象等更丰富的类型。
const m = new Map();
m.set({o:1}, ‘content’);
m.get({o:1});

2019-07-26

1、exports vs module.exports：https://www.imooc.com/article/34483
exports —— 可直接导出多个函数
文件1定义：

exports.hello = function(){}

文件2使用：

const a = require('./1.js');   a.hello()

module.exports —— 导出一个对象/函数，使用时需要new
文件1定义：

module.exports = class Square{}

文件2使用：

const Square = require('./Square.js')
const mySquare = new Square();
mySquare.hello()

https://github.com/nswbmw/N-blog/blob/master/book/2.2 exports 和 module.exports.md
？？？
module.exports 初始值为一个空对象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports

循环引用问题：http://nodejs.cn/api/modules.html#modules_cycles
“总的来说，循环依赖的陷阱并不大容易出现，但一旦出现了，对于新手来说还真不好定位。它的存在给我们提了个醒，要时刻注意你项目的依赖关系不要过于复杂，哪天你发现一个你明明已经 exports 了的方法报 undefined is not a function，我们就该提醒一下自己：哦，也许是它来了。”

2、Promise必知必会（十道题）：https://zhuanlan.zhihu.com/p/30797777
1） promise 状态一旦改变则不能再变。
2）promise 每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用。
3）promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值。
4）解释：.then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获，需要改成其中一种：
return Promise.reject(new Error(‘error!!!’))
throw new Error(‘error!!!’)
因为返回任意一个非 promise 的值都会被包裹成 promise 对象，即 return new Error(‘error!!!’) 等价于 return Promise.resolve(new Error(‘error!!!’))。
5）.then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。
6）⚠️.then 的第二个处理错误的函数捕获不了第一个处理成功的函数抛出的错误，而后续的 .catch 可以捕获之前的错误。

3、RESTful风格（目前最流行的 API 设计规范，用于 Web 数据接口的设计。）：http://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html

4、设计一个博客系统：页面(router)、跟踪(session)、权限(checkLogin 中间件)、页面设计(antd、jquery+Semantic-UI等)、切图（模块化）、数据库。。。（未完待续）

5、⚠️⚠️await后面跟Promise会进入resolve/reject，然后返回resolve/reject结果

20190729

1、ES6实现单向链表：https://www.cnblogs.com/xiaosongJiang/p/10878718.html
2、Symbol 非私有的内部变量：http://es6.ruanyifeng.com/#docs/symbol
不重复 —— Symbol(‘cat’)；
可重复 —— Symbol.for(‘cat’);

20190731

1、memory cache / disk cache：https://www.jianshu.com/p/8332da83955d
2、缓存（强缓存/协商缓存）：https://blog.csdn.net/eroswang/article/details/8302191 （详）
3、http性能优化：减少http请求次数（缓存）、减少请求时间
4、问题：虽然该方法减少了已缓存资源的下载时间，但仍然发起了一次http请求。
解决：已缓存资源不再发起http请求，即HTTP的Expires和Cache-Control。对一个网站而言，CSS、JavaScript、图片等静态资源更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，将静态内容设为永不过期，或者很长时间后才过期。
Cache-Control属性是在服务器端配置的，不同的服务器有不同的配置，apache、nginx、IIS、tomcat等配置都不尽相同。
问题：浏览器缓存的资源，若又想更新资源，如何实现？
解决：通过修改该资源的名称来实现。修改了资源名称，浏览器会当做不同的资源。
https://blog.csdn.net/zhouziyu2011/article/details/71312452
5、图记：

6、no-store / no-cache：
当我们的资源内容不可复用时，直接为 Cache-Control 设置 no-store，拒绝一切形式的缓存；否则考虑是否每次都需要向服务器进行缓存有效确认，如果需要，那么设 Cache-Control 的值为 no-cache；否则考虑该资源是否可以被代理服务器缓存，根据其结果决定是设置为 private 还是 public；然后考虑该资源的过期时间，设置对应的 max-age 和 s-maxage 值；最后，配置协商缓存需要用到的 Etag、Last-Modified 等参数。

7、ES精确值查找：https://www.elastic.co/guide/cn/elasticsearch/guide/current/_finding_exact_values.html
组合过滤器：https://www.elastic.co/guide/cn/elasticsearch/guide/current/combining-filters.html
查找多个term(terms:[]) / 精准查找：https://www.elastic.co/guide/cn/elasticsearch/guide/current/_finding_multiple_exact_values.html

8、ES的exist查询：https://www.elastic.co/guide/cn/elasticsearch/guide/current/_dealing_with_null_values.html

{
	"query": {
		"constant_score": {
			"filter": {
				"exists" : {
					"field" : "poiGrade"
				}
			}
		}
	}
}

9、?❤️图片优化
二进制位数与色彩的关系
在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。
一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色。

计算图片大小
对于一张 100 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 1 * 4 / 1024）。
但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。
了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了：

减少像素点
减少每个像素点能够显示的颜色