![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 68
roamingcode
学而时习之
展开
-
18个强大的JavaScript技能
当你需要写一个递归函数时,你声明了一个函数名,但每次修改函数名时,你总是忘记修改内部函数名。当你在开发过程中需要打印dom元素时,使用console.log往往只能打印出整个dom元素,而你无法查看dom元素的内部属性。当你需要打印出当前页面,但你需要修改当前的布局时。当你需要打印当前页面时。翻译 2023-05-30 14:16:29 · 248 阅读 · 0 评论 -
async 中的 try...catch...finally
async 中的 try...catch...finally原创 2023-05-09 17:31:43 · 366 阅读 · 1 评论 -
前端组件设计
如何设计前端组件转载 2023-04-20 17:54:31 · 282 阅读 · 0 评论 -
前端脚手架开发工具包
前端CLI脚手架开发工具包原创 2022-06-03 17:21:04 · 1766 阅读 · 1 评论 -
webpack打包结果运行流程分析
webpack自身的定位是一个模块打包器,他的的理念是万物皆模块。然而其自身只能处理 javascript 模块以及 json 模块,那么何以敢称万物皆可打包呢,这就引出了 loader 机制,loader 可将各式各样的引用资源进行转化,然后输出为 webpack 可以识别的 javascript 模块并进行打包处理。基本配置const path = require('path');/** * 为配置文件提供类型支持 * @type {import('webpack').Configurati原创 2022-03-20 22:47:12 · 1051 阅读 · 0 评论 -
JavaScript复制图片和下载图片到本地
JavaScript复制图片和下载图片到本地基本代码结构<div className="html-canvas-wrap" ref={canvasWrap}> <div className="html-canvas"> <h3>标题</h3> <p>标题描述</p> <img src={TestImg} alt="" /> </div> <button onClick={handleC原创 2022-03-20 16:28:29 · 1936 阅读 · 0 评论 -
Jest 模拟 window.location 方法
Jest 模拟 window.location 方法当你要在 jest 中 mock window.location 时,你可能会这么做it('mocks and calls window.location.reload', () => { window.location.reload = jest.fn(); window.location.reload(); expect(window.location.reload).toHaveBeenCalled();});当你运行这个转载 2021-09-29 17:27:14 · 3728 阅读 · 0 评论 -
React App 配置单元测试环境
React App 配置单元测试环境为什么选择 React Testing Library 而不是 EnzymeCreate-React-App 创建的应用开箱即用Jest 一款 JavaScript 测试框架 创建 Jest 配置文件安装 jest 和 babel-jestnpm i -D jest @types/jest babel-jest 创建 Jest 配置文件 jest.config.js// 根据问答创建配置文件jest --init配置 Jest 测试环境其原创 2021-08-07 22:56:11 · 452 阅读 · 0 评论 -
Axios请求封装
Axios请求封装支持 get 、post 快捷调用支持重复请求取消支持通用错误处理支持类型推导import request, { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance, Method } from 'axios';import { message } from 'antd';import qs from 'qs';/** * 接口Response出参 */export interface IRe原创 2021-05-08 14:57:43 · 417 阅读 · 0 评论 -
IE11下polyfill严格模式报错问题总结
问题现象项目运行在IE11中产生报错,错误如下:该错误会阻塞页面加载,导致页面空白。问题分析根据报错的行和列信息找到引发错误的代码var TypedArrayConstructorsList = { Int8Array: 1, Uint8Array: 1, Uint8ClampedArray: 1, Int16Array: 2, Uint16Array: 2, Int32Array: 4, Uint32Array: 4, Float32Array: 4, Fl原创 2021-04-23 19:42:07 · 1184 阅读 · 0 评论 -
实现一个 EventEmitter
实现一个 EventEmitterNode.js的events 模块对外提供了一个 EventEmitter 对象,用于对 Node.js 中的事件进行统一管理。因为 Node.js 采用了事件驱动机制,而 EventEmitter 就是 Node.js 实现事件驱动的基础。在 EventEmitter 的基础上,Node.js 中几乎所有的模块都继承了这个类,以实现异步事件驱动架构。基本使用let events = require('events');let eventEmitter = new原创 2021-03-14 12:06:37 · 444 阅读 · 0 评论 -
JS 常见的 6 种继承方式
探究 JS 常见的 6 种继承方式第一种:原型链继承原型链继承是比较常见的继承方式之一,其中涉及的构造函数、原型和实例,三者之间存在着一定的关系,即每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针,而实例则包含一个原型对象的指针。function Parent1() { this.name = 'parent1' this.play = [1, 2, 3]}function Child1() { this.type = 'child1'}Child1.pro转载 2021-03-14 11:41:53 · 5498 阅读 · 1 评论 -
Jest难点进阶
Jest难点进阶snapshot 快照测试快照的使用const generateConfig= () => ({ host: 'localhost', port: 3000})test('test config snapshot', () => { expect(generateConfig()).toMatchSnapshot()})test('test another config snapshot', () => { expect(generateA原创 2020-10-03 17:43:01 · 828 阅读 · 0 评论 -
Jest 前端自动化测试框架基础入门
Jest 前端自动化测试框架基础入门常用匹配器toBe() 引用比较toEqual() 值比较toBeTruthy 布尔值判断toBeGreaterThan 数字比较toBeLessThan 数字比较toMatch 字符串正则匹配toMatchObject 对象检测包含元素toContain 数组检测包含元素not 取反异步处理使用done完成函数test('异步处理 - done', (done) => { expect.assertions(1) fetc原创 2020-10-03 10:35:18 · 222 阅读 · 0 评论 -
基于Koa中间件替代前端Promise链式调用
先明白几个关键词Koa 中间件及其洋葱圈模型koa-compose常见中间件原理浅析Promise 链式调用Promise 链式调用问题场景假设有一个大表单页面,表单提交之前需要做一下几件事表单字段校验(比如邮箱格式校验)个别字段的敏感词校验提交字段名或字段值格式化处理(比如时间格式)提交数据到后端实现一:流水式处理// 表单提交需做几下4个阶段的处理const submit = () => { /** * 1. 表单校验 * 此处省略若原创 2020-07-12 11:40:09 · 322 阅读 · 0 评论 -
常见中间件原理浅析
常用中间件原理浅析Koa2 中间件原理/** * Compose `middleware` returning * a fully valid middleware comprised * of all those which are passed. * * @param {Array} middleware * @return {Function} * @api public */function compose (middleware) { // 中间件列表格式化校验 i原创 2020-05-29 16:52:05 · 472 阅读 · 0 评论 -
mobx-react-lite + Context 使用不完全指南
mobx-react-lite + Context 使用不完全指南mobx-react-lite 是 mobx-react 的轻量版,增加了对函数式组件 hooks 的支持随着 React Hooks 的推出,让我们在不编写 class 的情况下使用 state 以及其他的 React 特性,现在项目中使用Hooks的函数式组件日益增多,而多个组件之间的状态管理变得日益复杂。那么在多层级...原创 2019-12-17 16:01:48 · 5444 阅读 · 6 评论 -
Angular中使用ngrx/store做状态管理
引入Angular中的状态管理大部分可以被service接管,那么在一些中大型的项目中,这样做的弊端就会显露出来,其中之一就是状态流混乱,不利于后期维护,后来便借鉴了redux的状态管理模式并配上rxjs流式编程的特点形成了@ngrx/store这么一个作用于Angular的状态管理工具.状态管理的三个原则状态管理三个原则引用自 vjjy001 状态管理Single source o...原创 2018-11-27 16:26:17 · 9522 阅读 · 0 评论 -
JavaScript封装cookie
let cookieUtil = { set: function(name, value, expires, domain, path, secure) { let cookieText = ''; cookieText += encodeURIComponent(name) + '=' + encodeURIComponent(value); ...原创 2018-11-14 18:45:51 · 158 阅读 · 0 评论 -
JavaScript防抖节流
**函数防抖:**将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。function debounce(fn, wait) { let timer = null; return function() { if (timer !=...原创 2018-11-14 18:44:20 · 259 阅读 · 0 评论 -
Javascript中bind,call,apply模拟实现
Function.prototype.bindFake = function(context) { let fn = this; let arr = Array.prototype.slice.call(arguments, 1); return function() { let innerArgs = Array.prototype.slice.call(...转载 2018-11-14 18:43:31 · 170 阅读 · 0 评论 -
portal-vue 在Vue中的使用
引文使用过React的同学可能知道,在目前React的版本中可以找到一个叫Portals的相关API.那么这potrol是用来干什么的? 下面看一下它的使用说明Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或碎片。第二个参数(container)则是一个 DOM 元素。Rea...原创 2018-10-30 11:38:34 · 10944 阅读 · 2 评论 -
iview UI Table 使用总结
表格是展示数据的一种常用的方式,下面简要说一下在一些特定场景下对Iview 中 Table组件的使用场景一场景简述表头中的某一个列的名字需要根据Table组件外部的变量进行关联,外部变量选取不同的值,则表头中某一列显示不同的名字实现使用column中的renderHeaderAPIrenderHeader自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是...原创 2018-10-22 14:58:13 · 4655 阅读 · 0 评论 -
前端数据校验从建模开始
前端数据校验从建模开始前端开发过程中你们觉得处理什么业务功能最烦人?做前端已经有很长一段时间了,不知道大家是否和我有同样的感受,在一些 Web 应用中表单处理起来比其他功能模块都麻烦,很多体力活,往往在数据的校验会很费时间。为了能够把这部分代码更有条理,我们把数据校验部分通过 Schema 预先定义一个数据模型,把数据扔进去,返回校验结果。接下来我介绍一下这个工具, schema-...转载 2018-08-31 09:47:07 · 197 阅读 · 0 评论 -
iview Table组件中Input数据双向绑定
使用场景Table表格组件中的每一行都有文本输入框或者日期选择框,那么该如何对其中的输入框或日期选择框进行数据绑定呢?render自定义渲染iview Table组件中提供了render自定义渲染列函数,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引.实例<Tabl...原创 2018-10-18 17:56:10 · 9403 阅读 · 0 评论 -
create-react-app@2.x 配置 less 与 antd
create-react-app@1.x在1.x版本中配置less见 1.x版本配置lesscreate-react-app@2.x升级2.x的版本后,有两种配置less的方式react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。 react-app-rewire-less 来帮助加载 less 样式直接修改webpack配置文...原创 2018-12-27 23:31:38 · 1915 阅读 · 6 评论 -
从event loop到async await来了解事件循环机制
从event loop到async await来了解事件循环机制作者:船长_链接:https://juejin.im/post/5c148ec8e51d4576e83fd836JS为什么是单线程的?最初设计JS是用来在浏览器验证表单操控DOM元素的是一门脚本语言,如果js是多线程的那么两个线程同时对一个DOM元素进行了相互冲突的操作,那么浏览器的解析器是无法执行的。JS为什么需要异步...转载 2018-12-17 17:22:47 · 3686 阅读 · 9 评论 -
axios请求超时后重新请求
在vue或是react中进行网络请求axios用的都比较多,有时会因为网络不稳定问题导致请求超时,请求超时后常用解决方案都会重新尝试发送请求,尝试指定次数后不管成功与否皆结束本次请求下面是具体解决方案,主要使用了axios提供的拦截器//在main.js设置全局的请求次数,请求的间隙axios.defaults.retry = 4;axios.defaults.retryDelay...转载 2018-08-16 10:55:12 · 6222 阅读 · 0 评论 -
mobx-react-lite 基于 React Hook API 轻量级状态管理
Hook 简介官方原话:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。随着 Hook API 的发布,使得函数式组件生态也逐渐丰富起来,Github 上基于 Hook 封装的组件库也不断增多。今天就来说说 [mobx-react-lite](https://github.com/mobxjs/mob...原创 2019-07-08 16:31:59 · 19607 阅读 · 2 评论 -
Promise中then的链式回调
看题!new Promise((resolve, reject) =&amp;amp;amp;amp;gt; { reject(1); // 确定promise状态为rejected }).then((fullfilled) =&amp;amp;amp;amp;gt; { console.log(fullfilled); }, (rejected) =&amp;amp;amp;a原创 2019-01-16 23:22:52 · 2340 阅读 · 0 评论 -
JavaScript 复杂判断的更优雅写法
前提我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你试一下。举个例子先看一段代码/** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行中 ...转载 2019-01-09 14:43:56 · 148 阅读 · 0 评论 -
玩转Vue组件通信--终极版
引言简要总结于 掘金小册->Vue组件精讲作者:Aresn iView作者组件通信不管是在业务组件开发还是UI组件开发基本都是不可避免的,实际项目开发中一般会选择引入vuex,这里关于vuex不做过多介绍,不了解的可直接去 vuex官网 查看。这里主要使用vue自身的一些东西来达到组件通信的目的。provide / injectprovide / inject 是 Vue.js...转载 2019-01-08 11:38:41 · 446 阅读 · 0 评论 -
EventEmitter事件通信(发布订阅)
基于框架(angular,react,vue等)开发的项目都有合适的状态管理库,一般也很少使用eventEmitter,那么一些传统的或者遗留的基于 jQuery + template 的项目如何处理通信问题呢?解决方案:发布订阅(EventEmitter事件通信)callback(传递回调函数)这里简要实现一下EventEmitterclass EventEmitter { /...原创 2019-01-10 16:15:29 · 2390 阅读 · 0 评论 -
ES6API及注意点
String 字符串includes() 返回布尔值,表示是否找到了参数字符串。let s = 'Hello javascript!';s.includes('o') // truestartsWith() 返回布尔值,表示参数字符串是否在原字符串的头部。let s = 'Hello javascript!';s.startsWith('Hello') // trueendsWi...原创 2018-12-24 20:24:09 · 517 阅读 · 0 评论 -
ES5常用API汇总
Stringtrim()去除字符创两侧空白// 删除一个字符串两端的空白字符,返回一个去除空白新的字符串。let str=' testStr ';console.log("+" + str + "+"); // + fff +console.log("+" + str.trim() + "+"); // +fff+Date原创 2018-12-18 19:02:00 · 836 阅读 · 0 评论 -
Angularjs中ng-repeat与移动端滑动插件iScroll的冲突
IScroll是在移动端开发的过程中会经常使用到的一个插件,但当其与angularjs中的ng-repeat指令配合使用时,很有可能会导致iScroll插件失效或者滑动不正常,另外当ng-repeat循环的列表动态增加时也会导致滑动不正常。滑动不正常原因: 1.在ng-repeat未将列表循环展示出来时,iScroll便被启动了,导致滑动异常,因此需要确保ng-repeat循环完毕后再初始化...原创 2018-08-21 10:38:59 · 456 阅读 · 0 评论 -
表单验证的简易封装
目前iview,ant-design等UI框架在表单处理方面都使用了async-validate来进行表单验证,并对其进行了封装以便更好的使用下面对最基本的使用做了简易封装module.exports = function(fields, source, success, fail) { var Schema = require("async-validate"), ...原创 2018-08-23 10:24:58 · 480 阅读 · 0 评论 -
一道涉及的知识点比较多的JS面试题
在segmentfault上看见一道比较有意思的JavaScript题,如下 javascript 代码function Foo() { getName = function () { console.log('1'); }; return this;}Foo.getName = function () { console.log('...转载 2018-08-22 10:29:57 · 118 阅读 · 0 评论 -
简易移动端特效微场景
html 代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m原创 2018-08-22 10:29:18 · 551 阅读 · 0 评论 -
JavaScript 的 this 指向问题深度解析
与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的。换句话说,函数的调用方式决定了 this 指向。 JavaScript 中,普通的函数调用方式有三种:直接调用、方法调用和 new 调用。除此之外,还有一些特殊的调用方式,比如通过 bind() 将函数绑定到对象之后再进行调用、通过 call()、apply() 进行...转载 2018-08-22 10:24:30 · 133 阅读 · 2 评论