在开发中经常会遇到这样的问题：每次在当前目录下增加一个新的文件，需要在入口文件 index.js 中引入
比如这样：

1
2
3
4
5
6
7
8

import A from './A';
import B from './B';
import C from './C';
export default {
  A,
  B,
  C,
}

每次加一个文件，都需要在入口文件中引用，如果忘记了，肯定会出现问题，那么该如何在项目中，自动的引入这些琐碎的文件呢？

在使用 saga 时，有时会有一种场景：

• 在页面中 dispatch 了一个 action，这个 action 在 saga 中也有注册。
• 在触发完 saga 中注册的 generator 函数后，需要触发回调，通知页面做一些操作。
• 但是由于场景限制必须在页面中触发回调，亦或是使用页面中的数据（放到 saga 的 generator 中看起来会异类）。

最近有新任务，把当前的项目加个 PWA 进来。于是乎，又发现了技术的星辰大海。
测试项目在 项目在 github 也可以直接访问 tyouzu1.github.io

css中 position:sticky 这个属性的兼容性也在慢慢提升，我在项目中也有了实际应用，比如固定表头、页头等。
首先，sticky会根据附近的父节点的 overflow 属性来定位，如果 overflow 是 hidden，那么便不会有滚动条，与position:sticky的功能也想违背，也不会进行相应的定位了，等于无效，只有滚动条存在时才会生效。
总的来说，就是如果没有高度，是看不出来 sticky 的效果的。

当想对 table 中的表头进行定位时，在 chrome 中 thead 是无法使用position:sticky的，但是 th 标签可以。

1
2
3
4

thead th{
  position: sticky;
  top: 0;
}

碰见一个问题（后期有空补图）
使用 antd Select、DatePiker 等会弹出浮层的组件时，浮层会一直存在，在滚动屏幕时，不会自动关闭浮层。

前提条件：

如果你的 getPopupContainer(也可以是类似的功能参数) 未填，默认渲染到body上，但是页面中的 滚动条 并不依赖于 body 而是页面中其他的元素，属于div中的内滚动条。这时，浮层由于是相对于body定位，无论怎么滚动div内滚动条，浮层便会依赖于body定位，永久处于屏幕中的某个位置不变。
如果浮层一直在这个位置，自然会影响我们滚动时看其他数据。
如果将滚动条所在的节点传入 getPopupContainer 便不会有这个问题，这是因为浮层会相对于滚动条所在的位置 absolute 定位。
但是当前的场景无法使用 getPopupContainer，这时可以用另外一种 hack 的办法。

hack

尝试后可知道，在点击出浮层后，点击页面中其他任意位置，便可以关闭浮层。所以可以利用这个方式，在滚动时来关闭浮层。
这时候便可以模拟一个事件来触发这个操作

1
2
3
4

const input =  document.querySelector('input')
const event = document.createEvent('Events');
event.initEvent('touchstart',true,true);
input.dispatchEvent(event);

利用 dispatchEvent 来模拟点击事件，来触发antd的关闭浮层的操作。（至于为什么是touchstart，可以自己看看源码，或者直接点击测试）

因为之前找工作换工作，找工作一个月，入职两个多月，一致在忙来忙去的，博客也搁置了一段时间，现在想想也蛮后悔的，不能总是半途而废，赶紧回来补课。把之前的东西写完，今后好好的继续学习吧，加油。

上一篇 简易实现一个 Vue（1）【原理解析】 讲完了大概的基本原理，现在照着Vue自己写一个。
说是自己写，思路一样的话，大概也就和照抄差不多，算个简易可拓展版的
具体代码在我的github

今天面了字节跳动，龟儿子的手动实现bind函数都没写出来。罚抄一百遍。

简单实现一个Vue，还原一些基本功能。当然，实现之前需要先了解它的实现原理。
其实 Vue 的源码确实很清楚了，这里可能讲的也就一知半解，也就是个大概思路。