MonkeyBlog

生命的意義在於編程


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

  • 站点地图

脚手架实践: 集成模板搭建及线上部署

发表于 2022-05-29 00:10:08 | 分类于 前端

起步

bin目录下创建zh-cli.js

1
2
#!/usr/bin/env node //让系统动态的去查找node来执行你的脚本文件
console.log('hello zh-cli')

执行node bin/zh-cli.js,即可输出

image-20220527214905927

配置下package.json的bin:

阅读全文 »

React之Ref

发表于 2021-08-17 20:52:04

什么是refs

Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在组件mount之后再去获取ref。componentWillMount和第一次render时都获取不到,在componentDidMount才能获取到

阅读全文 »

HTTP缓存机制及原理

发表于 2021-01-05 17:59:28

前言

Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能。
但是对于很多前端同学来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的,却并不是很清楚。
在此,我会尝试用简单明了的文字,像大家系统的介绍HTTP缓存机制,期望对各位正确的理解前端缓存有所帮助。

阅读全文 »

应用缓存ServiceWork实践

发表于 2020-11-14 20:12:10

五个Why?

  • 什么是Service Work?
  • Service Work能帮助我们前端提供什么基础能力?
  • Service Work的原理是什么?
  • JS中如何使用它?
  • 在我们现有的React项目中怎么去使用它?
阅读全文 »

TypeScript

发表于 2020-10-04 19:46:14
  • 编程语言的类型

    • 动态类型语言
    • 静态类型语言
  • typescript

阅读全文 »

React基于jest+enzyme测试工具的测试技巧

发表于 2020-06-18 15:03:56

技术选型

  • jest: 支持断言、Mock、Snapchat、Async测试、测试覆盖率等
  • enzyme:模拟了jQuery的APi,比较直观,学习使用都比较简单

测试的原则

  • 测试代码时,只考虑测试,不考虑内部实现
  • 数据尽量模拟现实,越靠近现实越好
  • ==对重点、复杂、核心代码,重点测试==
  • 利用AOP(beforeEach、afterEach),减少测试代码数量,避免无用功能
    测试、功能开发相结合,有利于设计和代码重构
  • 测试过程中出现 Bug 的情况

店东贷采用的是BDD的测试手法,通过代码对原有业务需求的理解,对代码质量以及业务逻辑进行的测试代码的开发,在测试的过程中,将店东贷的主要业务逻辑进行了提取,从而进行的单元测试用例编写。

阅读全文 »

基于React项目下的组件单元测试

发表于 2020-04-24 15:11:49 | 分类于 前端 , React

什么是单元测试?

一般测试分成几个类型:单元测试、集成测试、功能测试。集成测试和功能测试不赘述。单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作,这里的单元是程序工作的最小工作单位。单元测试应该仅仅依赖输入,不依赖多余的环境,如果你的单元测试依赖很多环境,那么你可能需要的是集成测试。

单元测试又可以根据开发模式分成以下两类:
TDD, TDD指的是Test Drive Development,很明显的意思是测试驱动开发,也就是说我们可以从测试的角度来检验整个项目。大概的流程是先针对每个功能点抽象出接口代码,然后编写单元测试代码,接下来实现接口,运行单元测试代码,循环此过程,直到整个单元测试都通过。
BDD指的是Behavior Drive Development,也就是行为驱动开发。行为驱动开发是一种敏捷软件开发的技术,它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作。主要是从用户的需求出发,强调系统行为。BDD最初是由Dan North在2003年命名,它包括验收测试和客户测试驱动等的极限编程的实践,作为对测试驱动开发的回应。
目前我接触到的项目都是BDD,国内的前端项目对单元测试重视程度没有那么高,TDD这种先编写单元测试的模式应用并不多。

但是但是,我真的想说,高覆盖率的单元测试,可以保证每次上线bug率大大降低,也是代码重构的基础。很多老项目,开发人员离职、新接手的人员不敢重构,慢慢称为团队负担、又不能下线,就是因为没有单元测试,改一点都怕出现不可测的bug。

阅读全文 »

React Hook借助useReducer, useContext代替Redux方案

发表于 2019-11-20 14:57:45

当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式使用高阶组件进行连接,这样造成的一个问题是,大量的高阶组件代码冗余度特别高,既然hooks带来了新特性,不如一起来用用看

目录结构图

目录示例

阅读全文 »

聊一聊模块化(二)原理篇

发表于 2019-09-25 18:14:08 | 分类于 JavaScript

上一篇介绍了模块化的历史进程以及各个模块化规范的优缺点。而这一篇,主要从模块化规范的实现原理出发,让大家能够更加了解其底层实现,从而应用起来更加得心应手。了解其原理还是有一定必要的,除了能更好的掌握外,更重要的是锻炼自己的思维能力。下面就简单介绍一下模块化规范的原理。

聊一聊模块化(一)简介篇

CommonJS

对于 CommonJS 规范,最重要的就是 require 方法,我们需要带着几个问题去了解 require 的原理实现:

  • 当我们引入一个模块的时候,我们究竟做了怎样一件事情?
  • exports 和 module.exports 有什么联系和区别?
阅读全文 »

聊一聊模块化(一)简介篇

发表于 2019-08-25 17:13:41 | 分类于 JavaScript

前端从刀耕火种时代脱离出来,离不开其生态环境的完善,各种插件和库的层出不穷,让我们减少了自己造轮子的繁杂过程,从而大大提高了开发者的工作效率。造轮子也就是模块化的过程。

但是随着模块化的发展,一个项目也就会由很多的模块组成,而这些模块有一部分是自己的,也有一部分是别人开发的,模块的管理就成为了很大的一个问题。正是因为有这样的需求,才引起了模块化管理规范的发展。

聊一聊模块化(一)简介篇

模块化经历了下面几个阶段,也表明了模块化的作用和发展方向:

  • 代码的封装和复用
  • 减少全局的污染、冲突
  • 部分属性和方法的私有化
  • 模块的管理规范化
阅读全文 »
12…4
MonkeyBlog

MonkeyBlog

40 日志
18 分类
28 标签
© 2022 monkey