![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
DongFuPanda
这个作者很懒,什么都没留下…
展开
-
解决引入 peerjs 后的报错
项目中引入 peerjs 后,运行 webpack 时,eslint 报 warning。Critical dependency: the request of a dependency is an expression解决方法就是在 webpack 配置里加入一行代码:// ...module: { // ... exprContextCritical: false,}...原创 2021-04-07 14:28:57 · 446 阅读 · 0 评论 -
React 17.0.2 源码打包调试方法
更具体可见官网之如何贡献拉取代码,打包生成 react、react-dom、schedulergit clone https://github.com/facebook/react.gityarnyarn build react/index,react/jsx-dev-runtime,react-dom/index,scheduler --type=NODEcd build/node_modules/reactyarn linkcd build/node_modules/react-do原创 2021-01-29 17:10:06 · 597 阅读 · 0 评论 -
vue 之 next-tick 源码学习笔记
vue 官方文档上面对 nextTick 的说明如下,它接收回调函数和上下文对象作为参数。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。用法如下// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.nextTick(function () { // DOM 更新了})// 作为一个 Promise 使用原创 2021-01-02 22:36:31 · 204 阅读 · 0 评论 -
js array.length = 0 vs array = []
最近看到 vue 源码的 nextTick ,发现里面清空数组的方式是把 length 置零,有点好奇具体发生了什么。于是搜索一番,也顺便记录一番。const callbacks = []let pending = falsefunction flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 // <================ for (le原创 2021-01-02 16:59:27 · 782 阅读 · 1 评论 -
css 定制 input[type=“range“]
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* body {原创 2020-12-15 14:08:22 · 316 阅读 · 0 评论 -
React createPortal 弹窗 modal
我对弹窗的设想是:可定制宽高,append 到 body,fixed 定位容易定制样式,来适应不断变化的多种多样的需求在 React 中,要实现第一点,可用到 Portal 技术。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child, container)第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container)是一个DOM 元原创 2020-12-15 10:53:50 · 932 阅读 · 0 评论 -
create-react-app 配置 craco 支持 ant design 、less 和 css module
以下配置支持 ant design 、less、css module 和接口代理const path = require('path')const resolve = (dir) => path.join(__dirname, '.', dir)const CracoAntDesignPlugin = require('craco-antd')module.exports = { babel: { plugins: [['@babel/plugin-proposal-decora原创 2020-12-12 22:38:41 · 1887 阅读 · 3 评论 -
css 屏蔽父级样式的影响
<div class="parent"> <span>111111111111111</span> <span class="child">222222222222222</span></div>.parent { font-size: 20px;}.child { all: initial; // 隔离父级的样式}原创 2020-12-08 15:01:34 · 1896 阅读 · 0 评论 -
通过 ruffle 使用 WebAssembly 在网页上播放 swf 动画
flash 播放器将退出历史舞台,但是不能直接就抛弃 flash 动画,需要有顶替的方案。网上找到的就是用 webassembly 播放 swf 动画。github 上有个大神已经做出来了,而且经过测试基本动画播放都没啥大问题,大体上都能播放,也能交互,就是有些元素会丢失,具体原因不详。具体操作如下:使用文档:https://github.com/ruffle-rs/ruffle/wiki/Using-Ruffle#web下载最新的包(xxx_selfhosted.zip):https://gith原创 2020-11-25 11:32:07 · 1548 阅读 · 0 评论 -
前端项目利用 shell 自动提交代码并发布
我们公司早先采用 svn 来管理代码,开发结束后提交 svn,拿到版本号后,通过在 jekins 的界面输入版本号发布到 oss。这个流程相当原始,很多重复性的简单操作完全可以用工具代替,解放双手完成更多工作(卑微的打工人打工魂)后期,领导要求改用 git 来统一管理公司的所有开发代码,于是我们用 git 管理源码,然后 build 出来的代码需要手动复制到 svn 那边提交,可以说是更加繁琐了。是可忍孰不可忍,必须写点脚本来改进下了。PS: 暂时,我们公司没法做出大改变,所以只能在现有基础上做改进。原创 2020-11-24 22:09:03 · 482 阅读 · 0 评论 -
在 iframe 上无法捕获 mousemove
在父级给 document 添加 mousemove 时间,实现一个拖拽功能。当拖到 iframe 上方时,发现变得卡顿,开始还以为是代码要优化,后来发现是 iframe 搞的鬼。解决方法也很简单,在 mousedown 和 mouseup 给 iframe 添加个样式function onMouseDown() { document.querySelector('iframe').style['pointer-events'] = 'none' // ...}function onMouseU原创 2020-11-06 15:53:02 · 1385 阅读 · 4 评论 -
js 基础——图解原型链
原创 2020-10-18 10:08:56 · 114 阅读 · 0 评论 -
Axios adapter 实现缓存接口数据
直接上代码cache.jsimport axios from 'axios'/** * API * time 表示可缓存的时间,默认为 0,在没有清除内存之前永久缓存(浏览器窗口标签关闭,应用程序关闭等会清除内存) * * 防止重复提交 * time 设置一个极短的时间,比如 1000,就表示在1000毫秒之内不会重复向服务器发出请求 */// 数据存储export const cache = { data: {}, set(key, data) { this.da原创 2020-10-15 09:47:55 · 1422 阅读 · 1 评论 -
cors 简单请求和非简单请求
基本概念浏览器才存在跨域问题,后端不存在CORS(跨域资源共享)是解决跨域的一种方案,支持所有类型的HTTP请求浏览器将 CORS 跨域请求分为简单请求和非简单请求简单请求:head, get, post 中任一请求且请求的 header 是AcceptAccept-LanguageContent-LanguageContent-Type: 只限于三个值:application/x-www-form-urlencodedmultipart/form-datatext/plain原创 2020-09-26 22:11:19 · 704 阅读 · 0 评论 -
vue 响应式模拟
观察者模式观察者模式包含 subject(观察目标) 和 watcher(观察者) 两类对象。一个 subject 通常对应着多个 watcher,subject 的状态发生变化,所有 watcher 都会收到通知。观察者是知道 subject 的,subject 一直保持对观察者进行记录。(而发布订阅模式的发布者和订阅者不知道对方的存在,它们只有通过消息代理进行通信。)观察者模式大多数时候是同步的,而发布-订阅模式大多数时候是异步的代码可以直接运行调试let datalet activ原创 2020-09-19 22:49:49 · 100 阅读 · 0 评论 -
canvas 处理图片
canvas apisdrawImage 绘图getImageData 从 canvas 上截取指定区域putImageData 把图片对象放置到指定区域toDataURL 把 canvas 数据转成 base64代码<body> <canvas id="cvs" width="300" height="300"></canvas> <div id="img"></div></body>例子——移除单种颜色con原创 2020-09-06 11:00:56 · 173 阅读 · 0 评论 -
js 函数执行上下文
执行上下文(Execution Context)执行上下文又称执行环境。JavaScript 在内部创建的全局作用域(Global Scope),大致等效于 var window = Window()。浏览器打开 URL 时,会自动创建第一个执行上下文——全局作用域。执行上下文是由一个包含变量定义和 this 对象绑定的域派生的。在一个给定的执行上下文中的 this 对象,本质上指向了其操作的对象上下文。函数调用时会产生一个执行上下文,然后这个新创建的执行上下文会被放到调用栈(Execution St原创 2020-08-29 19:03:53 · 1087 阅读 · 0 评论 -
汉字按拼音首字母排序
按拼音首字母排序localeCompare() 方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。返回一个数字表示是否 引用字符串 在排序中位于 比较字符串 的前面,后面,或者二者相同。当 引用字符串 在 比较字符串 前面时返回 -1当 引用字符串 在 比较字符串 后面时返回 1相同位置时返回 0兼容性 ie 5.5 以上都行,可以放心使用了let list = ['张三', '李四', '王五', '赵柳']list.sort((a, b) => a原创 2020-08-28 09:45:16 · 1815 阅读 · 0 评论 -
事件循环与任务队列
JS 引擎堆-内存分配发生的地方栈-函数调用时会形一个个栈帧(frame)执行栈每一个函数执行的时候,都会生成新的 execution context(执行上下文),执行上下文会包含一些当前函数的参数、局部变量之类的信息,它会被推入栈中, running execution context(正在执行的上下文)始终处于栈的顶部。当函数执行完后,它的执行上下文会从栈弹出。事件循环与任务队列事件循环可以简单描述为:函数入栈,Stack 中执行到异步任务的时候,就将它丢给 WebAPIs,接着执行同原创 2020-08-25 23:08:35 · 334 阅读 · 0 评论 -
如何在 React Hook 中请求数据?
原文原创 2020-06-27 16:44:30 · 2565 阅读 · 0 评论 -
vue-cli3 打包优化之 splitchunks
Dllplugin 可以把常用库抽离出来,包括 vue,vuex之类的库。但是 ant design vue 是按需加载,且随时有可能引入新的组件,显然不适合放进 dll 中。直接和其他文件打进 vendor.js 有会很大,所以需要将其再单独抽离出来,我决定在 config.optimization.splitChunks 配置如下:const IS_PROD = process.env.NO...原创 2020-03-15 22:54:46 · 14163 阅读 · 2 评论 -
vue 图片裁剪组件 vue-cropper 教程
组件地址https://github.com/xyxiao001/vue-cropper// img-cropper 组件<template> <div> <div class="cropper-content"> <div class="cropper"> <vueCropper ...原创 2020-02-17 16:34:32 · 1131 阅读 · 0 评论 -
vue-cli4 打包优化之 moment 和 lodash
babel.config.jsmodule.exports = { presets: [ '@vue/app', [ '@babel/preset-env', { corejs: 3, useBuiltIns: 'entry' } ] ], plugins: [ 'lodash' ...原创 2020-03-14 23:27:56 · 2012 阅读 · 0 评论 -
vue-cli4 优化之 Ant Design Vue
按需加载babel.config.jsmodule.exports = { presets: [ '@vue/app' ], plugins: [ [ 'import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true } ] ]}兼容 ...原创 2020-03-14 22:32:02 · 1602 阅读 · 0 评论 -
vue-cli4 打包优化之 DllPlugin 和 DLLReferencePlugin
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。一般用来将常用的库,例如 vue,vuex 抽离出来,后续构建过程跳过这些库。既能加快打包速度,又能充分利用缓存。首先安装如下三个包,缺一不可。yarn add webpack-cli add-asset-html-webpack-plugin clean-webpa...原创 2020-03-14 21:41:53 · 4936 阅读 · 6 评论