前端学习日记 -- 四月

2019-04-09

1、前端国际化：React-intl https://segmentfault.com/a/1190000005824920
2、CSS内阴影 inset；不规则阴影 filter；
3、CSS transform（变化）；transition（过渡 - 动画）；
4、【初探】：浮点数计算：https://github.com/camsong/blog/issues/9（有用）；
5、【初探】：TypeScript：https://www.youtube.com/watch?v=WBPrJSw7yQA（YouTube）；

2019-04-10

1、div模拟实现textarea(github: https://github.com/NanaYang007/web_practise/tree/master/html/div实现textarea )
https://blog.csdn.net/doris_sun/article/details/70208555
2、【待实现】页面加载进度条 参考nprogress
《动手实现一个网页加载进度loading》：https://www.cnblogs.com/likar/p/6247951.html
3、物理像素/逻辑像素比例：js的window.devicePixelRatio ‘比例多少与设备相关’。页面放缩会影响window.devicePixelRatio改变。
移动端1像素边框问题：https://www.jianshu.com/p/fa670b737a29（border-image??、box-shadow??、transform…）
设计稿的100%还原-「REM」引发的思考：https://www.jianshu.com/p/1b13889c80f5

2019-04-11

0、⚠️线上bug: 百度小程序城市数据发生混乱
问题：for…in 不能保证对象属性的顺序输出
Chrome Opera 中使用 for-in 语句遍历对象属性时会遵循一个规律，它们会先提取所有 key 的 parseFloat 值为非负整数的属性， 然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。其它浏览器则完全按照对象定义的顺序遍历属性。
http://w3help.org/zh-cn/causes/SJ9011
处理办法：加入letterMap数组[‘A’,‘B’,‘C’…‘Z’]，顺序遍历letterMap，对应obj[letterMap[i]]
1、localstorage在不重写、删除时永远存储，所以更新需要设置时间对比

2、水平垂直居中：flex, margin, transform, grid；
3、Grid布局：https://www.cnblogs.com/wangzhichao/p/7987346.html；
4、【初探】Proxy：http://es6.ruanyifeng.com/#docs/proxy；【待看】https://zhuanlan.zhihu.com/p/35080324

2019-04-12（周五）

1、连续赋值/左查询：a.x=b=3的过程，.优先级比=高，先执行a.x，没有值所以是undefined，连续赋值的顺序是从右到左，b=3，返回结果是3（可以看控制台的输出），所以a.x赋值得到了3；
题目：

var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x) 	
console.log(b)

2、进阶1-1：执行上下文
执行上下文：当前JS代码被解析和执行时所在环境的抽象概念；
执行栈：存储在代码执行期间创建的所有执行上下文。

执行上下文：this，词法环境(let/const/函数参数)，变量环境(var)
【有用】https://github.com/yygmind/blog/issues/12
【待看】https://heyingye.github.io/2018/03/19/js引擎的执行过程（一）/

3、进阶1-3：内存
栈中存放基本类型以及引用地址，堆中存放复杂对象。对于计算机来说，栈比堆的运算速度快。

4、进阶1-4：内存机制
⚠️闭包
闭包中的变量不保存在栈内存中，保存在堆内存中，这也就解释了为什么函数之后闭包还能引用到函数内的变量。

function A(){
	let a = 1;
	function B(){
		console.log(a);
	}
	return B;
}

闭包的简单定义是在函数A返回函数B，并且在函数B中引用了函数A的变量，函数B成为闭包。
函数A弹出调用栈后，函数A中的变量这时候存储在堆中，所以B仍然能访问A中的变量，现在的JS引擎可以通过逃逸分析分辨出哪些变量需要存储在堆上，哪些需要存储在栈上。

内存泄露：对于不再用到的内存，没有及时释放，就叫内存泄露。对于持续运行的服务进程，必须及时释放不再用到的内存，否则内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

垃圾回收算法：
引用计数（现在浏览器不再使用）—— 不再被指向则清除 —— 存在循环引用问题 —— IE下
标记清除（常用）—— 无法到达的对象

5、进阶1-5：内存泄露及避免
四种常见的内存泄露：
1）意外的全局变量 —— 解决办法：JS文件头部加use strict，使用严格模式避免意外的全局变量；
2）被遗忘的计时器或回调函数 —— 现在浏览器可以正确检测和处理循环引用了
3）脱离DOM的引用 ？？
4）闭包 ？？
https://github.com/yygmind/blog/issues/16
作业(即时回答正确)

console.log(fun)
console.log(person)
console.log(person)
console.log(fun)
var person = "Eric";
console.log(person)
function fun() {
    console.log(person)
    var person = "Tom";
    console.log(person)
}
fun()
console.log(person)

6、进阶2-2：从作用域链理解闭包
⚠️闭包的外层是函数，且函数已经执行完毕，则虽然函数从执行上下文栈中退出，但是由于闭包的存在，变量对象在作用域链中得到保留。

面试必刷题（大彻大悟）

var data = [];
for(var i=0; i<3; i++){
	data[i] = function(){
		console.log(i);
	}
}
data[0]();
data[1]();
data[2]();

原因：在function执行时i已经是3了，所以三个结果都是3.
解决办法：使用闭包

var data = [];
for(var i=0; i<3; i++){
	data[i] = function(i){
		return function(){
			console.log(i);
		}
	}(i)
}
data[0]();
data[1]();
data[2]();

