SkioFox Blog

Thinking will not overcome fear but action will.

自定义babel插件

实现一个自定义babel插件

简介 Babel 是一款 javascript 的编译器,其主要工作是把 ECMAScript 2015+ 标准以上的代码向下兼容到当前的浏览器或环境。这直接带来的好处是可以采用更高版本的标准语法去编写代码,而无需考虑过多的环境兼容因素。 Babel 提供了插件系统,任何人都可以基于 babel 编写插件来实现自定义语法转换,这对于开发者来说是个福音。 而这一切的基础需要了解的一个概念...

React状态管理工具对比

React状态管理工具对比

dva 简介:dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架 易学易用,仅有 6 个 api,对 redux 用户尤其友好,配合 umi 使用后更是降低为 0 API elm 概念,通过 reducers, effects 和 ...

权限访问设计 RBAC & ABAC

权限访问设计 RBAC & ABAC

RBAC Role-Based Access Control,基于角色的访问控制,这是一种设计思想。 权限设计针对的主体是用户 (User)和权限 (Permission)。最简单的设计只要关联 User 和 Permission 就好了,但显然不方便维护管理。 这里引入角色 (Role)的概念,Role 的作用更像是分组 (Group) 的作用。每种 Role 有自己的权限范围,是一...

谈谈设计模式

谈谈设计模式

设计模式的分类 创建型模式 ( creational pattern ) 结构型模式 ( Structural pattern ) 行为模式 ( Behavioral pattern ) 并发模式 ( Concurrency pattern ) 1.创建型模式 在必须决定实例化某个类时,使用这些模式。 Singleton 模式特征 全局实例只有一个 允...

设计模式的七大原则

设计模式的七大原则

前序 设计模式是基于面向对象编程( OOP )来说的,设计模式原则是对于把代码设计成一定模式所遵循的公共意识规范。 代码设计本质上是逻辑划分问题。设计出合理的逻辑结构,让代码在可维护性、可扩展性、可复用性得到更好的提升,最终反应在综合成本的降低。 可维护性:在项目交接时,这点体现特别明显。可维护性上体现下面几点: 可读性(是否有合理的注释、代码风格等编程规范); 代码设计的...

前端测试框架:Jest (二) - 快照测试

前端测试框架:Jest (二) - 快照测试

前端测试框架:Jest (二) - 快照测试 介绍 通常做UI组件测试要做两件事: 交互:确保组件在与用户进行交互时正确运行 (例如,当用户按下按钮时) 渲染:确保组件渲染输出正确 (例如,按钮在UI中的外观和位置) 快照测试 在对UI组件进行渲染测试时,快照测试会非常有用。第1次测试时,生成一张快照,在做第2次测试时,如果和第1次生成的快照不匹配,测试失败。 或者把参...

前端测试框架:Jest (一) - 介绍

前端测试框架:Jest (一) - 介绍

简介 作为目前流行的前端测试框架之一,Jest 框架提供比较完善的断言库,强大的 mock 功能,包含测试覆盖率工具,开箱即用。 匹配器 (Matchers) 在验证测试结果和预期值的时,用匹配器验证更加方便,支持的匹配值类型有:Boolean、Number、String、Array、Iterables等常见类型,提供很多匹配方法,还有更多高级其它的匹配用法。 常见类型的匹配 ...

前端性能指标及常见优化技术

前端性能指标及常见优化技术

简介 这里的指标面向的前端是广义的,并非专指 Web 领域,例如:浏览器、android 应用、IOS 应用、以及 React Native 混合技术的应用。 下面的指标阐述将以 Google 的lighthouse web 开发工具为基础进行阐述,我们可以把它作为端侧指标衡量的依据。 指标 FCP 全称:First Contentful Paint,第一次内容绘制时长。 分数表...

分支管理模型:GitFlow

分支管理模型:GitFlow

时序图 分支组成 主分支(master branch) 开发分支(develop branch) 若干个特性分支(feature branches) 若干个发布分支(release branches) 热修复分支(hotfix branches) 分支解读 远端 (origin) 分支只有:master和 develop 分支。其他分支本地管理,不 pus...

React项目打包优化

React项目打包优化

概述 新公司所有的项目基本上都是使用 react 进行开发,之前的工程师是自己使用 webpack 搭建的项目,因为涉及到的东西不多,而且存在一些问题,已经启用。同时因为项目时间原因没有太多时间自己搭建,所以选择了使用 create-react-app 进行项目的开发。其实开发还是很简单的,主要就是优化的问题,这篇文章主要就是讲关于页面优化的问题,同时也是为了记录一下,避免下次使用的...