SkioFox Blog

自定义babel插件

实现一个自定义babel插件

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

Posted by SkioFox on April 26, 2021

React状态管理工具对比

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

Posted by SkioFox on March 11, 2021

权限访问设计 RBAC & ABAC

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

Posted by SkioFox on February 14, 2021

谈谈设计模式

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

Posted by SkioFox on December 17, 2020

设计模式的七大原则

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

Posted by SkioFox on December 2, 2020

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

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

Posted by SkioFox on November 10, 2020

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

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

Posted by SkioFox on September 19, 2020

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

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

Posted by SkioFox on August 11, 2020

分支管理模型：GitFlow

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

Posted by SkioFox on June 18, 2020

React项目打包优化

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

Posted by SkioFox on May 5, 2020

SkioFox Blog

自定义babel插件

实现一个自定义babel插件

React状态管理工具对比

React状态管理工具对比

权限访问设计 RBAC & ABAC

权限访问设计 RBAC & ABAC

谈谈设计模式

谈谈设计模式

设计模式的七大原则

设计模式的七大原则

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

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

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

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

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

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

分支管理模型：GitFlow

分支管理模型：GitFlow

React项目打包优化

React项目打包优化

FEATURED TAGS

ABOUT ME

FRIENDS