JavaScript
文章平均质量分 79
mjzhang1993
风起于青萍之末
展开
-
使用 Jest + Testing Library 完成 React 的单元测试
说明不同于普通JS测试,组件的测试会更关注 DOM 渲染,以及组件功能正确性,而不是组件内部某些方法调用等的测试Testing Library 包含 DOM 及 UI 组件测试的一系列工具, 支持 React Vue Angular 等多个框架组件测试目标编写可维护的测试,并通过测试可以确保组件在正确工作同时希望测试避免包含实现细节,以便组件重构时,不会破坏测试用例或者减慢开发速度针对 React 组件来说,应避免测试 state、声明周期、组件方法等Testing Librar原创 2021-07-23 11:35:21 · 2338 阅读 · 0 评论 -
入手前端单元测试(二) -- 匹配器、Mock、配置文件
1. expect 的用法及 ”匹配器“expect 用来检查某个值是否符合预期,匹配器则是匹配的方法。expect.not 用来检查某个值是否不匹配结果expect.resolves 用来结构 promise ,从而判断其返回值(注意:这种 expect 需要在 test 中 return expect; 或者使用 async await )expect.rejects 同上用来判断 promise reject 后的结果expect.assertions(number) 用来验证在测试期间原创 2021-07-20 16:01:38 · 463 阅读 · 0 评论 -
入手前端单元测试(一) -- Jest 基本使用
说明什么是单元测试?单元测试是用来对一个模块、一个函数或者一个类进行正确性检验的测试工作单元测试的意义在于,如果某一天我们对代码做了改动,只要再跑一遍测试,如果通过,说明我们的改动对这个模块的行为不会造成影响;如果不通过,则说明修改后与原行为不一致,要么修改代码、要么修改测试。TDD 测试驱动开发先思考需求,然后编写测试用例,再写功能实现,通过测试用例来规范约束开发者编写出质量更高、bug 更少的代码,这种模式也可称为 ”测试驱动开发“ TDDTDD 三层含义Test-Dri原创 2021-07-20 15:59:24 · 555 阅读 · 0 评论 -
for 循环作用域问题
For 循环作用域问题for 循环简介 for 是一种前测试循环语句,但它具有在执行循环之前初始化变量和定义循环后要执行代码的能力,for 语句对常用的循环模式做了一些简化,大部分的循环都具有特定的计数器变量,循环开始之前要初始化这个变量,然后每次循环都要检测一下他的值,最后计数器变量做自增操作,在这一类循环中,计数器的三个关键操作是初始化、检测和更新。for 语句就将这三步操作明确声明为循环语原创 2017-11-17 15:16:31 · 5060 阅读 · 0 评论 -
JavaScript 对象的属性描述符
JavaScript 对象的属性描述符 对象是 JavaScript 语言的核心概念,也是最重要的数据类型,简单来说对象就是一组键值对的集合,是一种无序的复合数据集合1. 对象的简单构成1. 键名 对象的所有键名都是字符串,ES6 的 Symbol 值也可以作为键名,加不加引号都可以 如果键名是数值则会自动转为字符串 对象的每一个键名又称为属性,键...原创 2018-02-10 17:43:20 · 402 阅读 · 0 评论 -
JavaScript 中对象属性与方法汇总
Javascript 中对象属性与方法汇总1. Object 构造函数的方法 需要通过构造函数调用,如 Object.keys()1. Object.assign() 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,并返回目标对象const obj = { name: 'obj name'};const copy = Object.assign(obj, {原创 2018-02-11 16:13:57 · 335 阅读 · 0 评论 -
Javascript 中 Function的属性与方法
Javascript 中 Function 的属性与方法1. Function 构造函数的属性与方法1. Function.arguments (不建议使用) 代表传入函数的实参,是一个类数组对象,这个属性已经废弃,当前普遍使用的是:在 函数中直接使用 arguments 对象,如果使用 es6 建议使用 ... 操作符获取传入实参function a(arg1, arg2) { co原创 2018-02-11 17:24:42 · 3925 阅读 · 0 评论 -
javascript语句和表达式
JavaScript 语句和表达式1. 表达式和语句的区分表达式 是 JavaScript 中的一个短语,JavaScript 解释器会将其计算出一个结果;语句就是 JavaScript 整句或者命令,表达式计算出一个值,但语句用来执行以使某件事件发生。一个表达式会产生一个值,在任何需要为值的地方都可以放置;语句代表着行为,一条语句中可以包含多个表达式,一个程序是由一系列可执行语句原创 2017-11-17 12:18:09 · 850 阅读 · 0 评论 -
window.history API 实现禁止浏览器回退到上一页
window.history API 实现禁止浏览器回退到上一页1. 完整代码 <div class="about-container"> this is about page <p id="back-count"></p> <button id="back">back</button> <button id="forward">forward</b原创 2018-02-23 14:30:34 · 3132 阅读 · 0 评论 -
ES6+ Proxy与Reflect使用
ES6+ Proxy与 Reflect 使用说明 Proxy 译为 “代理器”,用于修改某些操作的默认行为,可以认为是在目标对象|函数之前架设一层“拦截”,外接的访问,都必须通过这层拦截,这层拦截中可以对外接的访问进行过滤和改写1. 基本语法target 指被代理的目标对象或函数handler 定制的用来拦截外界操作行为的对象traps 对应外界操作的拦截方法...原创 2018-04-03 16:43:13 · 362 阅读 · 0 评论 -
Promise-使用整理
Promise 使用整理说明 Promise 就是一个对象,用来传递异步操作的信息,他代表某个未来才会知道结果的操作。有了 Promise 就可以将异步操作以同步操作的流程表达出来,避免层层嵌套回调函数 参考 ECMAScript 6 入门特点 对象的状态不受外界影响,Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成)、R原创 2017-07-19 17:47:57 · 1001 阅读 · 0 评论 -
javascript 常用数组方法总结
javascript 常用数组方法总结 这里有更详细的MDN文档数组创建于判断1. 创建数组 (new Array() / Array.of()) // 字面量方法 const arr = [1, 2, 3]; // 构造函数方法 // 无参数 返回空数组 const arr = new Array(); // [] ...原创 2017-07-04 14:57:33 · 479 阅读 · 0 评论 -
web本地存储(localStorage、sessionStorage)
web 本地存储 (localStorage、sessionStorage)说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 loc原创 2017-04-26 18:38:23 · 72883 阅读 · 8 评论 -
ajax整理
AJAX 梳理与封装简介 AJAX 是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,使网页实现异步更新。可以在不重新加载整个网页的情况下,对网页的某部分进行更新。1. 创建 XMLHttpRequest 对象 Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成,现代浏览器都支持 XMLHttpR原创 2017-06-01 15:56:07 · 322 阅读 · 0 评论 -
fetch使用整理
fetch 使用1. 浏览器支持情况 fetch是相对较新的技术,当然就会存在浏览器兼容性的问题,当前各个浏览器低版本的情况下都是不被支持的,因此为了在所有主流浏览器中使用fetch 需要考虑 fetch 的 polyfill 了 require('es6-promise').polyfill(); require('isomorphic-fetch'); 引入这两个文件,就原创 2017-06-01 17:07:32 · 16754 阅读 · 2 评论 -
javascript 常用字符串方法总结
javascript 常用字符串方法总结 MDN 文档1. 返回字符串中指定的字符 (.charAt())原字符串不改变参数:index 需要查询的索引返回值:查找到的字符 const a = 'abcdef1234567'; const ret = a.charAt(3); console.log(a); // abcdef1234567...原创 2017-07-04 16:53:26 · 409 阅读 · 0 评论 -
javascript this 使用及面向对象编程
JavaScript this 使用及面向对象编程简介 JavaScript 并没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承 ECMAScript 6 带来了新的 Class 语法,这让JavaScript 看起来像是一门基于类的语言,但其背后仍是通过原型机制来创建对象 this javascript 的 this ...原创 2017-07-14 09:54:22 · 454 阅读 · 0 评论 -
javascript 原型与原型链详细解析
JavaScript 原型与原型链详细解析说明 JavaScript 是基于原型实现的面向对象,这篇文章整理了一下对象创建、原型、原型链、继承等的理解 文章内容创建对象基础方法原型与原型链详解构造函数创建对象及实现继承的方法详解创建对象基础方法1. 对象字面量 创建对象最简单的方法 var obj = { ...原创 2017-07-14 09:54:36 · 344 阅读 · 0 评论 -
ECMAScript 6 常用特性整理
ECMAScript 6 常用特性整理说明 看了 阮一峰 老师的 ECMAScript 6 入门,决定将之前一直使用到的 ES6 重新整理一遍。1. let 和 const用法类似 var 用来声明变量,但是声明的变量只在命令所在的代码块中有效不存在变量提升暂时性死区, 在变量用 let 声明前的代码中 只要使用到变量,就会报错不允许重复声明变量const 声明的是一个只读的常量,声原创 2017-07-19 10:23:44 · 642 阅读 · 0 评论 -
Decorator装饰器
Decorator 修饰器说明 由 ES2017 引入了这个功能,他是一个函数用来修改类的行为,解决了不同类之间共享方法的问题 修饰器对类的行为的改变是在代码编译时发生的,而不是在运行时,本质就是编译时执行的函数 由于存在变量提升,使得修饰器不能用于函数(包括构造函数),类不会提升所以不会有这个问题基本使用 @decorator class Test {原创 2017-07-19 14:29:59 · 396 阅读 · 0 评论 -
Iterator、Generator、async、await 异步编程
Iterator、Generator、async、await 参考ECMAScript 6 入门Iterator 遍历器说明 Iterator(遍历器、迭代器)是一种接口,他为不同的数据结构提供了统一的访问机制(即 for-of循环),任何数据结构只要部署 Iterator=接口,就可以完成遍历操作(即一次处理该数据结构的所有成员) 主要作用为各种数据结构提供统一、简便的访问借口原创 2017-07-21 14:08:16 · 657 阅读 · 0 评论 -
WebSocket 以及 socket.io 使用
WebSocket 以及 socket.io 使用说明 WebSocket 是一个持久化的协议, 是基于HTTP协议的, 它支持长连接,而不是像 ajax 一样通过轮询,每隔一段时间,向服务器发送请求,询问是否有新的信息,服务器端不能主动联系客户端,只能由客户端发起。对于 WebSocket 它只需要一次对服务器的请求,然后服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息,而且跨域通原创 2017-04-28 16:30:01 · 901 阅读 · 0 评论