此次赴日旅游可算是比上次好多了,路也认识了,交通也会坐了,对东京的印象任然是那么的喜欢,去了京都和奈良。
所以,想学日语的心情也漫漫的浮现出来,回来以后一直在忙碌着,因为 DeadLine 在月底(放会洋屁),所以精力都投入到工作中去了。
那么,空余的时间则安排了少量的学习了代码和日语。
这个月也同样的水,当然水归水,质量还是要保证在那边的,虽然工作忙,计划一拖再拖,但是该完成的还是要完成,只不过是延期罢了,哈哈。
React 源码阅读计划
截止 10 月底,学习版 React 编写学习进行中,具体这里就不做总计了,只记录进度(进度极度缓慢,体现人类三大本质之一:咕咕咕)。但是还是需要加快进度,最近有些散漫……这并不是一个好消息,需要注意!
来谈谈,使用 ESLint 来检查 TypeScript ,相对 TSLint 来说,很不适应。感觉文档不健全,在配置参数的时候,很多时候需要看报错提示来配置正确的参数,当参数遇到对象校验时,要参照文档进行配置,然而有好几次我的配置并没有按照我想象的那样起效果,最后我只能无奈的配置了 "off"
。虽然我也不想这样,但是为了不在配置上浪费时间,所以就先这样吧。
一直没说为什么选用 TypeScript 来学习,而不是直接用 JavaScript ,那么现在我来说下原因。首先,使用 TypeScript 并不是用来进行类型检查,因为本身 React 已经发布的代码,我学习的过程没必要再如此多此一举,只是为了借此机会,看看能不能多学一写 TypeScript 相关的内容而已,这是理由其一。而最重要的原因是借助 TypeScript 来更好的从代码的角度理解 React 的数据结构,比如大名鼎鼎的 React Fiber ,我认为这样加深记忆的过程会更好,更有助于我学习,这也是 TypeScript 的特点之一。
Ant Design 使用过程中的小笔记
还是蛮幸运的,有机会参与到公司财务系统相关模块的开发中(所以才那么忙),那么这里会记录一个在使用自定义滚动条样式后, Ant Design Table 组件在 Column 使用 "fixed"
情况下,在部分高分辨显示屏下出现的样式问题。在查找不是自己开发过程中打补丁导致的问题后,我似乎很无耻的想把锅甩给 UI 库,来完结这个问题。但是在我查看源码的过程中我发现其实不然,我们可以看到 Table 组件基于 rc-table
跟踪过来可以发现:
// Add negative margin bottom for scroll bar overflow bug
const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
if (scrollbarWidth > 0 && fixed) {
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
bodyStyle.paddingBottom = '0px';
}
这里并没有写死内容,那么我们来看到 measureScrollbar
方法:
export function measureScrollbar({
direction = 'vertical',
prefixCls,
}: {
direction: 'horizontal' | 'vertical';
prefixCls?: string;
}) {
if (typeof document === 'undefined' || typeof window === 'undefined') {
return 0;
}
const isVertical = direction === 'vertical';
if (isVertical && scrollbarVerticalSize) {
return scrollbarVerticalSize;
}
if (!isVertical && scrollbarHorizontalSize) {
return scrollbarHorizontalSize;
}
const scrollDiv = document.createElement('div');
Object.keys(scrollbarMeasure).forEach(scrollProp => {
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
});
// apply hide scrollbar className ahead
scrollDiv.className = `${prefixCls}-hide-scrollbar scroll-div-append-to-body`;
// Append related overflow style
if (isVertical) {
scrollDiv.style.overflowY = 'scroll';
} else {
scrollDiv.style.overflowX = 'scroll';
}
document.body.appendChild(scrollDiv);
let size = 0;
if (isVertical) {
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
scrollbarVerticalSize = size;
} else {
size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
scrollbarHorizontalSize = size;
}
document.body.removeChild(scrollDiv);
return size;
}
(拿源码来水水)从代码中,你可以看出获取滚动条样式信息是通过 <div />
标签来决定的,所以最后我将自定义滚动条样式同时追加在 <div />
标签上得以解决此问题。
日本語(にほんごく)学習(がくしゅ)計画(けいかく)
运用身边可以学习日语的机会 :)
在上个月萌生这个想法后,开始有特意的去接触日语和留意身边的日语,到这个月开始利用通勤时间来学习日语,当然啦,我也发现一开始我的学习方法过于浅显,所以我开始选择看《标准日本语》来系统的学习日语,时限我也暂时先不做计划,但是报考 N 系列考试是必然的,这是证明我学有所成的依据,至于是考 N5 、 N4 还是 N3 这个后续再做决定。
- 本文链接: https://zongzi531.com/2019/11/01/%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%81%E6%97%A5%E6%9C%AC%E8%AA%9E/
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!