再看最后一眼青春的星空

灿烂火光就像盛夏的烟火

欢送挣扎万年文明的巅峰

我们啊

将变星辰永远飘在黑暗宇宙

这个男人来自三体

Tirion

导航

随笔分类 -  前端

上一页 1 2 3 4 5 6 7 下一页

roc-charts 开发笔记:原生组件开发技巧——组件更新
摘要:最近开发一个前端工具,需要使用原生 JS 来开发组件,在开发一个下拉选择组件的过程中,一开始更新组件的功能——比如点击下拉列表选项更新选中状态,实现方式就是监听下拉列表选项的点击事件,然后修改当前选中的内容以及下拉列表中选中的内容。 这样的实现方式是常规实现,通过不断的操作 dom 来实现功能。但是 阅读全文

posted @ 2020-06-01 23:27 Tirion 阅读(270) 评论(0) 推荐(0)

webpack 将多个项目打包到同一个目录下的配置
摘要:一个项目分成多个子系统,每个子系统作为一个独立的项目开发,访问的时候通过 xxx.xxx.xxx/a 来访问其中一个子系统。 如图所示,a、b、c 为3个子系统,打包后会打包到 www 目录中形成 a、b、c 3个目录,项目部署后 http 服务指向 www 目录。 开发的时候 webpack 配置 阅读全文

posted @ 2020-04-27 09:53 Tirion 阅读(870) 评论(1) 推荐(0)

React.lazy 和 react-hot-loader 遇到的两个坑
摘要:今天升级了脚手架,重新配置懒加载使用 React.lazy,但是在配置的时候遇到两个坑,搞了很久才解决,在此记录一下。 一是在使用 React.lazy 来进行懒加载的时候,lazy() 里的 import() 组件始终不会进行代码分割,试了各种方法都没解决,而且代码看起来和各种教程都一样的,最后发 阅读全文

posted @ 2020-04-04 10:27 Tirion 阅读(1027) 评论(0) 推荐(0)

webpack-devserver 的 host 请配置 0.0.0.0
摘要:今天在虚拟机里使用 IE 访问 Mac 上的一个项目的时候,发现通过 Mac 的 IP 地址访问不了,而在 Mac 上却能通过 localhost 访问。 后来又试了下在 Mac 上通过 IP 地址访问也访问不了,说明这个项目没法通过本机 IP 来访问。 后来找到原因,原来是 webpack-dev 阅读全文

posted @ 2020-03-03 20:51 Tirion 阅读(4776) 评论(0) 推荐(0)

使用 xlsx 前端解析 excel 文件
摘要:首先安装 xlsx npm install xlsx 项目中引入 import XLSX from 'xlsx'; 上传组件,因为懒得写样式,这里使用的 antd 的 Upload 组件,使用 <input type="file" /> 也是可以的。 使用 customRequest 自定义上传 < 阅读全文

posted @ 2020-02-14 20:35 Tirion 阅读(1670) 评论(0) 推荐(0)

webpack4 打包 library 遇到的坑
摘要:output 中的配置,主要是 libraryTarget 和 umdNamedDefine。 另外一点就是在 babel 的配置中需要添加 "sourceType": "unambiguous" 这个配置。 因为 webpack4 不支持 export default 和 module.expor 阅读全文

posted @ 2019-11-14 10:21 Tirion 阅读(1647) 评论(0) 推荐(0)

roc-charts 开发笔记:广度优先查找无向无权图两点间最短路径
摘要:广度优先查找无向无权图两点间最短路径,可以将图看成是以起点为根节点的树状图,每一层是上一层的子节点,一层一层的查找,直到找到目标节点为止。 起点为0度,与之相邻的节点为1度,以此类推。 // 广度优先遍历查找两点间最短路径 breadthFindShortestPath(sourceId, targ 阅读全文

posted @ 2019-06-13 16:24 Tirion 阅读(816) 评论(0) 推荐(0)

即时搜索框输入中文未完成时会搜索英文字符的解决方案
摘要:动态搜索框在进行中文搜索时,通常情况下,输入下面这种情况的时候,会搜索 chengd 关键字,但这并不是我们想要的。 那么怎么解决呢?可以通过两个事件:onCompositionStart 和 onCompositionEnd 解决这个问题。 这两个事件都是在输入中文时才会触发,英文输入法不会触发。 阅读全文

posted @ 2019-05-22 11:39 Tirion 阅读(748) 评论(0) 推荐(0)

sass 插值语句的使用
摘要:定义了一个 px 转 rem 的函数 在使用 calc 的时候想要使用函数求值的时候遇到了需要使用插值语句来完成的情况 这里不能直接使用 remP(100),需要使用 #{} 差值语句将变量函数等求值才行 阅读全文

