- 博客(97)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 可视化神器pyecharts几行代码，快速绘制热力地图
自打上回和两个妹子合作一次美赛之后，最近被同学拉去当数模代码手（队里没有妹子，心生抗拒哈哈），负责处理下数据和coding一些比较好看的图表。刚巧有个需求是这样的：展示一下各省份的新冠肺炎无症状感染者人数分布（地理分布）。想了一下之前在Excel跟Matlab都有做过热力图，但没在python上试过，所以动手尝试了一下可视化神器pyecharts。安装目前pyecharts主要有v0.5.X 和 v1 两个大版本，相互之间有些函数的写法不太兼容。我图方便，还是用v0.5.1的版本，因为是用conda+p
2020-05-20 17:47:54
4353
原创 关于html5的video标签不能播放视频的问题及解决方法
最近实习过程中遇到了音频视频流的格式问题，进行了一些学习和总结。问题背景使用html5中的 video 标签去播放视频，但是发现有的flv/mp4格式的视频可以播放，有的flv/mp4格式的视频不能播放。而且视频不能播放，但音频可以播放（也就是音频编码格式是video可以解析的）。关于video标签的使用示例如下：<video width="400" controls="controls"> <source src="some.flv" type="video/mp4">.
2020-08-30 19:32:09
38954
10
原创 vue3为何放弃defineProperty，使用Proxy
一、先聊聊双向绑定原理Vue中监听数据变化，底层实现其实就是Vue面试者老生常谈的双向数据绑定。双向数据绑定，即view中的数据发生改变，这个变化会传递到model上；当model发生了改变，view中的数据也会对应更新。实现双向绑定的方式有很多，像Angular是基于脏检查的双向绑定，“脏检查”是一种很朴素的监听方法，笔者不才，只是略有了解。脏检查其实是一种效率比较低的方式，Angular的scope模型上设置了一个监听队列，这个队列中会有很多个watch，监听它在负责的model中是否有发生变化。A
2020-08-09 23:25:07
1391
原创 TypeScript基础学习记录
开坑typescript，记录基础部分的知识点参考教程：https://github.com/xcatliu/typescript-tutorial文章目录1、数据类型简单的数据单元：复杂一点的：任意值null和undefined2、类型推论3、联合类型4、接口——Interfaces5、数组的类型类数组any 在数组中的应用6、函数的类型函数声明函数表达式用接口定义函数的形状函数的可选参数参数默认值剩余参数重载7、类型断言语法用途1、将一个联合类型断言为其中一个类型2、将一个父类断言为更加具体的子.
2020-07-16 16:50:58
348
原创 inline-block常见问题、清除浮动两种情况
关于 inline-block水平间隙问题<div class="nav"> <div class="nav-item"><a>导航</a></div> <div class="nav-item"><a>导航</a></div> <div class="nav-item"><a>导航</a></div></div>.nav
2020-07-14 20:48:23
773
原创 选择器和格式化上下文回顾
选择器分组对于内容相同或者有重合部分的选择器，通过选择器分组可以减少代码量。关系选择器.block p {} // 后代.block > p {} // 子元素p ~ div {} // 后面的兄弟（们）p + div {} // 紧随其后的一个兄弟伪类选择器:link // 未被访问:visited // 访问过:hover // 鼠标悬停:active // 激活（鼠标点击与释放之间的事件）:first-child:nth-child(n):nth-last-chil
2020-07-14 14:45:21
183
原创 react 虚拟DOM的diff算法
文章目录浅谈传统 diff和React diff（16之前的diff）类型比较针对组件元素的比较对子节点进行递归keyReact中应该如何去配合diff算法提高性能？三大策略tree diffcomponent diffelement diff小结今天对diff算法（React16之前）进行了一些学习。浅谈传统 diff和React diff（16之前的diff）关于树转换成另一颗树的最小操作数这个问题，最前沿的算法（循环递归比较节点是否相同）的时间复杂度是O（n3）。即对两颗树的节点进行时间复杂
2020-07-13 17:17:39
192
原创 react学习记录-dangerouslySetHTML 和 style 属性
文章目录dangerouslySetHTML 和 style 属性dangerouslySetHTMLstyle课后习题dangerouslySetHTML 和 style 属性dangerouslySetHTML出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，就相当于 jQuery 里面的 text(…) 函数一样，任何的 HTML 格式都会被转义掉：class Editor extends Component { constructor()
2020-07-04 11:03:44
736
原创 ScriptOJ设计模式题目：实现一个EventEmitter
今天刷到一道设计模式相关的题目，最近学习redux的时候跳过来看这道题，感觉和dispatch和reducer的形式很相似，redux本身是一种观察者模式，指定action来修改数据，再通过类似广播的形式去更新视图。本题中则是指定事件进行订阅，我们只实现了action的过程，实际上方式是相似的。题目来源：#36 实现一个 EventEmitter题目：观察者模式在前端开发中非常常用，我们经常用的事件就是观察者模式的一种体现。它对我们解耦模块、开发基于消息的业务起着非常重要的作用。Node.js 原生
2020-07-02 00:20:43
161
原创 react学习记录-props.children 和容器类组件
文章目录props.children 和容器类组件小结课后练习props.children 和容器类组件有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。这种结构在实际当中非常常见，类似于名片。这种组件本身是一个不带任何内容的方形的容器，我可以在用这个组件的时候给它传入任意内容。先看一段这类容器类组件的实现代码：class Card extends Component { render () { return ( <div class
2020-07-01 23:40:47
288
原创 react学习记录-PropTypes 和组件参数验证
文章目录PropTypes 和组件参数验证PropTypesPropTypes 和组件参数验证JavaScript 语言的弱类型，让我们写代码很爽，但是也很容易出 bug。变量没有固定类型可以随意赋值，在我们构建大型应用程序的时候并不是什么好的事情。你写下了 let a = {} ，如果这是个共享的状态并且在某个地方把 a = 3，那么 a.xxx 就会让程序崩溃了。而这种非常隐晦但是低级的错误在强类型的语言例如 C/C++、Java 中是不可能发生的，这些代码连编译都不可能通过，也别妄图运行。大型
2020-07-01 23:39:46
313
原创 react学习记录-ref和React.js的DOM操作
文章目录ref 和 React.js 中的 DOM 操作课后习题ref 和 React.js 中的 DOM 操作React.js 并不能完全满足所有 DOM 操作需求，有些时候我们还是需要和 DOM 打交道。比如说你想进入页面以后自动 focus 到某个输入框，你需要调用 input.focus() 的 DOM API，比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画，等等。React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点，你可以给某个 JSX 元素加上
2020-06-27 01:22:27
273
原创 react学习记录-更新阶段的组件生命周期
更新阶段的组件生命周期关于更新阶段的组件生命周期：shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。componentWillUpdate()：组件开始重新渲染之前调用。componentDidUpdate
2020-06-27 01:21:16
126
原创 react学习记录-挂载阶段的组件生命周期
文章目录挂载阶段的组件生命周期constructor()、componentWillMount()、componentDidMount()componentWillUnmount()各个生命周期函数的具体使用场合课后习题挂载阶段的组件生命周期之前提到过我们定义的组件实际上等价于React.createElement 函数，它会将返回结果传给 ReactDOM.render。过程如下：// <Header /> ===> React.createElement(Header, null
2020-06-27 01:19:29
292
原创 react学习记录-状态提升
文章目录前端应用状态管理 —— 状态提升课后习题前端应用状态管理 —— 状态提升我们在使用state存放数据的时候，应当倾向于把数据放在父组件上，这是为了在父组件下的兄弟组件都在依赖或者影响这个数据的时候，能够进行共享。避免让两个子孙组件分别取得两个数据的备份，造成通信的障碍或者说不同步。我们把数据交给父组件，使得它的子孙组件都能通过props获取到数据的这种方式，叫做“状态提升”。总结一下：当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传
2020-06-27 01:18:50
158
原创 react学习记录-渲染列表数据
文章目录渲染列表数据渲染存放 JSX 元素的数组使用 map 渲染列表数据课后习题渲染列表数据在使用 React.js 处理列表数据的时候，需要掌握一些规则。渲染存放 JSX 元素的数组假设现在我们有这么一个用户列表数据，存放在一个数组当中：const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'Tomy', age: 22, gender: 'male' }, { username: '
2020-06-27 01:17:35
237
原创 react学习记录-state vs props
文章目录state vs props鼓励无状态组件state vs propsstate的主要作用，是用于组件保存、控制、修改自己的可变状态。一言概之，它在组件内部初始化、只能被组件自身修改，外部不能访问也不能修改。所以state是一个局部的、只能被组件自身控制的数据源，它的更新方式上通过setState，同时setState会导致组件的重新渲染。props的主要作用则是让组件的父组件可以传入一些配置参数，去定制该子组件。它从外部传入，组件内部无法控制也无法修改。除非组件外部主动传入新的props，
2020-06-27 01:16:55
123
原创 react学习记录-配置组件的props
文章目录配置组件的props默认配置（defaultProps）props是单向的（不可变）小结课后习题配置组件的props组件根据不同的使用场合要进行个性化配置，React.js的props就是起到这个作用。每个组件都可以接受一个props参数，它是一个对象，包含你对组件的所有配置，以点赞按钮为例：class LikeButton extends Component { constructor () { super() this.state = { isLiked: false
2020-06-27 01:16:09
192
原创 react学习记录-组件的state和setState
文章目录组件的state和setStatesetState 接受对象参数setState 接受函数参数关于setState的合并课后练习组件的state和setStatesetState 方法由父类 Component 所提供。当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。注意，当我们要改变组件的状态的时候，不能直接用 this.state = xxx 这种方式来修改，如果这样做
2020-06-25 23:54:02
213
原创 react学习记录-事件监听
文章目录事件监听React中的event 对象关于事件中的this课后习题事件监听在 React.js 不需要手动调用浏览器原生的 addEventListener 进行事件监听。React.js 帮我们封装好了一系列的 on* 的属性，当你需要为某个元素监听某个事件的时候，只需要简单地给它加上 on* 就可以了。而且你不需要考虑不同浏览器兼容性的问题，React.js 都帮我们封装好这些细节了。要注意的是，这些事件属性名都必须要用驼峰命名法。React中的event 对象事件监听函数会被自动传入
2020-06-25 23:48:27
841
原创 react学习记录-组件组合、嵌套和组件树
文章目录组件的组合、嵌套和组件树课后习题组件的组合、嵌套和组件树我们定义了Title和Header两个组件，并将Title置入Header组件当中，语法如下：class Title extends Component { render () { return ( <h1>React 小书</h1> ) }}class Header extends Component { render () { return (
2020-06-25 23:36:34
190
原创 react学习记录-组件的render方法
文章目录组件的render方法只能返回一个JSX表达式插入条件返回JSX元素变量课后习题组件的render方法React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component，并为这个组件子类实现一个render方法，这个render方法必须要返回一个JSX元素。只能返回一个JSX需要注意的是，返回多个并列的JSX元素是不合法的，我们需要用一个外层的JSX元素将它们包裹起来：
2020-06-25 23:35:11
781
原创 react学习记录-JSX原理
JSX 原理JSX的设计是为了能够方便用JavaScript来描述HTML标签，React.js 把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持，这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。比如说下面一份React代码：import React, { Component } from 'react'import Rea
2020-06-25 23:32:32
376
原创 react学习记录-类组件化理解
迫于生存压力开始补充（系统）学习React，参考了React.js小书的学习进程进行探索，记录一下我的学习思考，争取端午啃完它React.js 简单认识React.js似乎更加强调界面的组件化，比如说JSX的书写方式，类组件等等，都带着组件化的思维。在使用vue的时候，虽然有使用组件化的思想去构建界面，但无非就是模块化组件的代码，然后分别引入而已。尤其在做组件通信的时候，是会感觉到vue的一个组件化其实很不明显，通信机制也是比较麻烦的（在父子通信、兄弟通信和生命周期函数面前反复狗带）。相信Reac.
2020-06-25 23:31:21
171
原创 6月24日 leetcode四题 35/56/67/114
文章目录35、搜索插入位置Code56、合并区间Code67、二进制求和Code114、二叉树展开为链表Code35、搜索插入位置题源：https://leetcode-cn.com/problems/search-insert-position/给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。你可以假设数组中无重复元素。Code// 采用二分法，寻找插入位置，可以匹配则返回下标（类似indexOf方法）var sea
2020-06-24 23:53:07
144
原创 N皇后问题的JavaScript题解
一直都没会几道hard题，难得解出一道，分享一下题解。Leetcode原题：https://leetcode-cn.com/problems/eight-queens-lcci题目描述设计一种算法，打印 N 皇后在 N × N 棋盘上的各种摆法，其中每个皇后都不同行、不同列，也不在对角线上。这里的“对角线”指的是所有的对角线，不只是平分整个棋盘的那两条对角线。解题思路N皇后问题是一种搜索问题，每次摆放一个位置，会有多种可能。而每一步的选择将会影响下一步的可选范围。比如说有四个皇后的话，摆放第三.
2020-06-19 23:21:30
512
原创 6月19日 leetcode四题 18/24/29/1014
文章目录1014、最佳观光组合Code24、两两交换链表中的节点Code29、两数相除Code18、四数之和Code1014、最佳观光组合题源：https://leetcode-cn.com/problems/best-sightseeing-pair/给定正整数数组 A，A[i] 表示第 i 个观光景点的评分，并且两个景点 i 和 j 之间的距离为 j - i。一对景点（i < j）组成的观光组合的得分为（A[i] + A[j] + i - j）：景点的评分之和减去它们两者之间的距离。
2020-06-19 22:14:38
174
原创 剑指offer JS题解 (56)删除链表中的重复的结点
题目描述在一个排序的链表中，存在重复的结点，请删除该链表中重复的结点，重复的结点不保留，返回链表头指针。 例如，链表1->2->3->3->4->4->5 处理后为 1->2->5解题思路这道题是将重复出现的元素（两个及以上的元素）删除掉，不同于去重，需要做一点小小的修改。做这类题目的时候注意要添加虚拟的头结点，保证头结点满足重复条件的时候能被成功的删除。Code/*function ListNode(x){ this.val = x;
2020-06-17 18:03:43
126
原创 剑指offer JS题解 (57)二叉树的下一个结点
题目描述给定一个二叉树和其中的一个结点，请找出中序遍历顺序的下一个结点并且返回。注意，树中的结点不仅包含左右子结点，同时包含指向父结点的指针。解题思路leetcode上好像没有相关的题目，是在牛客上做的。首先要看一下树结点的结构，是具备左右结点的指针以及指向父节点的指针（next结点）的。这就使得我们在中序遍历时可以追溯二叉树要遍历的下一个结点。那我们中序遍历的时候是怎么做的？左-中-右。现在给到一个结点pNode，它可以是在左中右这三个位置上，所以需要具体讨论。首先第一个情况：结点作为根节点，此
2020-06-17 14:55:18
176
原创 剑指offer JS题解 (58)对称的二叉树
题目描述请实现一个函数，用来判断一颗二叉树是不是对称的。注意，如果一个二叉树同此二叉树的镜像是同样的，定义其为对称的。解题思路建议画图走一下哈哈，这道题虽然做过几遍了，但还是有点忘了。剑指offer里面提供了一道镜像二叉树，还有一道是这道对称二叉树。对称二叉树其实就是，从根节点开始，其左右子树是镜像关系，这就是对称。因此，只要嵌入之前写过的镜像二叉树的函数模块即可。这道题用递归写起来很漂亮，首先，根节点为null，是对称的。接着，对左右子树进行判断：1、假如左右子树的根节点皆为空，那么可以视
2020-06-17 12:41:21
118
原创 剑指offer JS题解 (30)连续子数组的最大和
题目描述HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学。今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决。但是,如果向量中包含负数,是否应该包含某个负数,并期望旁边的正数会弥补它呢？例如:{6,-3,-2,7,-15,1,2,2},连续子向量的最大和为8(从第0个开始,到第3个为止)。给一个数组，返回它的最大连续子序列的和，你会不会被他忽悠住？(子向量的长度至少是1)解题思路这是一道动态规划题目，加入用sum[i]表示以第i
2020-06-17 12:11:00
113
原创 剑指offer JS题解 (59)按之字形顺序打印二叉树
题目描述请实现一个函数按照之字形打印二叉树，即第一行按照从左到右的顺序打印，第二层按照从右至左的顺序打印，第三行按照从左到右的顺序打印，其他行以此类推。解题思路用栈存储每一层的结点序列，根据层次的奇偶来改变下一层结点的排列顺序（从左到右或者从右到左）。Codefunction Print(pRoot){ // write code here if(!pRoot) return []; let res=[]; let stack=[pRoot]; let k
2020-06-17 00:08:39
172
原创 剑指offer JS题解 (60)把二叉树打印成多行
题目描述从上到下按层打印二叉树，同一层结点从左至右输出。每一层输出一行。解题思路用两个队列，进行层次遍历和输出。一个外部的队列存储当前层次的结点，另一个内部的临时队列存储下一层要遍历的结点。Codefunction Print(pRoot){ // write code here if(!pRoot) return []; let res=[]; let queue=[pRoot]; while(queue.length){ let new
2020-06-16 23:28:29
138
原创 剑指offer JS题解 (61)序列化二叉树
题目描述请实现两个函数，分别用来序列化和反序列化二叉树二叉树的序列化是指：把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串，从而使得内存中建立起来的二叉树可以持久保存。序列化可以基于先序、中序、后序、层序的二叉树遍历方式来进行修改，序列化的结果是一个字符串，序列化时通过 某种符号表示空节点（#），以 ！ 表示一个结点值的结束（value!）。二叉树的反序列化是指：根据某种遍历顺序得到的序列化字符串结果str，重构二叉树。例如，我们可以把一个只有根节点为1的二叉树序列化为"1,"，然后通过自己
2020-06-16 22:53:49
138
原创 6月14日 leetcode四题 75/160/328/1300
文章目录75、颜色分类Code160、相交链表Code328、奇偶链表Code1300、转变数组后最接近目标值的数组和Code75、颜色分类题源：https://leetcode-cn.com/explore/interview/card/top-interview-questions-medium/50/sorting-and-searching/96/给定一个包含红色、白色和蓝色，一共 n 个元素的数组，原地对它们进行排序，使得相同颜色的元素相邻，并按照红色、白色、蓝色顺序排列。此题中，我们
2020-06-14 21:49:25
140
原创 6月13日 leetcode四题 3/5/49/334
文章目录49、字母异位词分组Code3、无重复字符的最长子串Code5、最长回文子串Code334、递增的三元子序列Code49、字母异位词分组题源：https://leetcode-cn.com/explore/interview/card/top-interview-questions-medium/29/array-and-strings/77/给定一个字符串数组，将字母异位词组合在一起。字母异位词指字母相同，但排列不同的字符串。说明：所有输入均为小写字母。不考虑答案输出的顺序。Co
2020-06-13 21:40:33
175
原创 LeetCode js题解 两数之和I/II/IV、三数之和/最接近的三数之和
把两数之和和三数之和的题目都刷了一遍，熟悉一下这类题。两数之和题源：https://leetcode-cn.com/problems/two-sum题解通过目标数减去当前数，在哈希表中寻找存在的组合，两次遍历可以完成，当然还可以缩减到一次遍历。这种类似于用哈希表做登记的思路是比较简单也容易想到的，leetcode只要求输出一组结果，所以找到直接return即可。Codevar twoSum = function(nums, target) { if(nums.length<=.
2020-06-06 18:42:54
601
原创 vue+element-ui实现优雅的emoji表情框
终于把表情包的功能实现了????，网上很多用本地图库、雪碧图之类的，愣是没找到几个适合我的解决方案，于是从amio/emoji.json上面找了一个JSON文件，然后简单实现了自己聊天系统上面的一个默认表情功能。文章目录引入JSON文件Codetemplatecssscript效果JSON文件参考文章与资源引入JSON文件const appData = require("../static/utils/emoji.json");Codetemplate表情框组件，通过slot插槽按钮触发显示
2020-06-05 22:39:45
13749
23
原创 看完这篇，深入了解JavaScript中的Unicode
最近在看emoji表情列表在前后端的展示，拜读了阮一峰老师的博客，对Unicode在JavaScript中的使用有了一些理解，记录下学习思路。文章目录什么是Unicode?编码方式的不同（UTF-32与UTF-8）UTF-32的局限性UTF-8的优势UTF-16简介UTF-16的转码公式问题来了，JavaScript用的是哪种编码方式？UCS-2溯源JavaScript的诞生背景JavaScript字符函数的局限性ES6对Unicode识别的加强（1）正确识别字符（2）码点表示法（3）字符串处理函数（4.
2020-06-05 01:01:32
891
emoji表情本地JSON文件
2020-06-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人