4TinyShare“网站无障碍”介绍；web前端之Kotlin；在React 16.6中使用组件的懒加载

TinyShare是一个英文前端技术文章分享博客网站：

1.推荐的文章，都是我（目前是我一个人）自己仔细阅读过，从中挑选出的优秀的前端相关的文章，绝不为了应付而胡乱推荐；2.网站会尽量简洁，更多地专注于内容。推荐的文章中，很多都是英文文章，我没有精力每天都去翻译这些文章（我每天也有很多工作要做），所以建议大家直接阅读英文文章，也是一种锻炼。3.每次推送五篇文章，不多也不少，坚持每天推送。4.点击文末左下角“查看原文”，查看分享的文章原文。5.更多分享，欢迎访问：https://tinyshare.cn

· · ·

“网站无障碍”介绍

你对“网站无障碍”了解多少？是不是觉得只有残疾人士才需要网站无障碍的功能支持？

文中阐述，网络无障碍是影响所有用户的，很多通用特殊场景下都会需要网络无障碍：

1. 老年人；

2. 医疗慢性病，比如关节炎；

3. 户外严重眩光；

4. 药物性认识损伤或睡眠不足；

5. 网站适配多个设备；

6. WiFi信号差影响资源加载；

网站无障碍的四个关键点：

1. 可感知。可感知意味着不管什么特殊场景下，都不影响用户阅读，观看或者聆听网站的内容这个特性，涵盖网页上的排版、图片、音频和视频。

2. 可运行。可运行意味着，不管什么特殊场景下，都不影响用户查看所有的页面，也不影响填充表单。这个特性，一般包含接口和导航、键盘导航以及渐进式增强等。

3. 易懂性。易懂表示不管在什么特殊场景下，都不影响用户理解网站预期的目的。这个特性需要网站简单且明确、避免假设。

4. 健壮性。健壮性表示不管在任何特殊场景下，用户都可以在大量的设备上运行。语义化加成包含语义化标签、使用aria标签、有逻辑的DOM元素排序、服务器端渲染以及自适应设计。

文中还介绍了如何测试网站无障碍，希望这篇文章对你有所启发，让你对网络无障碍有更好的理解。

· · ·

在React 16.6中使用组件的懒加载

在React 16.6之前的版本中，要想实现React项目的代码分割和组件的懒加载，需要借助于ES6、Babel和Webpack或Browserify等工具来做代码分割，或者使用Webpack、react-loadable插件来实现组件的懒加载。

现在，从React 16.6版本开始，不需要借助外部工具，就可以实现组件的懒加载，这里要介绍16.6版本中新引入的两个特性：React.lazy()和React.Suspense。

React.lazy() 使得创建一个动态import且懒加载的组件非常容易，使得组件真正需要渲染的时候才会被引入。它将一个函数当做参数，这个函数必须返回一个通过import加载组件的Promise对象。下图是示例。

React.Suspense 是一个高阶组件，它用来包裹着由React.lazy() 创建的组件，且可以将多个不同层次级别的React.lazy()组件包裹在一个Suspense组件内。而且，Suspense组件还有一个fallback属性接受一个React元素，用来作为懒加载组件被加载过程中的占位符（比如：loading提示）。示例见下图。

作者在文中，通过一个简单的示例，很清楚地讲解了如何使用React.lazy()和React.Suspense来创建基于React-Router的多路由懒加载组件。代码如下图。

希望这篇文章能够给你启发，让你更好地理解React.lazy() 和React.Suspense，要使用这些新特性，就赶紧将你的React版本更新到16.6吧。

· · ·

为什么说React的新Hooks API是游戏改变者

React Hooks是一个很受争议的API，自从alpha版发布以来，有支持者，也有反对者，支持的人觉得它很好，很大程度上改变了React的开发模式，反对的人对这个API很抵制，表现出很多负面的情绪。

作者从React最初ES5语法里的mixins，到ES6的class语法里完全抛弃mixins，以及高阶组件来解决跨组件传递数据的方案。列出了一些高阶组件的问题：

1. 配置很复杂；

2. 不容易区分数据是来自于高阶组件，还是被传递过来的数据；

3. 高阶组件包围着组件，且组件是依赖于高阶组件的。如果组件依赖于高阶组件的数据，要移除高阶组件，这个组件就不能正常运行；

React Hooks是为了解决高阶组件和render props过期的问题，它可以让你使用state来驱动公用的行为，而且：

1. 提供一种方法来state管理的驱动，可以轻易地跟随state所定义的地方；

2. 无感知props。向JSX组件内传递的就是你用props中取到的；

3. 让JSX简单化，将关注点更多地放在组件的渲染上，减少行为上的关注；

当然，这个心API也有缺点，就是在组件被渲染之后，hooks函数必须在函数式组件级别上运行，所以如果你的函数式组件内有块级作用域或循环是不能调用hooks函数的。

希望这篇文章能给你启发，让你更好地理解React Hooks。

· · ·

维护CSS代码的关键：排序（order)

CSS作为软件开发中的二等公民，它被设计用来显示内容并设定样式排版。然而开发者们经常会为了一堆杂乱的CSS代码头疼，维护这种CSS代码的时候，有时候不知道如何下手，生怕改一个属性就会引起不知道的bug。

文中讲述了一种写出可维护的CSS代码的方法，就是为CSS属性进行排序。作者排序的规则是对CSS属性进行分类，按照分类进行编写CSS代码，可以使得代码更加整洁易懂。示例如下图：

作者将CSS属性分为以下几类：

1. 布局（Layout）。元素在空间中的位置，比如：position，top，z-index等；

2. 盒子（Box）。元素自身，比如：display，overflow，box-sizing等；

3. 视觉（Visual）。元素的设计，比如：color，border，background等；

4. 类型（Type）。元素的排字，比如：font-family，text-transform等。

希望这篇文章能够给你启发，让你对编写可维护的CSS代码理解更加地深入。

· · ·

web前端之Kotlin

从web诞生以来，做web前端开发必不可少要使用JavaScript作为主要的脚本语言，而JavaScript的弱语言特性又为语言的精进学习带来障碍。

近几年来，各种JS类库层出不穷，且不断迭代完善，变得越来越复杂。对于一些想要做前端开发的后端开发者来说，难度越来越大，需要学习的知识系统越来越多。

在去年的web标准发布的webassembly，给其他语言的开发者带来了机会。目前已经有多个语言开始支持webassembly，比如kotlin，c++，golang等。

作者从kotlin语言出发，讲述kotlin的开发者如何从生态的角度出发，打造一个适合使用kotlin作为主要开发语言的开发者（kotlin后端开发者）的技术生态，让他们可以很好地做webassembly的前端开发。

希望这篇文章能够给你启发，如果你是一个kotlin开发者，希望能为你开拓前端开发之路。

- The End -