posted @ 2019-05-10 11:46 Tirion 阅读(324) 评论(0) 推荐(0)

函数防抖和函数节流的最简单解释
摘要:函数防抖:连续触发的事件,只会触发最后一次。每次触发的时候都会清除上一次待触发的。 函数节流:连续触发的事件,会按照一定的频率触发N次。每间隔一定的时间,必然会触发一次。 阅读全文

posted @ 2019-04-15 10:56 Tirion 阅读(160) 评论(0) 推荐(0)

roc-charts 开发笔记:查找图中两点的所有路径
摘要:把图看成以起点为根节点的树状图 使用深度遍历算法遍历路径 遍历到节点为目标节点时,保存这条路径 find2PointsPath(sourceId, targetId) { const { nodesKV } = this.chart.getStore(); // 节点集合 let pathArr = 阅读全文

posted @ 2018-09-05 16:42 Tirion 阅读(601) 评论(0) 推荐(0)

roc-charts 开发笔记:canvas——根据鼠标位置进行缩放的实现原理
摘要:以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1。然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放的功能。 代码示例: this.scale 是当前缩放比例,this.offsetX, this.o 阅读全文

posted @ 2018-08-07 14:38 Tirion 阅读(1433) 评论(2) 推荐(0)

async await 同时发起多个异步请求的方法
摘要:多个请求的时候不使用 await,而是拿到请求的 promise,将 await 用在 promise 上,等待 promise 返回 阅读全文

posted @ 2018-07-20 10:54 Tirion 阅读(4098) 评论(0) 推荐(0)

学习函数链式调用,获取对象字段避免报错
摘要:第一次调用传入对象和默认值(可选),之后的调用传入字段名,最后什么都不传调用得到返回值 toString 和 valueOf 在某些情况会执行,比如 console,而 react 的 JSX 中要展示内容,还是得执行最后的调用,否则只是返回个函数 阅读全文

posted @ 2018-07-17 17:26 Tirion 阅读(157) 评论(0) 推荐(0)

去除 chrome 上保存密码后的 input 框的屎黄色背景
摘要:网上找的设置 background-color,background-image 没用,后来找到这个方法测试有效:input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s;} 阅读全文

posted @ 2018-07-11 14:12 Tirion 阅读(156) 评论(0) 推荐(0)

webpack 配置别名,解决 import 时路径查找麻烦的问题
摘要:在编写代码时,使用 import 导入别的文件,可能会遇到查找路径麻烦的问题 比如这里的 ../../ 还要去思考多少个 ../ 那么可以在 webpack 中,将 src 目录设置一个别名,方便文件的导入 这时这样使用 @ 就表示 src 目录 在 scss 文件里也可以使用,只是写法略有不同 是 阅读全文

posted @ 2018-07-10 10:18 Tirion 阅读(306) 评论(0) 推荐(0)

Vue 中 diff 算法后更新 DOM 的方法
摘要:vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM。 网上的文章都是谈论的 diff 算法,而 diff 算法后如何取修改 DOM 没有太多说明。 我在源码中查 阅读全文

posted @ 2018-07-03 16:06 Tirion 阅读(437) 评论(0) 推荐(0)

React Native 开发环境搭建
摘要:1、安装 Python 2,不知道是否已支持 Python 3 2、安装 node,npm。。。 修改 npm 镜像,不建议使用 cnpm,cnpm 安装模块的路径与 npm 有差别 3、安装react-native命令行工具 4、安装 Android Studio 2.0 以上版本 Android 阅读全文

posted @ 2018-06-13 16:59 Tirion 阅读(166) 评论(0) 推荐(0)

JavaScript 堆排序详解
摘要:堆通常实现为全完二叉树,二叉堆一般分为两种:最大堆和最小堆。堆排序就是通过将数组转换成最大堆结构再进行排序。 参考: http://bubkoo.com/2014/01/14/sort-algorithm/heap-sort/ 《JavaScript数据结构与算法》 阅读全文

posted @ 2018-05-24 15:02 Tirion 阅读(226) 评论(0) 推荐(0)

JavaScript 快速排序详解
摘要:使用的是《JavaScript数据结构与算法》一书中的快速排序,并加上自己的理解。 经测试,此算法的速度比内置的 sort 更快!而阮一峰的那个快排更像是归并排序,虽然写法简单很多,但是性能很差,数组太大还会爆栈。 阅读全文

posted @ 2018-05-22 17:28 Tirion 阅读(222) 评论(0) 推荐(0)

上一页 1 2 3 4 5 6 7 下一页

The Man from 3body