注意：

{
	let i=0;
	data[i] = function(){
		console.log(i);
	}
}

let声明i，则创造了一个块级作用域，i不再是全局变量，data[0]自然形成了闭包。（块级作用域与函数作用域相同，执行完成后，变量销毁）。

2019-04-15

1、JS技巧：
1）转换为数字(取绝对值)：~~‘23’ // 23 ～取反
2）去掉小数点：123.5 | 0; // 123 -123.5 | 0; // -123
3）去掉末尾数字：‘124542’ / 10 | 0; // 12454
4）自动类绑定：method = () => {};

2、this：
1）运行时绑定，fn = obj.bar; fn() 和 fn = obj.bar() 的不同；
2）call/apply一旦绑定后不能修改；
https://github.com/ruanyf/es6tutorial/issues/150
https://juejin.im/post/59aa71d56fb9a0248d24fae3

3、【待看】Function.prototype.bind()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

4、类数组：
具有：指向对象元素的数字索引下标和length属性
不具有：比如push、shift、forEach以及indexOf等数组对象具有的方法
使用var arr = Array.prototype.slice.call(arrLike)转换成真正的数组
ES6:
let arr = Array.from(arguments);
let arr = […arguments];
为什么要有类数组对象呢？或者说类数组对象是为了解决什么问题才出现的？
JavaScript类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制（⚠️？？）。Array存储的对象能动态增多或减少，并且可以存储任何JavaScript值。JavaScript引擎会做一些内部优化，以便对数组的操作可以很快。然而，随着Web应用程序变得越来越强大，尤其一些新增加的功能例如：音视频编辑，访问WebSockets的原始数据等，很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组来操作原始的二进制数据，这将会非常有帮助。
PS 一句话就是，可以更快的操作复杂数据。

5、call的实现：

Function.prototype.call0 = function(context){
	context.fn = this;
	context.fn();
	delete context.fn;
}
// 加入传参以及判断this指向
Function.prototype.call2 = function (context) {
    context = context ? Object(context) : window; // 实现细节 1 和 2
    context.fn = this;
    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('context.fn(' + args +')');
    delete context.fn
    return result; // 实现细节 2
}

https://github.com/yygmind/blog/issues/22

6、Vue.js官网学习：计算属性、动态样式class类、if-else、for-key、“n in 10”、$event、keyup.enter

7、连续赋值：从左到右计算出ref，然后把最右边的值，依次赋给左边的ref，当碰到=号左边为undefined时，赋值会忽略。（当左侧表达式为结构表达式时{c}，var a = {c} = 4; // c = undefined var {c} = {c:1}; // c = 1）

2019-04-16

0、模拟器调试web页面：模拟器打开页面 – 打开Safari – 开发菜单栏 用户代理下面 – 选择模拟器 右菜单选择具体页面（鼠标划上页面会被选中）。

2019-04-18

0、"“模拟器调试”" 安装软件：下载.app.zip文件 - 设置服务器地址 - 重启 - 本地调试（模拟器长按刷新 local；本地起qrn run）

2019-04-22

0、快应用开发环境及编译过程

2019-04-23

0、302错误：暂时重定向（301错误：永久重定向）
1、Github使用 watch/star/fork：https://www.jianshu.com/p/6c366b53ea41
2、正则表达式学习 ^ ?：https://zhidao.baidu.com/question/308173143.html
3、网络请求：
1）状态码204：请求执行成功，但没有数据，浏览器不用刷新页面/导向新的页面。对于一些提交到服务器处理的数据，只需要返回是否成功的情况下，可以考虑使用状态码204（也就是XMLHttpRequest.status）来作为返回信息，从而省掉多余的数据传输。
2）HEAD方法请求：客户端仅向服务器请求某个资源的响应头，省略响应体。客户端可以通过HEAD请求收集返回数据的相关信息（content-length / content-type）以确定如何操作该资源。
http://www.mamicode.com/info-detail-1825350.html

4、Polyfill：https://segmentfault.com/a/1190000010106158?utm_source=tuicool&utm_medium=referral

5、原生fetch：
8月补充：发起一个fetch请求时，如果content-type是’text/html’，返回的是一个字符串类型数据；.json()是JSON（前提是返回值符合JSON格式）。第一次then，调用.text() 返回的是一个promise

6、Promise: [ p1.then() ]整体 .then()

2019-04-24

1、oauth2：https://www.cnblogs.com/linianhui/p/oauth2-authorization.html
2、【重学前端】捕获与冒泡：捕获是计算机处理机制（鼠标移动 坐标系统）、冒泡是人类思维（点击电视开关时也点击了电视）。捕获( addEventListener第三个参数true)总是发生在冒泡(false)之前。建议使用冒泡，符合人类思维。
https://time.geekbang.org/column/article/90485

2019-04-25

1、403错误：表示资源不可用。服务器理解客户的请求，但拒绝处理它，通常由于服务器上文件或目录的权限设置导致的WEB访问错误。
2、child选择器：span:nth-child(2)表示第2个span
nth-child：
情况1：从1开始，表示第几个；
情况2：an+b，n从0开始，n表示倍数，b表示偏移值，表达式。如3n+0选中每三个的一个元素。
nth-last-child：倒数第几个元素（从1开始）
3、a = [1,2,3,] 竟然是3个数，a=[,] length为3
以上来自做的一套题：https://www.nowcoder.com/test/15711084/summary