- 博客(41)
- 收藏
- 关注
RSS订阅原创 为什么Vue3双向绑定使用Proxy
一文搞懂Object.defineProperty和Proxy，Vue3.0为什么采用Proxy？vue 3.0 Proxy的使用
2024-01-29 09:37:45
503
原创 变动观察器 MutationObeserver Web API
MutationObserverMutationObserver.observe()config的配置项定义DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。 var observer
2022-04-11 20:56:08
211
1
原创 js中 forEach循环异步任务的执行顺序
forEach中 异步任务的执行顺序.先看代码<script> let promiseTask = (num) => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(num * num); resolve(true); }, 1000)
2022-03-10 22:16:14
5758
原创 跨页面通信
同源页面间的跨页面通信BroadCast Channel// 发送广播const bc = new BroadcastChannel('flashPage'); bc.postMessage({ msg: 'flashPage', from: 'index.js',});// 监听广播const bc = new BroadcastChannel('flashPage'); bc.onmessage = (e) => { const data =
2022-01-13 09:49:49
274
原创 单页面路由实现原理-hash
前端开发中的路由,其实就是操作url地址改变浏览器地址内容区切换内容hash的特点改变url的时候, 不会刷新页面当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（location.hash）。hashchange 用它来监听url路径变化实现一个最简单的hash单页应用事件委托window.location.hash改变hashchange事件监听改变页面内容<!DOCTYPE html><html
2021-11-10 23:42:16
843
原创 Map与 WeakMap 及WeakMap的主要作用
概念ES6 提供了 Map 数据结构. 它类似与对象,也是键值对的集合. 但是 ‘键’ 的范围不限于字符串,各种类型的值(包括对象) 都可以当作键. Map 也实现了 Iterator接口, 所以可以使用 扩展运算符 和 for...of... 进行遍历.Map 键值对的集合是 对 键去重. 值可以是重复的.Map 的属性和方法如果存在相同的键，则会按照FIFO（First in First Out,先进先出）原则，后面的键值信息会覆盖前面的键值信息。1. size属性: 返回Map的元素的
2021-11-10 22:36:22
544
原创 实战 react-redux 在vite 中的应用
关键点多个reducer 如何统一导出如何在dispatch时 指定对应的reducer如何在每个 reducer 中初始化自己的state.项目githttps://github.com/zsz91/vite-react 欢迎fork直接上代码store.tsimport { createStore,combineReducers } from 'redux';import reducers from '../reducer';export default createStore(
2021-09-16 13:36:28
606
原创 主流前端框架的实现原理
主流前端框架的实现原理StackOverflow 报告 2021热门Web领域框架(前后端)排名SvelteASP.NET CoreFastAPIReact.jsVue框架开发的应用抽象(3层)应用 => 组件 => 节点最小的单位是节点节点+ 业务逻辑 = 组件多个组件 = 应用框架的工作原理UI = f(state) // UI 是视图 state是状态 f是框架内部的运行机制框架之间的区别主要是***更新粒度***的区别 应用级 > 组件级 &
2021-08-31 23:40:23
616
原创 使用commonjs加载React组件模块
为什么要用commonjs 加载组件需求场景: 现在有大量的子组件存放在对应文件夹, 但是我在父组件每次只需加载其中一个即可,我不想一次性导入大量的子组件,然后加判断筛选出对应组件。这样代码可能会非常多、杂( 比如我有20个子组件,那么我要写20个import);于是我通过require动态载入直接上代码import React from 'react';const options = [ // 组件列表 { label: '纯布局组件', value: 'Parent',
2021-08-31 17:41:35
472
原创 MutationObserver 变动观察器
MutationObserverMutationObserver.observe()config的配置项定义DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。 var observer
2021-08-19 10:40:51
287
原创 IntersectionObserver API 交叉观察器
阮一峰教程MDN实战定义Intersection Observer API提供了一种异步检测目标元素与祖先元素或 “视口”(viewport) 相交情况变化的方法。特性IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。宏任.
2021-08-18 11:04:17
247
原创 Chrome调试技巧
断点条件断点条件断点，当表达式为 true 时才会暂停，经典应用场景是当 bug 是偶现时，你需要知道入参什么的正不正常，你可以打一个你认为不正常的条件断点，看看是谁调用的。PS：值得注意的是，如果你的表达式报错，那这个断点就会不生效，需要甄别到底是报错引起的断点没进入还是真的没进入记录点当代码执行到这里时，会在控制台输出你的表达式，不会暂停代码执行，下图是将 a 输出到控制台的例子。性能当你做了一些操作，不确定到底执行了什么代码时，可以利用 performance 来捕获到底什么样的代码被执
2021-08-04 16:25:30
112
1
原创 CommonJS 与 ES6 Module 的区别
出处 《Webpack实战 - 入门、进阶与调优》第2章 模块打包动态与静态CommonJS 模块依赖关系的建立发生在代码运行阶段,CommonJS模块的导入、导出发生在代码的运行阶段 (动态)ES6 Module 模块依赖关系的建立发生在代码编译阶段,ES6 不支持导入的路径是一个表达式.(静态)ES6的主要优势 P27死代码检测和排除 (通过静态分析可以在打包时去掉未曾使用过的模块，以减小打包资源体积)模块变量类型检查编译器优化 (导出的值可以是一个简单的变量,减少了引用层级,.
2021-07-30 07:48:47
128
原创 使用Babel.transform 转换 jsx代码为js代码并执行
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
2021-07-19 17:46:26
1433
原创 HTTP1 HTTP1.1 HTTP2主要区别及 HTTP3
图片出处: https://www.bilibili.com/video/BV1p541147LD官方说明: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP看图同样的html页面 因为http协议不同 页面加载速度完全不同http1.0 每一次请求都会进行建立连接与断开连接的操作http1.1 只有建立连接1次 断开连接1次Chrome浏览器最多同时建立6个连接.h
2021-07-08 09:26:59
763
原创 老旧项目中使用react 和 antd
起因没有webpack等构建工具的老旧项目(jquery等开发的) 但是需要维护,修改部分功能没有react,开发效率太低下.老旧代码太难读懂,且没有学习价值.具体步骤加载以下文件(js, css) 可在react官网 和 antd-design官网中下载<script src="scripts/react/react.production.min.js"></script> <!--react--><script src="scripts/r
2021-07-02 00:22:42
316
原创 setState 同步异步 半自动批处理 React18全自动批处理
什么是批处理(batchedUpdates)：React会尝试将同一上下文中触发的更新合并为一个更新批处理的好处合并不必要的更新，减少更新流程调用次数状态按顺序保存下来，更新时不会出现「竞争问题」最终触发的更新是异步流程，减少浏览器掉帧可能性批处理的几种类型v18的「批处理」是自动的v18之前的 React 使用半自动的「批处理」.React同时提供了一个API 手动 「批处理」unstable_batchedupdates .半自动批处理在v18之前，只有事件回调、生命周.
2021-06-21 07:59:33
973
原创 CSS3 元素轮播 无js代码方案
核心要点使用帧动画滚动使用overflow hidden 隐藏不应该显示的元素重复渲染头帧的元素(1,2,3,4) 保证动画是连贯的<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="view
2021-06-16 22:27:42
119
原创 antv-G2实战 条形图
官网https://g2.antv.vision/zh/examples/case/bar#bar2HTML 代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>测试</title> <style> body { width: 100vw; height: 100vh;
2021-06-16 15:06:49
609
原创 低代码大数据可视化页面前端方案
主要技术react 16.x, umi 3.x, css3 grid布局, echarts 5.1,monaco-editor,antd实现思路react component=fn(props), 使用react hooks 组件+props 渲染整个页面, 通过一个对象 保存所有组件的 状态 , 对象的 key 是组件在整个组件树中的唯一key(id) , 对象的 value是组件的props使用 css-grid 栅格布局 实现页面可控制.使用monaco-editor 编辑底代码, 使
2021-06-08 09:45:59
1156
原创 css3 相册3d旋转效果
demo:https://codepen.io/dudleystorey/pen/kiajB核心样式分析perspective: 1200px;透视transform-style: preserve-3d;开启3dtransform-origin : 变形参考点-webkit-box-reflect: 元素倒影transform: 变形最终代码less(css)outSideDiv{ margin: auto 0; position: relative; span{
2021-06-04 08:52:44
87
原创 JavaScript中的 toString
官方： https://developer.mozilla.org/zh-CN/search?q=toStringObject 中有 toString() 方法 以下对象 重写了自己的 toString()方法location.toString() 方法返回包含整个URL的USVString。它是Location.href的只读版本。// Let's imagine an <a id="myAnchor" href="https://developer.mozilla.org/en-US/d
2021-05-13 15:53:02
133
原创 React 拖拽组件 以及 实现组件嵌套
关键技术点HTML5 draggablewebApi Drag https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drag_eventreact-dom 在指定dom节点插入dom组件核心代码import React, {useContext, useEffect, useRef} from 'react';import {Button} from 'antd';import {BasicContext} from '.
2021-05-12 11:09:39
742
原创 原型链接点__proto__ 原型属性prototype
prototype: 函数(类)的一个属性: 是一个对象 {}__proto__: 对象Object的一个属性: 是一个对象 {}.类与他的实例中的原型关系类的prototype.constructor指向类类实例的__proto__指向类的prototype等价于 对象的__proto__保存着该对象的构造函数的 prototype类实例的constructor指向类类实例没有prototype属性。__proto__类似数据结构中的链表，__proto__本身包含着一个__proto.
2021-04-23 15:58:20
165
原创 自己写一个 Reacthooks 的 useState函数
核心思想链表环状链表队列顺序执行/** * 实现一个 react hooks的 useState */let isMount = true;let workInProgressHook = null; // 全局的链表 当前执行的 state function App(){ const [num, updateNum] = useState(0); const [num1, updateNum1] = useState(22); const [num2, u
2021-04-22 14:22:03
114
原创 为什么react要使用JSX
官方文档什么是JSX?1.一个 JavaScript 的语法扩展为什么使用JSX?React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。在html文件中不使用JSX 创建dom 节点react<script crossor
2021-04-21 15:10:07
643
原创 react-pdf 实战实例
主要技术 react-pdf， react（lazy Suspense） react-dom节点的插入, 原生Dom节点的插入与删除import React, {lazy, Suspense} from "react";import ReactDOM from "react-dom";function isMobile(){ let info = navigator.userAgent; let agents = ["Android", "iPhone", "SymbianOS", "Wi.
2021-03-23 11:58:49
718
1
原创 monaco editor 在React中的使用 封装成组件
import React, {useEffect, useRef, useState} from 'react';import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';/** * 2021年2月26日 13:20:14 * MonacoEditor 组件 * props详情 请看下方 const { style = .....} * */function App(props) { const { .
2021-03-04 19:33:19
1489
1
原创 javaScript 调用百度翻译Api Demo 使用例子 范例
// 百度翻译Api 中文翻译成英文 是一个辅助功能插件import Md5 from './md5.min';const info = { apiServer: window.location.protocol === 'http:' ? 'http://api.fanyi.baidu.com/api/trans/vip/translate' : 'https://fanyi-api.baidu.com/api/trans/vip/translate', from: 'zh', .
2021-03-03 14:28:04
1545
1
原创 Antd Ant Design Form Form.List 使用Demo 使用方法
import React, {useState, useEffect} from 'react';import {Modal, message, Form, Button, Space, Select, Input} from 'antd';import styles from './index.less';import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons';export default function Bat.
2021-03-03 14:21:25
6258
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人