- 博客(105)
- 收藏
- 关注
原创 D3.js
D3.js(Data-Driven Documents)由 Mike Bostock (著名的计算机科学家和数据可视化专家)创建。是一个用于基于数据的文档操作的JavaScript库。它使用HTML, SVG, 和 CSS 来将数据生动地展现出来。D3.js 的核心理念是利用数据来驱动文档的生成和操作,使数据可视化成为可能。创建数据可视化,包括但不限于条形图、折线图、饼图、散点图、地图、树图、力导向图等。
2024-05-27 14:03:09
1204
原创 React项目中使用各表单库性能对比调研报告
通过进一步的研究和优化,我们可以更全面地了解表单库的性能表现,为开发者提供更实用的性能优化建议,从而更好地满足不同场景下的表单性能需求。Ant Design组件库中的组件,这个表单库提供了与UI组件高度集成的表单管理能力,同时保持了良好开发体验与其他组件ui的一致性。3.Formily不仅强调性能,还提供了一系列的React组件和Hooks,使得开发者可以构建出高度可定制和可扩展的表单。利用React Hooks提供的能力,提供了一个高性能的表单解决方案,以最小的重渲染次数和直观的API著称。
2024-05-27 14:01:34
718
原创 iframe通信——火狐浏览器兼容性案例
(2) 在iframe加载完成之后通知父容器,可以发送消息了。父容器在接收到发送消息指令后,发送相关消息,这样即可保证消息传输可被接收到。父容器在load的时候发送消息过去,但因为iframe那边还未加载完成,所以也就未收到展示消息,导致的想要的内容并未展示。火狐浏览器:在第一次之后onload的方法不会再执行,因为我们发送消息代码均放在onload中,所以不会被执行。第二个问题:iframe内容不更新,在log中发现。第一个问题:发现在火狐浏览器中log输出顺序。
2024-01-17 17:00:55
554
原创 Swagger转ts工具介绍-Pont
背景接口文档是前后端同学合作的有效交流媒介,但往往会存在前端同学认为后端提供的接口文档与实际情况不一致;后端同学可能会认为编写及维护接口文档会耗费不少精力;随着多个版本迭代,经常来不及更新,接口文档往往很容易就跟不上代码了诸如此类的问题。前端项目中使用ts,最大的痛点就是类型定义成本极高,且维护成本较高。同类型工具(在服务端使用swagger工具的基础上)swagger-to-ts,swaggts等多个生成typescript interface代码的插件(简单上手好用)缺点:只负责.
2022-03-29 21:23:43
4050
原创 业务通用函数总结-持续中
业务通用函数总结 @constant: constant(safe-area-inset-top); @env: env(safe-area-inset-top); @supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) { .container { :global(.navba.
2021-10-14 18:30:16
349
原创 js实现sleep的方式
使用promisefunction sleep(time) { return new Promise(resolve => { setTimeout(resolve, time) } )}使用:sleep(time).then(()=>{console.log(time, '时间后进行操作')})
2021-01-24 16:51:38
840
1
原创 上下布局高度自适应屏幕
标题要求上下布局: 高度撑满整个屏幕html<div class="layout"> <div class="header">111111</div> <div class="content"></div></div>方法一: 使用position:absolute定位脱离文档流的办法进行处理。 <style type="text/css"> * { m
2020-09-23 14:48:52
775
原创 发布订阅者模式
使用售楼处与买楼的一个例子太好理解了:eg: 买房的人(订阅者)和售楼部(发布者): 在房子开售的时候,售楼部发布可以买房的信息,买房的人收到可以买房的信息。发布-订阅模式的实现思路:1.首先确定好发布者2.然后给发布者一个缓存列表(订阅者集合),用于存放回调函数以便通知订阅者。3.发布消息的时候,发布者遍历缓存列表,依次触发里面存放的订阅者回调函数。代码:let event = { clientList: [], listen: function (key, fn)
2020-07-17 16:28:19
355
原创 Object.seal()和Object.freeze()
// Object.seal()封闭一个对象,阻止添加任何属性,将现有属性标记为不可配置对于当前属性如果之前是可写的就可以改变// Object.freeze()冻结的对象中的现有属性值是不可变的。let obj = { prop: function () { }, foo: 'bar'}// 对象中属性信息的查询console.log(Object.getOwnPropertyDescriptor(obj,'foo'))// 可读Object.freeze(obj)
2020-07-14 15:06:34
283
原创 webpack搭建一个项目
项目搭建步骤以项目命名一个新的文件夹npm init 项目初始化npm install --save-dev webpack webpack-cli -g 安装webpackwebpack.config.js 的 webpack 配置创建 src目录和index.js入口文件, 执行webpack --config ./webpack.config.js 生成 dist文件夹-------------------------以上简单的webpack项目配置完成----------------
2020-07-10 18:00:15
189
原创 sass中url加载找不到路径报错问题
关于sass中url加载找不到路径报错问题场景描述:当你的index.scss中@import了其他scss文件(eg:a.scss),如果a.scss里使用了url(),且里面的路径时相对路径,那么在sass-loader处理过后给css-loader处理时就会报错,找不到url路径资源。原因:当sass-loader处理时,会将index.scss里的a.scss合并,最后只输出index.scss,这个时候a.scss中的url()本来是以a.scss写的相对路径在合并的过程中又没有对
2020-07-10 11:34:55
3361
原创 两端对齐的三种方式
两端对齐的三种方式flex实现 .body { /*flex 使用*/ display: flex; justify-content: space-between; }内联元素方式实现 .body4{ /* 内联元素*/ text-align: justify; } .body4:after{
2020-06-12 15:56:08
2013
原创 删除对象属性的两种方式对比
delete操作符// 变量的直接引用,函数的参数或者函数名使用delete操作,会抛出语法错误const person = { one: '1111', two: '2222', three: '3333'}// 不可配置属性Object.defineProperty(person, 'four', {value: '4444', configurable: false})console.log(delete person.three)console.log(de
2020-06-12 15:44:20
2285
1
原创 本地环境配置(需获取客户端数据支持)
本地开发流程思路:正向代理+反向代理,无需客户端提供dev包。首先,你的测试机需要安装charles证书。> 目前大多客户端webview使用的前端链接均为https协议,charles代理https请求需要安装根证书,小米手机直接安装,无效,所以使用adb安装。首先检测,是否安装openssl,记得去官网下载,然后选择免费使用。之后就是配置环境变量了。检测openssl是...
2019-10-24 17:59:23
238
翻译 反向代理、负载均衡
反向代理:有一群服务器集群,并且服务器集群中的每台服务器内容一样时,我们要直接从个人电脑访问到服务器集群服务器的时候无法访问,必须通过第三方服务器才能访问集群。通过第三方服务器知道要访问哪一台服务器提供的内容,此时的代理方式称为反向代理。负载均衡在访问服务器集群的时候 ,用户的访问会先访问一个中间服务器,再让这个中间服务器在服务器集群中选择一个压力较小的服务器,将该访问请求引入选择的服...
2019-04-16 11:06:58
163
原创 vue组件定时刷新
遇到问题:需要定时刷新获取新的数据进行展示解决方法:setInterval()定时刷新备注:在vue项目中,我们该将刷新放在生命周期的mounted阶段。代码: //定时刷新 mounted() { if(this.timer){ clearInterval(this.timer) ...
2019-04-12 11:42:16
3755
1
原创 199. 二叉树的右视图
题目:题解:思路:递归,树的深度遍历代码:var rightSideView = function (root) { let res = []; let arr = []; dfs(root, 1) return res; function dfs(r, h) { //主要在这,递归结束条件 if (r ===...
2019-03-28 12:24:29
135
原创 101. 对称二叉树
题目:题解:代码:var isSymmetric = function (root) { return dfs(root, root) function dfs(p, q) { if (p == null && q == null) return true if (p == null || q == null) return...
2019-03-22 11:13:25
113
原创 102. 二叉树的层次遍历
题目:题解:思路:递归,追踪输的层次。代码:var levelOrder = function (root) { var res = [] let index = 0; travel(root, index) function travel(roots, index) { if (roots) { if (!res...
2019-03-21 11:54:39
215
原创 655. 输出二叉树
题目:题解:思路: 我们发现输出的数组的行数就是树的高度,列数就是树的高度的幂次方-1.求出树的高度利用二分法将节点值插入。代码:var printTree = function (root) { if (root === null) { return []; } let n = treeTop(root); let col ...
2019-03-21 11:51:16
274
原创 654. 最大二叉树
题目:题解:思路:使用递归,看到这个题的时候,我第一反应就是给出先序和中序遍历序列,构造二叉树,嗯啊,就是使用这个思路走的。虽然复杂度很高,但是还是很快跑出来了。代码:var constructMaximumBinaryTree = function (nums) { if (nums.length === 0) { return null } l...
2019-03-19 10:05:14
137
原创 100. 相同的树
题目:题解:递归(下次题目保证不用递归来写)代码:var isSameTree = function (p, q) { if (p === null && q === null) { return true } if ((p === null && q !== null) || (p !== null &&...
2019-03-18 10:20:17
100
原创 572. 另一个树的子树
题目:思路:递归代码:var isSubtree = function (s, t) { if (!s) return false if (isSub(s, t)) return true return isSubtree(s.left, t) || isSubtree(s.right, t) function isSub(treeS, treeT) {...
2019-03-15 18:18:05
86
原创 617. 合并二叉树
题目:题解:思路:(1)递归 (2)対树进行先序遍历,置null的节点为0,两个数进行相加代码://递归var mergeTrees = function (t1, t2) { if (t1 === null) return t2; if (t2 === null) return t1; t1.val += t2.val; t1.left = mer...
2019-03-15 10:44:11
154
原创 563. 二叉树的坡度
题目:题解:思路:递归方法,主要确定递归结束条件代码:var findTilt = function (root) { let start = 0 mutation(root) return start function mutation(root) { if (root == null) { return 0 ...
2019-03-14 10:00:05
158
1
原创 538.把二叉搜索树转换成累加树
题目:题解:思路:二叉搜索树的反向中序遍历。代码:var convertBST = function (root) { var start = 0;//初始设为0 var arr = []; var p = root; while (p || arr.length) { while (p) { arr.push(p...
2019-03-13 10:31:42
139
原创 235-二叉搜索树的最近公共祖先
题目:解题思路:递归,二叉搜索树两个点二叉搜索树:二叉查找树,主要特点是,父节点比左孩子大,比右孩子小,即左大又小。/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *...
2019-03-11 11:46:20
210
原创 动态import
eg:element.addEventListener('click',async()=&gt;{ const module=await import('./api-scripts/button-click.js') module.clickEvent()})
2019-03-05 14:30:15
806
原创 MongoDB安装
安装步骤(至于成不成功得看造化)传送门其实此参考源写的很清楚,大家也可以参考。下载:https://www.mongodb.com/download-center#community (选择对应版本下载,不用注册,下载后为.msi文件,双击该文件,按操作提示安装)注意:选择Custom,后面的安装最好记住安装地址,因为后面的配置都是基于地址的。创建数据目录(数据目录放在根目录下面,也就...
2019-02-26 15:21:14
163
原创 []==![]
为什么[]==![]最终的运行结果为true,内部发生了怎样的转换!运算符优先级比==高,所以先运算![],得到false.false在运算中会强制转换为0.[]强制转换为原始类型为“”。“”会强制转换为0。两侧都是number类型为0,所以0==0为true。...
2019-02-25 11:17:02
1776
原创 fatal: refusing to merge unrelated histories
git pull的时候报错(fatal: refusing to merge unrelated histories)原因:远程文件和本地文件不能自动合并解决:git pull origin master --allow-unrelated-histories注:master为分支名,你可以根据要pull的分支任意替换...
2019-02-20 11:04:35
105
原创 instanceof到底是怎样判断引用数据类型的!
拖延症。。。。得治啊!(才开始慢慢总结秋招中遇到的问题)问题是这样的:判断JavaScript数据类型的方法:(好了,那也就写一下咯)最常见的:typeof判断,但是它的缺陷是,返回的类型都是字符串形式typeof null ===object,它不能判断Array类型,判断出的数组类型是Object。在已知是对象类型时:instanceof那么,问题也就来了...
2018-11-13 16:59:40
1680
原创 关于parseInt()
先看一个题目:['1', '2', '3'].map(parseInt)上面题目的输出结果是:[1,NaN,NaN]这是为什么呢?parseInt函数有两个参数语法:parseInt(string, radix)string:要被解析的子符串(必需的)radix:可选参数(所以,我们一般不注意它),表示要解析的数字的基数,该值介于2~36之间。默认为10,如果该参数小于2或者大于...
2018-11-13 12:36:07
1007
1
原创 节流和防抖
节流和防抖作用:均是为节约计算机资源而生,也就是归属于优化方面原理:均使用setTimeout来存放待执行的函数,很方便的利用它的延时机制来确定合适的函数触发时机。节流定义:指定时间间隔内只能执行一次任务场景:懒加载图片加载的时候,scroll滚动条的判断时机实现:function throttle(fn, interval) { let canRun = true;...
2018-10-19 14:21:19
150
原创 text-overflow失效
使用场景:用…替换多余的文字css方法 text-overflow: ellipsis; overflow:hidden; white-space: nowrap;但是在表格中它是不生效的!!!如果在css方法中添加display:block和固定的宽度就ok! display: block; ...
2018-10-08 16:10:13
1991
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人