Decorative image frame

航洋

写代码的生活家

航洋

使用 React Hooks 代替 Redux

注:
此文章立场不表示 Hooks 可以完全代替 Redux。
因为 Redux 还有其他适用的场景和功能,只是在大部分场景可以用 Hooks 代替。
理性选择即合理。

React Hooks 面世也有很大一段时间了。
我相信很多人对于 Hooks 的认知还大概处在:

  1. 更 FP「Functional Programming」 编程方式
  2. 更简洁易测的组件
  3. 不用记住繁琐的生命周期函数
  4. Read More...

基础工具

工欲善其事,必先利其器。
大部分情况下,好的工具是起着辅助的作用。即使缺少了好工具也只是降低了开发效率,比如选择记事本也可以写出优秀的代码。
但是,我们都是「懒」且聪明的开发者,我们善于使用优秀的工具,让工具解放劳动力,加大生产力,提高开发效率。
这里介绍几个前端基本的且广为使用的相关工具:
Git 代码管理、Chrome dev tools、编辑器与 IDE、PS 与 Sketch 切图、Charles 网路代理。

Read More...

service worker

简介 & 背景

众所周知「浏览器的的每个每个网页在单进程中执行,而网页中的 JS 的普通运算在单线程中执行」
那么 JS 高负荷运算的时候,单线程就吃不消

那么 救世主 来了

Web Worker 独立与当前网页的 JS 单线程,自己独占一个线程
Web Worker 可以理解为,网络的苦力工,可以处理繁重的「任务、运算」
Web Worker 线程和 JS 线程,二者之间可使用 postMessage 双向通信

Read More...

stylelint 搭配 stylelint-order,更随心所欲的编码 CSS

为什么需要校验 CSS 规则

对于编程语言进行「语法、书写」校验,能有效「归并」不同开发者的「不同风格」,还能检验出一些语法错误。
比如 eslint 就能校验 JS 代码的「鸡肋糟粕」。
对于 CSS 而言,不能算是严格意义的「编程语言」,但是在前端体系中却不能小觑。
CSS 是以描述为主的「样式表」,如果「描述」得「混乱、没有规则」,对于其他开发者一定是一个「定时炸弹 💣『特别是有强迫症的人群 😊』」
CSS 看似简单,想要写出漂亮的 CSS 还是相当困难。CSS 为什么这么难学? - CSS 不是科学,而是艺术
所以校验 CSS 规则的行动迫在眉睫,立即执行。

Read More...

SVG 扬帆起航

本文不能让你成为 SVG 大神,但是能让你知道、了解他「揭开神秘面纱」

基础认知

SVG「Scalable Vector Graphics」表示「可缩放矢量图形『放大不模糊』」面向未来「W3C 标准」。
基本的 SVG 文档由 <svg> 根元素和 基本形状元素 构成
作为 XML 的一种方言,SVG 必须正确的绑定命名空间(在 xmlns 属性中绑定)。命名空间速成 获取更多信息
SVG 文件全局有效的规则是 「后来居上」,越后面的元素越可见。

Read More...

简谈 Promise

参考链接:JavaScript Promise:简介

Promise 是一个解决异步操作的对象。
常见的的异步实现方案,就是「回调」。
回调是很好的异步解决方案,不过「嵌套多了」就惹得心烦,且代码难以阅读,不直观。
Promise 并非解决具体问题的算法,而已代码组织更好的模式。
我们也可以实现类似 Promise 的结构,比如 jQuery 的 ajax 「$.ajax」。

Read More...