18个强大的JavaScript技能 当你需要写一个递归函数时，你声明了一个函数名，但每次修改函数名时，你总是忘记修改内部函数名。当你在开发过程中需要打印dom元素时，使用console.log往往只能打印出整个dom元素，而你无法查看dom元素的内部属性。当你需要打印出当前页面，但你需要修改当前的布局时。当你需要打印当前页面时。
维护好一个复杂项目 维护好一个复杂项目很难，这次分享了两个实践中有用的方案，第一个抱有主人翁心态设计代码，要在设计之初就做好考量，不要寄希望于对没有好好设计的系统做缝缝补补。第二是深入理解为什么现代社会的运作巧妙之处，尽可能把代码架构组织一定程度映射到社会的运作机制上，目前来看，社会最适合代码借鉴的思路就是解耦，再利用庞大的分工协作网络完成单人无法完成的工作。
IDE进阶配置 setting.jsonnode_modules 中展示文件范围配置Vim配置主题颜色修改{ "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "terminal.integrated.fontSize": 15, "workbench.startupEditor": "newUntitledFile", "files.associations": { "*.tpl": "ht
webpack打包结果运行流程分析 webpack自身的定位是一个模块打包器，他的的理念是万物皆模块。然而其自身只能处理 javascript 模块以及 json 模块，那么何以敢称万物皆可打包呢，这就引出了 loader 机制，loader 可将各式各样的引用资源进行转化，然后输出为 webpack 可以识别的 javascript 模块并进行打包处理。基本配置const path = require('path');/** * 为配置文件提供类型支持 * @type {import('webpack').Configurati
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
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();});当你运行这个
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 测试环境其
封装Form表单组件极简版 确定要实现的功能import React, { useRef } from 'react'import Form from './Form'import FormItem from './FormItem'import Input from './Input'const FormContext = () => { const formRef = useRef(null) // 功能1：提交时获取所有表单数据 const submit = () => { form
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
IE11下polyfill严格模式报错问题总结 问题现象项目运行在IE11中产生报错，错误如下：该错误会阻塞页面加载，导致页面空白。问题分析根据报错的行和列信息找到引发错误的代码var TypedArrayConstructorsList = { Int8Array: 1, Uint8Array: 1, Uint8ClampedArray: 1, Int16Array: 2, Uint16Array: 2, Int32Array: 4, Uint32Array: 4, Float32Array: 4, Fl
迁移Koa中间件模型至前端业务中 Koa 链式中间件原理常见中间件原理浅析其核心关键点在于中间件的之间的链式调用-实现方法则是在当前中间件中保存下一个中间件的引用洋葱圈模型的实现依赖于 async ... await，这也决定了中间件的固定写法async function commonMiddleware(ctx, next){ try{ // do something await next() // do something } .catch(err){ // handle
实现一个 EventEmitter 实现一个 EventEmitterNode.js的events 模块对外提供了一个 EventEmitter 对象，用于对 Node.js 中的事件进行统一管理。因为 Node.js 采用了事件驱动机制，而 EventEmitter 就是 Node.js 实现事件驱动的基础。在 EventEmitter 的基础上，Node.js 中几乎所有的模块都继承了这个类，以实现异步事件驱动架构。基本使用let events = require('events');let eventEmitter = new
JS 常见的 6 种继承方式 探究 JS 常见的 6 种继承方式第一种：原型链继承原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。function Parent1() { this.name = 'parent1' this.play = [1, 2, 3]}function Child1() { this.type = 'child1'}Child1.pro
React架构的演变-从同步到异步 React架构的演变-从同步到异步为了加深对 React 更新机制的理解，本文转载于：作者：Shenfq链接：https://juejin.im/post/6875681311500025869React 16 之所以要进行一次大的重构，是因为之前的版本中有一些不可避免的缺陷，一些更新操作需要由同步改为异步。React 15 是如何进行一次 setState 更新的import React from 'react'class App extends React.Component {
Jest难点进阶 Jest难点进阶snapshot 快照测试快照的使用const generateConfig= () => ({ host: 'localhost', port: 3000})test('test config snapshot', () => { expect(generateConfig()).toMatchSnapshot()})test('test another config snapshot', () => { expect(generateA
关注
