- 博客(56)
- 收藏
- 关注
RSS订阅原创 JavaScript基础：生成器
概述JavaScript中函数一旦启动运行，在它结束之前是不会被中断的。但在ES6中引入了一个全新的函数形式生成器Generator。这种函数不像普通函数一样保证执行运行到结束，而是具有函数块内暂停和恢复代码执行的能力。生成器Generator的形式只是在普通函数名称之前加一个*表示这是一个生成器。其特征主要有两个：1、function关键字与函数名之间有一个星号；2、函数体内部使用关键字yield表达式，定义不同的内部状态。生成器Generator的使用与普通函数一样，只是调用生成器函数会产生一个迭代器
2021-02-13 16:38:52
472
原创 JavaScript基础：迭代器
概念Iterator（迭代器）是ES6新增的一种接口类型，用于为表示集合（Array，Object，Map，Set，NodeList，arguments）概念的数据结构提供统一的访问遍历机制。因此其作用主要包含三个方面：1、为集合概念的数据结构提供统一访问机制；2、按照某种次序对数据结构的成员进行排列；3、为ES6提供的for...of遍历机制消费。简言之，其是一种有序的、连续的、基于拉取的用于消耗数据的组织方式，即是一个结构化的数据模式，用于从源以一次一个的方式提取数据。interface Itera
2021-02-12 15:17:55
292
原创 不容错过的前端快照功能（html2canvas）
背景结合后端数据生成运营推广页面，用户通过保存操作将推广页面保存为图片进行分享和传播。其中涉及到的前端主要技术点：dom转图片保存图片到本地了解 CORSCORS（Cross-Origin Resource Sharing，跨域资源共享），同源安全策略默认阻止跨域获取资源，通过CORS给了Web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。CORS由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端JavaScript代码获取跨域请求的响应。什么情况下需要C
2020-11-05 12:12:33
1184
原创 一言难尽的HTTP大量请求的坑点
上下文说明最近在做一款网盘产品，用户可通过操作上传文件夹，或者多选上传多个文件，在项目进行测试时遇到了HTTP请求大量上传文件的bug。浏览器的坑（浏览器并发请求数量限制）以下是关于浏览器同域名并发请求的一些说法，这里直接引用：基于端口数量和线程切换开销的考虑，浏览器不可能无限量的并发请求，因此衍生出来了并发限制和HTTP/1.1的Keep alive。 所以，IE6/7在HTTP/1.1下的并发才2，但HTTP/1.0却是4。 而随着技术的发展，负载均衡和各类NoSQL的大量应用，基本已经足
2020-08-07 12:23:24
1816
原创 不可不知的react模糊搜索与结果高亮
前言随着vue、react等框架等广泛使用，前端对数据处理的需求越来越多，处理的数据量也越来越大。今天我就接到这么一个需求，为了减少对后端的请求次数，提高性能，前端实现对数据进行轻量的模糊搜索与检索结果的高亮显示。talk is cheap，show me code，咱们闲话少说，直接看demo代码（这里我们使用模糊检索antd中的icon图标做demo演示）：如下是App.tsx文件内容：// App.tsximport React, { useState } from 'react';impo
2020-06-15 21:06:53
1504
原创 巧用 curl
初识 curlcurl是命令行工具函数，是对web服务器发起请求。curl使用纯熟是完全可以取代图形化界面工具postman的。做为前端的小白，初次结识curl还是因为一次项目发布问题。node中间层项目开发完成之后，走发布流程发布，发布完成之后通过域名访问该项目，但是此时就是见证bug的时候，项目访问白页，控制台也不报错，完全不知道error发生在什么地方，这时候只能通过跳板机远程访问项目发布的机器，一步一步定位问题的原因，这时候就是curl闪亮登场的时刻了。通过curl http://127.0.0.
2020-06-14 21:16:28
195
原创 不可忽略的空格
问题描述富文本编辑器中需要实现一个可编辑的导航树，在上线运行时客户反馈其设置的导航树的空格不起作用。具体问题如下所示：由此可以看到HTML文本节点与渲染展示的内容不同，造成了用户直观感受到的输入空格不起作用。问题原因空格之所以被忽略是因为浏览器对HTML文本中空格的处理规则：文本的前部和后部的空格会被忽略，内部的连续空格只会算作一个，也就是说浏览器默认会忽略空格的存在。也就是说下面的代码是等价的：<p> hello word </p><p> hell
2020-06-05 15:10:16
359
原创 名符其实的react下一代状态管理器hox
前言自从React16版本发布Hooks以来，大家纷纷上车尝鲜。毫无疑问，Hooks在一定程度上解决了组件间功能和逻辑复用的问题，在组件间的逻辑的封装和复用确实真香，但Hooks在数据状态的共享方法略有不足，虽然可以使用useReducer实现数据状态管理，但在一定程度上是对redux的思想的复用。我们知道redux、Flux、dva等这些React状态管理的工具，实际上都是对action、dispatch、reducer、useStore、Provider、Context这些概念的排列组合，概念太多，学
2020-05-29 14:44:43
1190
原创 import按需加载react类组件时引发的bug
问题描述由于项目工程特别大，使用了import函数与@loadable/component结合进行组件的动态加载，从而实现Code Splitting的效果。如下是一个测试组件的代码：// 这是一个组件import React from 'react';interface Props {};export default class Demo extends React.Component<Props> { render () { return (
2020-05-27 15:15:41
936
原创 聊一聊Cookie那些事儿
前言最近由于Chrome 80+对第三方cookie进行了限制，虽然没有像最新版的safari和Firefox一样默认禁止第三方cookie，但是离完全禁止第三方cookie也不远。但因此也给我们前端开发人员带来了一些影响，第三方cookie不能正常携带，造成了许多请求有问题。cookie的用途众所周知HTTP请求是无状态请求，简言之即是HTTP请求不知道请求是否是来自同一个客户端，对于仅是...
2020-04-22 11:40:09
224
原创 koa-router源码解析
前言最近需要做Node中间层的需求，优雅的名字是back-end for front-end(BEF)，实现前后端彻底解耦。BFE由来已久，服务端服务前端的一种逻辑分层模式，这种分层模式由来已久。在做中间层API接口开发时，选用Koa作为创建Node服务的JavaScript库，因此在各种文档中经常见到路由挂载的代码。const Koa = require('koa');const Rout...
2020-04-09 14:52:41
350
原创 JSONP原理与实现
JSONP的原理JSONP即是JSON with padding（填充式JSON或参数式JSON）的简写。是由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。http://freeapi.com/json/?callback=handleResponsehandleResponse({nam...
2020-03-27 18:25:57
216
原创 Chrome 80跨域cookie无法携带
什么是cookieHTTP是无状态协议，也就是说服务器完全不清楚是否是同一位用户在访问。在最开始HTTP协议只是做为共享文本内容而存在是可行的，但是随着Web发展，Web内容的丰富化，必须需要有一种技术去记录HTTP协议的用户状态，而cookie技术就是充当这个角色的。简言之，cookie就是存储在浏览器下的文本文件，用于记录用户状态信息。用户在第一次向服务器发送访问请求时，浏览器发起请求，...
2020-03-12 17:16:55
4287
1
原创 JavaScript基础：数组
Array类型在JavaScript中数组是有序数据的集合，但其每一项可以是任意类型但数据，且可以动态调整数组的大小，即可以随着数据的添加自动增长以容纳新增数据。数组的length属性不仅可读而且是可以修改的，也就是说可以通过设置数组length属性，可以从数组的末尾移除项或向数组中添加新项。const arr = [];arr[1] = 2;arr.length = 5;arr[4] ...
2020-03-09 16:18:26
110
原创 React开发踩坑总结（持续更新）
this迷失由于React开发的灵活性，在组件属性传递时，操作函数也常常作为属性被传递进去。由于未使用使用箭头函数造成函数在执行是根据上下文确定this指针的值，常常造成this is undefined的问题。import React, { Component } from 'react';export default Button extends Component { handle...
2020-03-04 14:02:55
932
原创 ES的装饰器
JavaScript中的装饰器JavaScript中的装饰器是这样的。@classDecoratorclass Person { @methodDecorator walk () {}}Decorators make it possible to annotate and modify classes and properties at design time.A deco...
2020-01-19 16:28:10
655
原创 Vue项目axios的引入
axios简介axios官网：易用、简洁且高效的http库。axios官网axios核心是一个基于promise的HTTP库，可以用在浏览器和node.js中。axios的特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防...
2020-01-18 15:58:41
1610
原创 面试遇到的手写函数
防抖函数// 防抖函数function debounce(fn, delay, immediate) { let timer = null; return function() { const _this = this; const args = [...argumets]; if (immediate && !t...
2020-01-18 13:14:02
254
原创 正则实现整数运算
加const sum = (m, n) => { m = Array(m + 1).join('#'); n = Array(n + 1).join('#'); return m.replace(/$/, n).length;};sum(3, 2); // 5减const diff = (m, n) => { m = Array(m + 1)...
2020-01-18 12:48:52
207
原创 Content-type的几种常见类型
application/x-www-form-urlencoded浏览器的原生form表单提交的数据按照 key1=val1&key2=val2 的方式进行编码，key和val都进行了URL转码POST [http://www.example.com](http://www.example.com) HTTP/1.1 Content-Type: application/x-[w...
2020-01-18 12:46:01
1343
原创 nodemon配置和使用
简介nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.在之前我们启动应用服务采用的方式都是node app.js，但我们...
2020-01-15 11:43:35
4270
7
原创 YAML教程
YAML设计理念YAML: YAML Ain’t Markup LanguageWhat It Is: YAML is a human friendly data serializationstandard for all programming languages.以上是YAML官网对其的说明，简言之就是：YAML是以人为本的各语言通用的数据序列化标准。---Time: 2001...
2020-01-15 10:52:35
324
原创 node升级带来的gulp坑
升级node项目使用的node环境是10版本，而node官网lts版本已经是12版本。本着追求最新、体验最好的原则，进行了node版本升级，升级以后yarn build打包一下项目，坑点出现了，报错了。fs.js:27const { Math, Object } = primordials; ^ReferenceError: primor...
2020-01-14 20:41:39
5166
1
原创 EJS浅析
概述What is the “E” for? “Embedded?” Could be. How about “Effective,” “Elegant,” or just “Easy”? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religi...
2020-01-14 11:24:19
283
原创 koa源码解析
使用node原生http模块创建serverconst http = require('http');function callback(req, res) {};const server = http.createServer(callback);// 使用事件监听执行callbackserver.on('request', callback);server.listen(3000...
2020-01-13 17:49:25
207
原创 koa浅析
koa功能划分koa作为base node.js的下一代web应用框架，其具有简洁、健壮、富有表现力等特点。由Express幕后的原班人马打造，充分利用async + await + promise的特定，有效的规避了回调函数，且增强了错误处理。其核心主要包括两个部分，一个是koa本身，一个是中间件的流程控制koa-compose（koa源码解析）。application.jsapplic...
2020-01-13 15:07:43
765
原创 JavaScript基础：闭包
概念闭包是指有权访问另一个 函数作用域中的变量的函数。我们在进行koa-compose源码解读时，可以看到是对闭包的最好应用。function (middleware) { if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!') for (const fn of m...
2020-01-12 11:49:32
143
原创 flex布局教程
flex 基本概念flex布局是W3C在2009年提出了一种弹性的自适应布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。flex的核心概念是轴和容器。其中容器包裹在外层的是父容器，内层的是子容器。容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点是main start，结束位置是main ...
2020-01-11 22:06:37
468
原创 koa-compose源码解读
koakoajs：next generation web framework for node.js。Koa是基于Node.js的下一代web开发框架。它是基于中间件机制的优雅、简洁、表达力强、自由度高的简单好用的Web框架。通过将各种独立功能的中间件进行自由组合实现具有特定功能的web应用。如通过koa-router中间件实现路由功能、通过koa-cors实现跨域功能等等。在这些中间件中...
2020-01-11 20:16:35
420
原创 React生命周期
生命周期简介React组件的生命周期实际是提供给React用于将React元素构建渲染挂载到真实的Dom节点的各个时期的钩子函数。各个生命周期函数提供，使得在开发组件时可以控制各个时期执行不同的操作，如异步的获取数据等。上图是基于React: '^16.4'的生命周期挂载组件首次被实例化创建并插入DOM中需要执行的生命周期函数：constructor()：需要在组件内初始化sta...
2020-01-07 13:10:24
153
原创 ES2020新增功能
globalThis 对象在JavaScript运行环境中，存在一个顶层对象，即是全局运行环境（全局作用域），在browser环境下，顶层对象指向window，在node环境下，顶层对象指向global，在Web Worker中，顶层对象又指向self。而这个顶层对象我们常常又使其与this挂钩，一般默认使用this变量即可获得该顶层变量。但由于this在JavaScript中又是一个很复杂的变...
2020-01-04 20:36:52
465
原创 ES6 Class语法
简介JavaScript作为一门若类型的解释性语言，其既可以满足面向对象编程的需要，也可以实践函数式编程范式。随着ES版本的演进，JavaScript的功能原来越丰富，书写起来也原来月舒服。其中ES6新增的Class语法也使得JavaScript与传统的面向对象语言越老越相似。ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加...
2020-01-02 17:03:33
173
原创 rxjs核心概念之Subject
订阅 Observable我们直到rxjs是基于观察者模式与迭代器模式的实现的Observable与Observer之间数据推送体系（具体内容参看博客: rxjs核心概念之Observable）。import { interval } from 'rxjs';import { take } from 'rxjs/operators';const sub$ = interval(1000)...
2020-01-02 13:12:50
831
1
原创 JavaScript基础：继承
继承传统的面向对象语言的继承主要有两种方式：接口继承和实现继承。而JavaScript与传统的面向对象比较其实现继承主要是基于原型链的实现继承方式。因为本质上JavaScript的函数也是对象，没有函数签名，无法实现接口继承。原型链继承原型链实现继承，采用的方式就是重写子类型的原型。因为我们知道对象属性和方法查询，是先查找实例对象上的属性和方法，如果没有找到会继续通过原型链逐级向上层查找直到...
2020-01-01 21:34:01
133
原创 JavaScript基础：创建自定义类型的对象
字面量模式在使用JavaScript进行代码书写时，创建对象的方式中首先推荐的模式就是字面量方式进行创建。const person = { name: 'jade', age: 5}存在的问题：如果仅仅是创建单个对象，使用字面量是时间简单方便的，但是创建很对同类型对象时，这种方式就会产生大量重复代码。工厂模式工厂模式是一种被广泛熟知的设计模式，该模式将创建对象的过程抽象成工厂函...
2020-01-01 14:08:03
251
原创 JavaScript基础：new 操作符
定义new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。----MDN例子function Person(name, age) { this.name = name; this.age = age;}console.dir(Person.prototype);const person = new Person('Jam', 27);console.d...
2020-01-01 12:19:04
130
原创 rxjs核心概念之Observable
RxJS简介RxJS 是基于观察者模式和迭代器模式以函数式编程思维来实现的。简单来讲RxJS的运行就是基于Observable和Observer之间的数据生产和消费的互动过程。因此，理解RxJs，首先要对Observable和Observer有深入的理解。顾名思义，Observable就是可被观察者，Observer就是观察者，两者通过Observable上的sunscribe方法作为桥梁将两者...
2019-12-28 14:28:48
671
原创 http2.0
http2.0http发展史Web性能优化HTTP/2.0迁移HTTP/2.0协议http发展史HTTP/0.9是个相当简单的协议，仅是实现最初文档共享获取的HTML的功能，仅支持GET方法，没有首部。HTTP/1.0相对0.9是一个巨大的飞跃，首部、响应码、重定向、错误、内容编码、更多请求方法等现在我们熟悉的HTTP概念都在1.0版本出现。但是由于其无法多个请求公用一个链接、缺少强制的Hos...
2019-12-23 22:49:14
216
原创 CSSModules入门
局部作用域CSS的规则都是作用于全局的，任何一个组件的样式都是对整个页面起作用的。产生局部作用域的方法就是为每一个样式生成唯一名称，而这也是CSSModules的做法。import React from 'react';import styles from './styles.css';export default const App = (props) => (<div c...
2019-10-25 09:59:46
186
原创 JSX简介
JSX简介jsx是JavaScript的扩展，可以很好的展示 UI 应该呈现的交互本质。而 React 通过组件的形式将渲染逻辑和UI展示逻辑耦合在一起。JSX 最终会被转译为 React.createElement() 函数调用。// 组件import React, {Component} from 'react';export default class App extends Com...
2019-10-22 17:16:12
891
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人