- 博客(73)
- 收藏
- 关注
RSS订阅原创 React组件测试
前言：有了前面Jest和Enzyme基础知识的储备，接下来，我们看如何在项目中测试组件。一.测什么？当我们看到一个组件时，首要考虑测试什么？然后才是如何测试。作为一个通用的测试原则，我是基于这几个方面进行考虑。下面所有测试代码，都是针对TodoList这个示例demo，界面如下：功能说明：在Add Todo这个input框中输入内容，点击回车时，内容添加到正在进行这个列表中，同时还要进行...
2019-10-05 00:48:20
478
原创 Enzyme学习笔记
一.是什么？Enzyme是Airbnb开源的React测试工具库，它通过对官方提供的测试工具ReactTestUtils进行二次封装，提供了一套简洁强大的API，类似jQuery的风格，并且内置Cheerio。二.环境搭建上篇关于Jest的文章中，我并没有讲环境搭建，因为在我看来，进行类React项目的测试，这两者搭配起来，才是最完美的。所以放在这里讲开发环境的搭建。安装Jest、Enzy...
2019-10-04 16:00:26
569
原创 Jest学习笔记
一.是什么？Jest是Facebook开源的一个前端测试框架，自动集成了断言、JSdom、覆盖率报告等，内部也是使用了jasmine作为基础，在其上进行了封装。主要用于React和React Native的单元测试，已被集成在create-react-app中。二.特点速度快：支持并行执行，Jest 为每一个单元测试文件创造一个独立的运行环境。Jest 可以启动多个进程同时运行不同的文件，...
2019-10-04 00:53:13
475
原创 JavaScript中实现继承的八种方式
1.原型链继承核心思想：子类的原型等于父类的一个实例。function Parent() { this.name = 'afeng';}Parent.prototype.getName = function() { console.log(this.name);}function Child() {}// 这里是最关键的一步Child.prototype = ...
2019-07-17 00:02:46
167
原创 React组件生命周期
一.定义生命周期函数指在某一时刻组件会自动调用执行的函数。二.总体展示三.详细说明1.挂载阶段(Mount)：也就是把组件第一次在DOM树中渲染的过程。会依次调用如下函数：constructor组件类的构造函数，主要用途，初始化state和绑定成员函数的this环境。render组件的渲染函数，它是一个纯函数，完全根据this.state和this.props来决定返回的结果。...
2019-07-14 15:25:13
114
原创 Redux学习笔记
一.Redux是什么？redux跟flux一样，也是一个数据管理框架，它是以flux框架的理念为基础，更优雅的实现数据流的管理。二.设计思想web应用是一个状态机，视图和状态是一一对应的。所有的状态，保存在一个对象里面。三.基本原则唯一数据源，也就是说整个应用只有一个store。保持状态只读，不能直接去修改store的状态，要想修改，必须通过派发action。数据改变只能通过...
2019-02-23 17:48:47
140
原创 Flux学习笔记
一.Flux是什么简单来说，flux就是一个数据管理框架，2013年，Facebook推出React框架的同时，也发布了flux。二.基本概念View: 视图部分，负责显示用户界面。Action: 视图层发出的消息（用户操作导致，比如鼠标点击页面）Dispatcher: 处理动作分发，维持Store之间的依赖关系。Store: 负责存储数据和处理数据相关逻辑。并且数据一旦发生变动，...
2019-02-22 17:40:47
564
原创 基于canvas制作绚丽的倒计时效果
基于canvas制作绚丽的倒计时效果一、先看下效果 二、canvas是一个可是使用脚本（通常是javascript）在其中绘制图形的HTML元素，同时canvas也是定义在浏览器上的画布，canvas不仅仅像p标签等是一个元素，更是一个编辑工具，是一套编程接口，它的出现已超过了web基于文本设计的初衷。canvas可以设计出绚丽多彩的动画，奇妙的游戏等，可以使我们的网页绚丽多彩！三...
2018-08-30 23:55:01
791
原创 javascript方法封装集合
一、兼容性实现getElementsByClassNamefunction getElesByClassName(className, parentId) { //先通过能力检测，看是否支持 if(!document.getElementsByClassName) { document.getElementsByClassName = function(cl...
2018-08-22 20:41:56
227
原创 Python高级特性——上下文管理器
上下文管理器（Context manager）：就是指支持上下文管理器协议的对象，也就是实现了__enter__()和__exit__()方法的对象。 上下文管理器协议（Context Management Protocol）：是指要实现对象的__enter__()和__exit__()方法。最近在写一个Python的项目时，用with挂接上下文管理器，从而实现对数据库的访问，这样做的好处是...
2018-06-21 22:06:48
218
原创 Python高级特性——切片、列表生成式、生成器
前面的话：切片是Python非常强大的操作，适合于经常指定索引范围的操作，此时用循环时十分繁琐，但用Python提供的切片（Slice）操作符能大大简化这种操作。我们先来看一个简单的示例，感受一下切片的强大。 假如我们要取一个list或者tuple中的部分元素，比如一个list如下： `L = ["AFeng", "Javascript", "Python", "CSS", "HTML"]...
2018-06-20 23:40:02
349
原创 slots魔法
在Python中，我们在定义类的时候可以定义属性和方法。当我们创建一个类的实例后，我们还可以给该实例绑定任意新的属性和方法。看下面这个简单的例子：class Point(object): def __init__(self, x=0, y=0): self.x = x self.y = ...
2018-06-19 09:27:45
190
原创 深入理解super
在前段时间使用类的继承时，为了在子类构造函数中调用父类的构造函数，我们使用到了super方法。使用套路如下： super不仅仅只用在构造函数中调用父类的构造函数，普通的方法中也可以使用。深入理解super()看了上面的使用，我们可能会觉得super的使用很简单，无非就是获取父类，并调用父类的方法。其实，在上面的情况中，super获取到的正好是父类，但在其他情况下就不一定了。s...
2018-06-18 21:57:32
324
原创 深入理解Python中的metaclass
前面的话：这两天终于硬着头皮把python中的元类看完了，理解的不是很深刻，就打算写篇笔记，在回顾一遍吧！~~一、什么是元类（metaclass）元类（metaclass）是用来创建类（对象）的可调用对象。这里的可调用对象可以是函数或者类等。但一般情况下，我们使用类作为元类。对于实例对象、类和元类，我们可以使用下面的图来描述。我们可以使用type来创建类（对象），事实上，typ...
2018-06-18 20:56:30
958
原创 Python中的魔法方法
前面的话：在Pyhton中，我们经常可以看到以双下滑线__包裹起来的方法，最常见的就是__init__，这些方法被称为魔法方法或者特殊方法。简单的说，这些方法可以给Python的类提供特殊功能。方便我们定制一个类。定义一个类时，我们用的最多就是__init__方法，而__new__方法和__call__方法使用的比较少。下面我们介绍最常用的几个魔法方法。一、 __init__...
2018-06-18 18:55:25
3528
原创 python中装饰器详解
装饰器我们知道，在python中，我们可以像使用变量一样使用函，这主要依赖于以下几点：函数可以被赋值给其他变量函数可以被删除可以在函数里面再定义函数，函数嵌套。函数可以作为参数传递给另外一个函数函数可以作为另一个函数的返回值对一个简单的函数进行装饰 为了更好的理解装饰器，我们先从一个简单的例子开始，假设有下面这个函数：def hello(): return...
2018-06-12 16:07:04
6335
7
原创 python中的闭包
一、概念是由这样的一个函数，以及它在定义时这样外部的一个环境变量构成的整体叫做闭包。 如何访问闭包和访问环境变量 这儿是存在疑问的，闭包内部的数据是以怎样的结构组织的，为什么访问环境变量时，要通过这种方式。f.__closure__[0].cell_contents 至此，我们可以看出，虽然返回的是一个函数对象，但实质上确是一个闭包，这是因为在返回的这个函数中，对外部的变量进行...
2018-06-12 00:27:11
206
原创 Python面向对象编程系列第一篇
一、类和对象类：是现实世界或思维世界中的实体在计算机中的反映，它将数据以及这些数据的操作封装在一起，类是抽象的。类只负责描述和定义对象的特征和行为，不会调用代码。类是创建实例的模板，而实例则是一个一个具体的对象。 对象：对象是程序运行时的实体，它的特征是存储在变量中的，行为是通过方法实现的，方法上操作对象的内部的状态，方法是对象对对象的通信的主要手段。 实例化：通过类生成对象的过程称之为实...
2018-06-11 20:17:34
615
原创 57次的表白，还是不及一句“我来晚了”
前面的话最近也不知怎么了，老是感觉莫名的烦躁，可能是天气越来越热了，就是不想学习。所以在上个周末的两天刷了一部剧。上大学这么久，很少看电视剧，这个剧高四复习时，曾在网吧看完了，现在又重新看一遍——《最好的我们》或许是随着时间的流逝，慢慢成长了吧，这次看这个剧和第一次的感受完全不一样了。第一次看这个剧时，老是怀着耿耿和余淮能在一起的期望看完全部的，但这一次，我更喜欢路星河这个人物，敢爱敢...
2018-05-29 14:51:40
514
原创 MySQL自定义函数
创建自定义函数create function function-name(参数列表) returns 返回值类型函数体内容自定义函数示例 1、无参函数定义mysql> CREATE FUNCTION f1() -> RETURNS VARCHAR(30) -> RETURN DATA_FORMAT(NOW(),'%Y年%m月%d日 %H...
2018-05-29 09:19:02
279
转载 深入理解javascript闭包系列第五篇——闭包的10中形式
前面的话根据闭包的定义，我们知道，无论通过何种手段，只要将内部函数传递到所在的词法作用域以外，它都会持有对原始作用域的引用，无论在何处执行这个函数都会使用闭包。接下来，我们将详细介绍闭包的10种形式。返回值最常用的一种形式是函数作为返回值返回。var F = function(){ var b = 'local'; var N = function(){ ...
2018-05-26 09:09:58
244
原创 Python连接数据库——DB-API的使用流程
一、Python中的BD-API1、出现背景在没有DB-API之前，接口程序混乱。具体的就是说，由于最底层用的数据库技术不同，所以在应用程序层就要针对特定的数据库进行特定的编码，如果要改变一个版本所使用的底层数据库，那么之前编写的应用程序中关于数据库的代码也要进行相应的改变。 2、详解python DB-API：python访问数据库的统一接口规范。 这里有一个约定...
2018-05-24 00:08:38
9686
2
转载 深入理解javascript的this机制系列第三篇——箭头函数
前面的话this机制与函数的调用有关，而作用域与函数的定义有关。那么有什么可以将this机制和作用域联系在一起呢？ ES6新增内容——箭头函数。一、痛点对于闭包的痛点在于，闭包的this默认绑定到window对象，但又常常需要访问嵌套函数的this，所以常常在嵌套函数中使用var that = this，然后在闭包中使用that代替this，使用作用域查找的方法来找到嵌套函...
2018-05-22 23:23:59
146
转载 深入理解javascript的this机制系列第二篇——this绑定优先级
前面的话上一篇介绍了this的绑定规则，那如果在函数的调用位置上同时存在两种以上的绑定规则该怎么办？先给出一个结论： new绑定 > 显示绑定 > 隐式绑定 > 默认绑定一、显示绑定 pk 隐式绑定（显示绑定胜出）function foo() { console.log( this.a );}var obj1 = { a: 2, ...
2018-05-15 20:19:24
212
转载 深入理解this机制系列第一篇——this的4种绑定规则
一、默认绑定全局环境中，this默认绑定到window。console.log(this === window); //true函数独立调用时，this默认绑定到window。function foo() { console.log(this === window)}foo(); //true被嵌套的函数独立调用时，this默认绑定到window。/...
2018-05-15 00:15:06
346
原创 利用github Pages搭建项目主页
以前，只知道在github上搭建个人主页，那就是先创建一个名为用户名.github.io的个人仓库，然后在进行开发。这导致我在很长的一段时间内，误以为创建项目主页的仓库名也为用户名.github.io的个人仓库，但是今天却以外的发现，项目主页的用户名是可以任意命名的。下面这是我的一个操作教程源码如下这里的核心是要在gh-pages分支上做开发另外这也教会了我们一种远...
2018-05-11 09:48:13
424
原创 Git文件上传的一个错误分析
需求： 通过git上传本地文件到github远程仓库源代码如下赵亚峰@DESKTOP-0JOAFKG MINGW64 ~/Desktop$ mkdir test赵亚峰@DESKTOP-0JOAFKG MINGW64 ~/Desktop$ cd test赵亚峰@DESKTOP-0JOAFKG MINGW64 ~/Desktop/test$ git initInitiali...
2018-05-11 08:22:56
274
1
转载 深入理解javascript闭包系利第四篇——常见的一个循环和闭包的错误详解
前面的话关于常见的一个循环和闭包的错误，我们从执行环境图示的方式对此进行详细的解释。犯错function foo(){ var arr = []; for(var i = 0; i < 2; i++){ arr[i] = function(){ return i; } } return a...
2018-05-08 00:29:59
160
转载 深入理解javascript闭包系利第三篇——IIFE
前面的话严格来讲，IIFE并不是闭包，因为它不满足函数成为闭包的三个条件，但一般地，人们认为IIFE就是闭包，毕竟闭包有多个定义，本文将详细介绍IIFE是实现和用途。实现函数跟随一对圆括号()表示函数调用。//函数声明语句写法function test(){};test();//函数表达式写法var test = function(){};test();但有时需要在...
2018-05-07 13:13:44
178
转载 深入理解javascript闭包系列第二篇——从执行环境角度看闭包
前面的话本文从执行环境的角度来分析闭包，通过用图示的方式对代码内容进行逐行解释。说明：下面按照代码执行流的顺序对图示进行详细说明。function foo(){ var a = 2; function bar(){ console.log(a); } return bar;}var baz = foo();baz();【1...
2018-05-07 01:02:08
171
转载 深入理解javascript闭包系列第一篇——到底什么才是闭包
前面的话闭包已经成为近乎神话的概念，它非常重要又难以掌握，而且还很难定义。本文就从闭包的定义说起。古老定义：闭包（closure），是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。那这样说来，包含变量的函数就是闭包。//按照古老定义，包含变量n的函数foo就是闭包function foo() { var n = 0;}console.lo...
2018-05-07 00:13:46
231
转载 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域
前面的话对于执行环境（execution contexr）和作用域（scope）并不容易区分，甚至很多人认为它们就是一回事，只是高程和犀牛书关于作用域的两种不同翻译而已。但实际上，它们并不相同，却相互纠缠在一起。概念【作用域】：作用域是一套规则，用于确定在何处以及如何查找标识符。关于LHS查询和RHS查询详见作用域系列第一篇内部原理。 作用域分为词法作用域和动态作用域。javascr...
2018-05-06 00:03:10
699
转载 深入理解javascript作用域系列第四篇——块作用域
前面的话尽管函数的作用域是最常见的作用域单元，也是现行大多数javascript最普遍的设计方法，但在其他类型的作用域单元也是存在的，并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀，简洁的代码，比如块作用域。随着ES6的推广，块作用域也将用得越来越广泛。letfor (var i= 0; i<10; i++) { console.log(i);}上...
2018-05-05 19:49:39
190
1
转载 深入理解javascript作用域系列第三篇——声明提升（hoisting）
前面的话一般认为，javascript代码在执行时时由上到下一行一行执行的。但是实际上这并不完全正确，主要是因为声明提升的存在。变量的声明提升a = 2;var a;console.log(a);直觉上，会认为是undefined，因为var a 声明在a = 2;之后，可能变量被重新赋值了，因为会被赋予默认值undefined。但是，真正的输出结果却是2。 就算是下...
2018-05-04 22:07:39
177
转载 深入理解javascript作用域系列第二篇——词法作用域和动态作用域
前面的话大多数时候，我们对作用域产生混乱的主要原因是分不清应该按照函数位置的嵌套顺序，还是按照函数的调用顺序来进行变量查找，在加上this机制的干扰，使得变量查找极易出错。这实际上是由两种作用域工作模型导致的，作用域分词法作用域和动态作用域，分清这两种作用域模型就能够对变量的查找过程有清晰的认识。一、词法作用域第一篇介绍过，编译器的第一个工作阶段叫做分词（token），就是把由字符...
2018-05-04 00:17:07
222
转载 深入理解javascript作用域系利第一篇——内部原理
前面的话javascript拥有一套设计良好的规则来存储变量，并且之后可以很方便找到这些变量，这套规则被称之为作用域。作用域貌似简单，实则复杂，由于作用域与this机制非常容易混淆，使得理解作用域的原理更为重要。内部原理分为：编译、执行、查询、嵌套和异常一、编译以var a = 2;为例，说明Javascript内部编译的过程，主要分为三步。【1】：分词（token...
2018-05-03 20:14:33
136
转载 深入理解javascript对象系列第四篇——对象拷贝
前面的话对象拷贝分为浅拷贝（shallow）和深拷贝（deep）两种。浅拷贝只复制一层对象的属性，并不会进行递归复制，而javascript存储对象时都只是存储对象的地址。 所以浅拷贝会导致对象中的子对象指向同一块内存地址（修改一个对象会影响另一个）。而深拷贝则不同，它不仅将原对象的各个属性逐个复制出去。而且将原对象上各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上，拷贝了所有...
2018-05-03 00:05:37
120
转载 深入理解javascript对象系列第三篇——神秘的属性描述符
前面的话对于操作系统中的文件，我们可以轻易的将其设置为只读、隐藏、系统文件、普通文件。对于对象来说，属性描述符提供了类似的功能，用来描述对象中属性的值，是否可以配置，是否可以修改以及是否可枚举。一、属性描述符类型：对象的属性描述符的类型分为两种：数据属性和访问器属性。数据属性数据属性（data property）包含一个数据值的位置，在这个位置可以读取和写入值。数据...
2018-05-02 23:19:09
148
转载 深入理解javascript对象系利第二篇——属性操作
前面的话对于对象来说，属性操作是绕不开的话题，类似于“增删改查”的基本操作，属性操作分为属性查询、属性设置、属性删除，还有属性继承。一、属性查询属性查询一般有两种方法，包括点运算符和方括号运算符。var o = { p: 'Hello World'};o.p // "Hello World"o['p'] // "Hello World"[注意点]：变量中可以存...
2018-05-02 14:12:27
156
转载 深入理解javascript对象系列第一篇——初识对象
一、对象的定义javascript的基本数据类型包括undefined、null、boolean、string、number和object。对象和其它基本类型值不同的是，对象是一种复合值：它将许多值（原始值或者其它对象）聚合在一起，可以通过名字访问这些值。 于是，对象也可以看做是属性的无序集合、每一个属性都是一个名值对。属性名是字符串，因此我们可以把对象看成是从字符串到值的映射。二、...
2018-05-02 00:22:14
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人