- 博客(47)
- 收藏
- 关注
RSS订阅原创 使用Jest做单元测试
Jest是什么？Jest is a delightful JavaScript Testing Framework with a focus on simplicity.It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!Jest是一个关注于简单使用且令人愉悦的JavaScript测试框架，它能够和Babel、TypeScript、Node、React、Angular、Vue等项目配合
2020-06-16 16:13:48
2069
原创 XMLHttpRequest详解
写在前面主要梳理了一些通用方法之类的，比较有用的内容是CORS protocol，这部分的内容主要参考了fetch在whatwg的文档历史XHR对象是用来获取网络资源的一个对象，其名字是历史性原因并不代表其功能。XHR对象最初是WHATWG的HTML定义的一部分。2006年移到了W3C中，其扩展（例如：progress events、cross-origin requests）写在了另一草案...
2019-04-12 21:44:51
1090
原创 9102年了XHR(jQuery)、Fetch和axios改选谁？
xhrxhr就是XMLHttpRequest的简写，这个对象为你提供一些方法让你获取数据的同时不需要刷新整个页面，这样的变成方式也叫ajax。xhr到底怎么工作的我不再赘述了。下面贴一个简单的xhr代码：// 手动对老版本的IE做兼容let xhrif (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHt...
2019-04-11 11:30:59
840
原创 React15至今的重要变化人肉梳理
2016-04-07当在挂载组件时使用document.createElement而不是innerHTML，这样我们就摆脱了data-reactid。并且document.createElement在现代浏览器中也更快；值得注意： data-reactid在client端已经去除了，但依旧存在在服务端渲染中，不过更小更简 单是简单递增的。由于历史原因对SVG的不完整支持，在React...
2019-03-28 21:29:49
812
2
翻译 Webpack Plugins例子
SplitChunksPlugin例子例子一：// index.jsimport('./a') // 按需加载//a.jsimport 'react'**结果：**将会生成一个包含react的独立的chunk，并且将会在导入时并行加载；原因：包含一个来自 node_modules 的模块react大于30kb并行请求数量是2不会影响到初次加载时的请求数react的代码...
2019-03-01 23:12:12
296
原创 一次直播需求而来的video梳理
video是HTML5规范中的新标签，这个标签支持视频播放。让我们来梳理一下关于video标签的内容，分为三部分，如下图所示：属性autoplay(Boolean)：自动播放；——autoplay=‘autoplay’controls(Boolean)：视频控件；——controls=‘controls’controlsList(String)：可以自定义部分控件；——controlsL...
2018-11-26 11:25:05
517
原创 关于命令行的记录
登陆ssh -p port root@serversftp登陆sftp -oPort=8989 root@serverget /path/to/text.txt /Users/tang/put /path/to/tmp /tmp
2018-11-09 21:20:05
210
翻译 【译】React16.3+ 生命周期
React 16.3+ 生命周期16.3版本向我们介绍了一些新的生命周期函数，他们将会替代已存在的生命周期函数并提供更好的React异步支持。本文基于之前的文章的更新，因此将会聚焦于新的生命周期函数而不是所有的生命周期函数。static getDerivedStateFromProps(nextProps, prevState)这个新的函数主要致力于确保在需要state和props的时候是同...
2018-11-07 15:25:35
1125
原创 表单提交
序言MDN文档里写到：Content-Type 实体头部用于指示资源的MIME类型 media type 。其中mime类型就有非常多，在网上一查就会知道对应的文件应该是怎样的mime类型。那么Content-Type与提交表单有什么关系呢？表单与表单相关的Content-Type其实只有三种：application/json、application/x-www-form-urlencod...
2018-10-24 18:23:03
180
原创 前端渲染PDF文件成图带来的思考：什么是缓冲区Buffer、类型化数组TypedArray以及大型二进制对象Blob
起因需要在前端对后台传来的Base64编码后的pdf文件进行解码并生成TypedArray（unit8Array）类型再传递给pdf.js什么是Buffer?Buffer对象是Node.js用来处理二进制数据的一个接口。JavaScript比较擅长处理Unicode数据，对于处理二进制格式的数据（比如TCP数据流），就不太擅长。Buffer对象就是为了解决这个问题而提供的。该对象也是一个构造...
2018-10-17 16:50:34
1462
原创 踩坑
json的属性名必须是双引号”“而不能是单引号”，否则无法被JSON.parse解析,会报语法错误；JSON.parse('{"foo" : 1, }')应省略末尾的逗号，否则无法解析；JSON.parse(String , Function)第二个参数接受reviver函数，此函数会在JSON解析完毕后，会从最里层到最外层调用reviver函数，在函数中this为当前属性所属对象，属性
2018-03-18 14:39:59
220
原创 关于ant-design（使用心得，有就更新）
字体库扩展 使用iconfont扩展字体库：注意 需要font-family和前缀的设置都为anticon需要unicode编码不与本身的重合导入在项目public引入即可，使用方法同本身的<Icon type="plus">待续...
2018-03-07 14:31:42
2550
原创 Webpack使用心得集锦(持续添加ing)
关于less-loader：less-loader只用来识别less文件，需要less进行编译，故需要npm install lessnpm install less-loader待续
2018-03-05 14:28:12
248
原创 CSS关于二倍图的使用
实际工作中可能会得到二倍图，但我们需要的是一倍图的尺寸显示在网页，有N张图的情况下我们不可能去调节每一张图故可以通过transform:scale进行缩放transform-origin:left top;transform:scale(0.5);但此时原本的盒子大小不会变化，会留下一大片空白 这个时候我们可以使用zoom，zoom会改变到盒子的大小，不过可能会有性能问题，这个时候...
2018-02-09 10:38:30
10512
2
原创 ES6学习
字符串扩展for...of优点正确遍历字符串for (let codePoint of 'foo') { console.log(codePoint)}let text = String.fromCodePoint(0x20BB7);//即使在存在Unicode字符时依然可以正确遍历for (let i = 0; i < text.length; i++) { co
2018-01-30 14:40:55
178
原创 canvas基础
Canvas基础canvas在HTML中的代码"myCanvas" width="300" height="300">//writing some words here while broswer do not support canvas.//or some "" alt="" /> is cool too.canvas核心API渲染上下文getContext
2018-01-24 10:01:19
252
原创 受控组件与非受控组件在React中没那么复杂［自译］
原文链接：https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ You may have seen many articles saying “you shouldn’t use setState,” and the docs are claiming “refs are bad”… That is so c
2018-01-22 17:28:17
294
原创 React学习笔记——Router（有待完善类比学习、页面路由与服务端路由部分）
React-router基本概念import { Router, Route, Link } from 'react-router'BrowserRouter：容器组件，在其内配置Route为真正的路由方面的东西； Route：它最基本的职责是在location与路由路径匹配时呈现相应的component； Link：为应用程序提供声明性的、可访问的导航。(a标签)
2018-01-22 16:33:43
498
原创 React学习笔记——Redux基础篇
Redux，状态管理器，将state进行统一的管理，适用于复杂的用户操作、需要协同的用户操作、涉及到权限的网页、多数据源等场景。基本概念action：顾名思义，动作。需要执行怎样的操作，action是一个对象，内部包含了此action的类型和相关信息，规范的action如下： { type:"action_type", payload:"message_wi
2018-01-22 16:31:29
225
原创 React学习笔记——基础
JSX你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。 注意事项：因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。 如：class => classNametextarea在HTML中，
2018-01-22 16:30:19
338
原创 玩CSS3动画（有就更新）
编辑图标css3 效果图//Reactimport React, {Component} from "react";import "./Feedback.component.css";export default class Feedback extends Component { render() { return ( <React.Fragmen...
2017-10-22 13:16:47
310
原创 WEB语义化（待完善）
目的：最简单的讲就是：语义网是让机器可以理解数据HTML5：html5的新标签们，就是为了推进语义化的进程，通过使用含有语义的标签来逐渐形成一种机器和人类都能够读懂的文本。语义化的标签们：title属性： title元素是最重要的 HTML 元素之一。它的主要功能是描述网页的内容。虽然是不可见的部分，但非常重要，因为它在搜索引擎列表、窗口的标题栏、用户的书签中都是可见的。 article元素：
2017-10-21 01:37:45
292
原创 浏览器缓存机制、http缓存头
缓存与目的重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。缓存作为加快页面加载速度的方法，可以说是必不可少的一个方法，如何能更好地运用缓存来服务客户，首先我们就得了解清楚缓存；缓存流程图先上一张从SegmentFault搬运来的缓存过程图 从图中能很清楚的
2017-10-21 01:35:56
2738
1
原创 JS深拷贝与浅拷贝及实现
我们都知道在js中，关于基本类型（Number、String 、Boolean、Null和Undefined）是按值访问的，因此可以直接操作保存在变量中的实际值，存在栈当中var b ;var a = 10;b = a;a与b的值是相互独立的，在复制的过程中同时也新创建了一个内存给他使用。 但是引用类型（Object 、Array 、Function 、Data），他们是存储在堆当中的，相应变
2017-10-21 01:35:04
272
原创 浏览器渲染过程、回流重绘
渲染引擎渲染引擎，中文名字非常清晰，就是负责页面渲染的引擎（感觉并没有解释），另一个名词渲染引擎通常也就是浏览器内核，从js拥有了自己的引擎（比如V8）之后，解析JS的工作就从浏览器中独立出来。 简单介绍一下浏览器内核的分类，现如今的主流浏览器以及内核； 浏览器 内核 关系 Chrome Chromium 早期为webkit FireFox Gecko 开源内核
2017-10-21 01:34:19
476
原创 跨域问题与解决方案
说到跨域，比跨不过去的地方：同源策略（引起跨域问题的策略） 所以，文章开头先来简单的介绍一下同源策略什么是同源策略？判断同源的三个要素： 1. 相同的协议 2. 相同的域名 存在的意义： 假设没有同源策略，那么我在A网站下的cookie就可以被任何一个网站拿到；那么这个网站的所有者，就可以使用我的cookie(也就是我的身份)在A网站下进行操作。 同源策略可以算是 web 前端安
2017-10-21 01:33:16
235
原创 input标签相关
1.change事件：当input捕获到焦点后，系统储存当前值 ，当input焦点离开后，判断当前值与之前存储的值是否不等，如果为true则触发onchange事件。 所以在js,操作dom进行赋值的情况下无法触发change事件。解决：在进行赋值的时候顺带触发change事件，$(“#”).xx.trigger(“change”)2.input type=file类型，无法通过js直接
2017-10-17 23:41:34
211
原创 JS原型链、继承的问题与解决：组合继承、借用构造函数（未完）
Created with Raphaël 2.1.0原型对象、实例与原型属性PersonPerson原型对象原型对象实例实例Prototype原型属性指向原型对象constructor属性指向Person实例的[[Prototype]](浏览器中表现为_proto_)指向原型对象
2017-10-17 23:18:43
188
原创 JS的数组去重与排序
去重： 使用indexOf方法//假定已有一个数组ar里面包含了数；//out为去重后的数组function find(ar[]){ for(var i = 0 ; i<ar.length ; i++){ if(out.indexOf(ar[i]) == -1){ out.push(ar[i]); } } ret
2017-09-13 23:09:29
284
转载 深入BFC块级格式化上下文
BFC：块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。常说的文档流分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC(Formatting context格式化上下文)。常见的FC有BFC（块级格式化上下文）、IFC（行级格式化上下文）、GFC（网格布局格式化上下文）和F
2017-09-13 21:58:11
256
原创 关于两个日期之间的
时间戳转换函数：IM.formatDate = function(timeStamp){ var time = new Date(timeStamp); var formatTime = time.getFullYear()+"-"+(time.getMonth()+1 < 10 ? '0'+(time.getMonth()+1) : time.getMonth()+1) +"-"+ti
2017-08-25 16:49:59
210
转载 ajax 文件下載
原本现在文件直接通过超链接可以完成下载，但现在要在url中附带几个参数，并且这些参数要是点击事件触发时的最新值，所以这里使用ajax的方式进行下载然而：1.使用ajax，ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的发送，接受都只能是string字符串，不能流类型，所以无法实现文件下载，强用会出现response冲突。如果非要使用aja
2017-08-18 12:20:18
335
转载 5个不知道的CSS属性
书写显示（font-display和write-mode）；渲染性能提升（contain和will-change）；创建新的花式设计（clip-path）；（使用can I use 工具检查属性的跨浏览器特性）1.font-display允许控制可下载字体在完全加载之前的呈现方式，或者下载失败时的处理方案。五个值：auto：默认值，相当于不使用此属性，结果是
2017-08-16 13:14:28
346
原创 Java取固定小数点
1. DecimalFormat df=new DecimalFormat("#.000")//取三位小数，当#.000时，小于零的数会省掉0，需要设置成“0.000”；double a=123.32432;System.out.println(df.format(a));2. double a=12.12323;BigDecimal bg=new BigDecimal(a);
2017-03-24 20:33:22
353
原创 JavaScript node
1.12种节点类型与其常量数值：Node.ELEMENT_NODE(1);Node.ATTRIBUTE_NODE(2);Node.TEXT_NODE(3);Node.CDATA_SECTION_NODE(4);Node.ENTITY_REFERENCE_NODE(5);Node.ENTITY_NODE(6);Node.PROCESSING_INSTRUCTION_NOD
2017-03-10 19:51:09
308
原创 JavaScript 高程
1.数据类型：a.Undefined:未定义 b.Null:空对象指针 var car=null;alert(typeof car);//”object“ c.Boolean:true 与false 与数字值不是一回事，true不一定等于1，false不一定等于0； d.Number:八进制需要先导零（070，07
2017-03-08 16:34:29
474
原创 蓝桥杯 杨辉三角形 java
import java.util.Scanner;public class Main { public static void main(String[] args){Scanner sc=new Scanner(System.in);int n=sc.nextInt();int num[][]=new int [n][n];for(int i=0;inum [i][0
2017-02-28 14:37:54
1984
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人