木易杨-Daily-2

Share

第 148 题：[‘1’, ‘2’, ‘3’].map(parseInt) what & why ?

答案是 [ 1, NaN, NaN ]
map中的方法是function(item, index, arr){}
在此处换成parseInt的话，传给parseInt的参数是item和index
而parseInt本身接收两个参数parseInt(string, radix)string为元素，radix为解析的基数
parseInt(‘1’, 0) //radix为0时，且string参数不以“0x”和“0”开头时，按照10为基数处理。这个时候返回1
parseInt(‘2’, 1) //基数为1（1进制）表示的数中，最大值小于2，所以无法解析，返回NaN
parseInt(‘3’, 2) //基数为2（2进制）表示的数中，最大值小于3，所以无法解析，返回NaN

React-组件

Share

React 的核心特征是“数据驱动视图”，用公式表达为：UI = render(data)或UI = f(data);

组件的四大通信

基于Props的单向数据流

既然 props 是组件的入参，那么组件之间通过修改对方的入参来完成数据通信就是天经地义的事情了。不过，这个“修改”也是有原则的——你必须确保所有操作都在“单向数据流”这个前提下。

所谓单向数据流，指的就是当前组件的 state 以 props 的形式流动时，只能流向组件树中比自己层级更低的组件。 比如在父-子组件这种嵌套关系中，只能由父组件传 props 给子组件，而不能反过来。
可以实现三种通信方式

  • 父子组件
  • 子父组件
  • 兄弟组件(父子 -> 子父)
    不适合进行多重传递

利用“发布-订阅”模式驱动数据流

举例：

  • socket.io
  • Node中的EventEmitter
  • vue.js中的EventBus

优点：
监听事件的位置和触发事件的位置是不受限的

发布-订阅模型 API 设计思路
通过前面的讲解，不难看出发布-订阅模式中有两个关键的动作：事件的监听（订阅）和事件的触发（发布），这两个动作自然而然地对应着两个基本的 API 方法。

on()：负责注册事件的监听器，指定事件触发时的回调函数。

emit()：负责触发事件，可以通过传参使其在触发的时候携带数据 。

最后，只进不出总是不太合理的，我们还要考虑一个 off() 方法，必要的时候用它来删除用不到的监听器：

off()：负责监听器的删除。

木易杨-Daily-148

Share

第 148 题：webpack 中 loader 和 plugin 的区别是什么

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

loaders是被用来转换一定类型的模块，而plugins被用来最优化操作尽可能更大范围的任务，像打包优化，静态资源管理和环境变量的注入等。

木易杨-Daily-154

Share

第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思

答：

  • flex 属性的含义是：用于指弹性子元素如何分配空间。
  • flex：flex-grow flex-shrink flex-basis
    • flex-grow: 容器大于子元素的时候，子元素如何扩展
    • flex-shrink: 容器小于子元素的时候，子元素如何收缩
    • flex-basis: 子元素在主轴方向上的初始尺寸，比如flex-direction: row;时为宽度，flex-direction为column的时候，则为高度。他的值有auto | number | inherit | initail，如果值为auto，则 width有更高的优先级。如果设置了其他值，则flex-basis有更高的优先级，具体为：flex-basis(limited by minWidth and maxWidth) > width
  • 所以意思是，当容器宽度多的时候，不会扩大。而宽度不够的时候，会等比缩小。且如果设置了宽度，则为width的值，如果没设置宽度，则为实际内容。

木易杨-Daily-157

Share

浏览器缓存 ETag 里的值是怎么生成的

ETag

ETag是Entity Tag的缩写，含义是实体标志。是由服务器生成的，被请求资源在服务器的唯一标识。通常与If-None-Match配对。
当浏览器发送请求的时候，服务器会生成一个ETag码，然后放在response header里，返回给浏览器。当浏览器再次发送请求的时候，会生成一个If-None-Match，它的值与ETag相同。传到服务器以后，会与服务器之前生成的ETag码作对比，如果一样，则表示服务器与浏览器数据一致，则状态码为304，且不返回内容。如果不一样，则返回新的内容和新生成的ETag码。

生成方式

因为没用过，暂且了解。

Redis

Share

Redis

命令们

  • redis-server --daemonize yes 启动后在后台运行。--daemonize意思为是否后台运行，yes是在后台运行。
  • redis-cli 启动redis的命令行
  • flushall 在命令行模式下清除缓存。

木易杨-Daily-160

Share

第 160 题：输出以下代码运行结果，为什么？如果希望每隔 1s 输出一个结果，应该如何改造？注意不可改动 square 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const list = [1, 2, 3]
const square = num => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num * num)
    }, 1000)
  })
}

function test() {
  list.forEach(async x=> {
    const res = await square(x)
    console.log(res)
  })
}
test()

答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const list = [1, 2, 3]
const square = num => {
  return new Promise((resolve, reject) => {
	//  console.log(new Date().getSeconds())
    setTimeout(() => {
		console.log(new Date().getSeconds())
      resolve(num * num)
    }, 1000)
  })
}

async function test() {
	for (let item of list) {
         const res = await square(item)
         console.log(res)	
	}
}
test()

解释：
因为forEach是默认请求并发发起的，所以不能阻塞。可以吧forEach换掉，换成for of或者普通的for循环。
具体参考官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
其中解释道：‘除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。’

木易杨_Daily_155

Share

第 155 题：求最终 left、right 的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 600px;
    height: 300px;
    display: flex;
  }
  .left {
    flex: 1 2 500px;
    background: red;
  }
  .right {
    flex: 2 1 400px;
    background: blue;
  }
</style>

错误解： 因为子元素之和 400+500 = 900 > 父元素600
所以要按照flex-shrink来计算。
900 - 600 = 300
300/3 = 100
500 - 200== 300
400 - 100 = 300

正确解：
总权重 = （子元素宽度 * 子元素收缩系数）之和
溢出 = 子元素宽度之和 - 父元素之和
子元素收缩比例 = 子元素宽度 * 子项收缩系数 / 总权重
收缩宽度= 溢出 * 子元素收缩比例。

总权重 = 5002 + 4001 = 1400
溢出 = 400 + 500 - 600 = 300
.left收缩比例 = 5002/1400
.left收缩宽度 = 5002300/1400
.right收缩比例 = 4001/1400
.right收缩宽度 = 3004001/1400
最终.left宽度为 500 - 5002300/1400 = 285.71
.right宽度为 400 - 3004001/1400 = 314.29
以上结果进行过四舍五入。