摘要:最近开发一个前端工具,需要使用原生 JS 来开发组件,在开发一个下拉选择组件的过程中,一开始更新组件的功能——比如点击下拉列表选项更新选中状态,实现方式就是监听下拉列表选项的点击事件,然后修改当前选中的内容以及下拉列表中选中的内容。 这样的实现方式是常规实现,通过不断的操作 dom 来实现功能。但是
阅读全文
摘要:一个项目分成多个子系统,每个子系统作为一个独立的项目开发,访问的时候通过 xxx.xxx.xxx/a 来访问其中一个子系统。 如图所示,a、b、c 为3个子系统,打包后会打包到 www 目录中形成 a、b、c 3个目录,项目部署后 http 服务指向 www 目录。 开发的时候 webpack 配置
阅读全文
摘要:今天升级了脚手架,重新配置懒加载使用 React.lazy,但是在配置的时候遇到两个坑,搞了很久才解决,在此记录一下。 一是在使用 React.lazy 来进行懒加载的时候,lazy() 里的 import() 组件始终不会进行代码分割,试了各种方法都没解决,而且代码看起来和各种教程都一样的,最后发
阅读全文
摘要:今天在虚拟机里使用 IE 访问 Mac 上的一个项目的时候,发现通过 Mac 的 IP 地址访问不了,而在 Mac 上却能通过 localhost 访问。 后来又试了下在 Mac 上通过 IP 地址访问也访问不了,说明这个项目没法通过本机 IP 来访问。 后来找到原因,原来是 webpack-dev
阅读全文
摘要:首先安装 xlsx npm install xlsx 项目中引入 import XLSX from 'xlsx'; 上传组件,因为懒得写样式,这里使用的 antd 的 Upload 组件,使用 <input type="file" /> 也是可以的。 使用 customRequest 自定义上传 <
阅读全文
摘要:output 中的配置,主要是 libraryTarget 和 umdNamedDefine。 另外一点就是在 babel 的配置中需要添加 "sourceType": "unambiguous" 这个配置。 因为 webpack4 不支持 export default 和 module.expor
阅读全文
摘要:广度优先查找无向无权图两点间最短路径,可以将图看成是以起点为根节点的树状图,每一层是上一层的子节点,一层一层的查找,直到找到目标节点为止。 起点为0度,与之相邻的节点为1度,以此类推。 // 广度优先遍历查找两点间最短路径 breadthFindShortestPath(sourceId, targ
阅读全文
摘要:动态搜索框在进行中文搜索时,通常情况下,输入下面这种情况的时候,会搜索 chengd 关键字,但这并不是我们想要的。 那么怎么解决呢?可以通过两个事件:onCompositionStart 和 onCompositionEnd 解决这个问题。 这两个事件都是在输入中文时才会触发,英文输入法不会触发。
阅读全文
摘要:定义了一个 px 转 rem 的函数 在使用 calc 的时候想要使用函数求值的时候遇到了需要使用插值语句来完成的情况 这里不能直接使用 remP(100),需要使用 #{} 差值语句将变量函数等求值才行
阅读全文
摘要:函数防抖:连续触发的事件,只会触发最后一次。每次触发的时候都会清除上一次待触发的。 函数节流:连续触发的事件,会按照一定的频率触发N次。每间隔一定的时间,必然会触发一次。
阅读全文
摘要:把图看成以起点为根节点的树状图 使用深度遍历算法遍历路径 遍历到节点为目标节点时,保存这条路径 find2PointsPath(sourceId, targetId) { const { nodesKV } = this.chart.getStore(); // 节点集合 let pathArr =
阅读全文
摘要:以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1。然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放的功能。 代码示例: this.scale 是当前缩放比例,this.offsetX, this.o
阅读全文
摘要:多个请求的时候不使用 await,而是拿到请求的 promise,将 await 用在 promise 上,等待 promise 返回
阅读全文
摘要:第一次调用传入对象和默认值(可选),之后的调用传入字段名,最后什么都不传调用得到返回值 toString 和 valueOf 在某些情况会执行,比如 console,而 react 的 JSX 中要展示内容,还是得执行最后的调用,否则只是返回个函数
阅读全文
摘要:网上找的设置 background-color,background-image 没用,后来找到这个方法测试有效:input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s;}
阅读全文
摘要:在编写代码时,使用 import 导入别的文件,可能会遇到查找路径麻烦的问题 比如这里的 ../../ 还要去思考多少个 ../ 那么可以在 webpack 中,将 src 目录设置一个别名,方便文件的导入 这时这样使用 @ 就表示 src 目录 在 scss 文件里也可以使用,只是写法略有不同 是
阅读全文
摘要:vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM。 网上的文章都是谈论的 diff 算法,而 diff 算法后如何取修改 DOM 没有太多说明。 我在源码中查
阅读全文
摘要:1、安装 Python 2,不知道是否已支持 Python 3 2、安装 node,npm。。。 修改 npm 镜像,不建议使用 cnpm,cnpm 安装模块的路径与 npm 有差别 3、安装react-native命令行工具 4、安装 Android Studio 2.0 以上版本 Android
阅读全文
摘要:堆通常实现为全完二叉树,二叉堆一般分为两种:最大堆和最小堆。堆排序就是通过将数组转换成最大堆结构再进行排序。 参考: http://bubkoo.com/2014/01/14/sort-algorithm/heap-sort/ 《JavaScript数据结构与算法》
阅读全文
摘要:使用的是《JavaScript数据结构与算法》一书中的快速排序,并加上自己的理解。 经测试,此算法的速度比内置的 sort 更快!而阮一峰的那个快排更像是归并排序,虽然写法简单很多,但是性能很差,数组太大还会爆栈。
阅读全文