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 -

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181031G20NRS00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券