- 博客(48)
- 收藏
- 关注
RSS订阅原创 使用canvas实现一个小小的截图功能
???? 效果图话不多说，先看下效果???? 实现思路???? 难点截图动画效果计算截取区域生成&获得截取区域图片???? 完整代码1. html部分import React, { ReactElement, useEffect, useRef, useState } from 'react'import './index.less'export default () => { const clipAreaWrap = useRef(null) // 截图区
2021-08-24 19:57:13
5654
原创 React-Router源码解读
???? 问题背景目前保险业务用的是react技术栈，在开发过程中遇到了两个路由相关的奇怪问题：【示例代码】在使用React—Router的basename功能的时候发现，无论是使用 HashRouter 还是 BrowserRouter，路由中有没有basename都能够匹配到对应的组件，哪怕我们已经给路由加上了 exact 即严格匹配规则.[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PXbZgZW2-1606137379914)(https://tech-p
2020-11-26 17:40:50
725
原创 Something about Docker
以前如果要部署一个APP物理服务器 + 操作系统（window or linux）+ App问题：物理服务器部署非常慢：买服务器 + 部署到机房 + 安装操作系统 + 安装App（可能需要很多环境的依赖）成本高：服务器很贵 哪怕app所需资源很少资源浪费难于迁移和扩展：迁移：如果想要迁移App需要额外再准备一台新的服务器 再把以上流程再走一遍 扩展：用户增长快，无法做扩展，买一个更好的服务器在迁移 就很复杂被限定的硬件厂商限定：物理硬件以前不一定是x86 还有其他的平台系统，如果选定了
2020-09-25 11:42:43
152
原创 有关JSX
最近使用JSX遇到了一些困惑比如下列几种情况，正确的有哪些？1.import * as React from 'react'import { render } from 'react-dom'const rootElement = document.getElementById('root')const app = <div>I am Sally</div&...
2020-04-18 07:40:50
245
原创 lintCode 846. 多关键字排序之python实现
class Solution: """ @param array: the input array @return: the sorted array """ def multiSort(self, array): self.quickSort(array, 0, len(array) - 1, 1, False) left...
2019-07-06 14:39:58
252
原创 LintCode 595. 二叉树最长连续序列 之python实现
描述中文English给一棵二叉树，找到最长连续路径的长度。这条路径是指 任何的节点序列中的起始节点到树中的任一节点都必须遵循 父-子 联系。最长的连续路径必须是从父亲节点到孩子节点（不能逆序）。您在真实的面试中是否遇到过这个题？是题目纠错样例样例1:输入:{1,#,3,2,4,#,#,#,5}输出:3说明:这棵树如图所示 1 \ ...
2019-06-16 20:28:17
371
原创 剑指offer-对称的二叉树之python实现
root是否为none的判断要放在值的判断之前class Solution: def isSymmetrical(self, pRoot): if pRoot == None: return True return self.helper(pRoot, pRoot) def helper(self, ...
2019-05-06 18:36:15
211
原创 剑指offer-二叉树的下一个结点之python实现
class Solution: def GetNext(self, node): if node == None: return None if node.right: node = node.right while node.left: node...
2019-05-06 18:36:09
153
原创 剑指offer-删除链表中重复的结点之python实现
"""Definition of ListNodeclass ListNode(object): def __init__(self, val, next=None): self.val = val self.next = next"""class Solution: """ @param head: head is the...
2019-05-06 18:35:59
254
原创 剑指offer-链表中环的入口结点之python实现
class Solution(object): def detectCycle(self, head): if head == None: return None fast, slow = head, head while fast != None: if fast.next and s...
2019-05-06 18:35:53
94
原创 剑指offer-孩子们的游戏(圆圈中最后剩下的数)之python实现
class Solution: def LastRemaining_Solution(self, n, m): if n == 1 or m == 0: return -1 arr = [] for i in range(n): arr.append(i) index =...
2019-05-06 18:35:45
409
原创 剑指offer-把二叉树打印成多行之python实现
"""Definition of TreeNode:class TreeNode: def __init__(self, val): self.val = val self.left, self.right = None, None"""class Solution: def serialize(self, root): ...
2019-05-06 18:35:31
184
原创 剑指offer-二叉搜索树的第k个结点之python实现
# -*- coding:utf-8 -*-# class TreeNode:# def __init__(self, x):# self.val = x# self.left = None# self.right = Noneclass Solution: # 返回对应节点TreeNode def Kth...
2019-05-06 18:35:23
234
原创 剑指offer-数组中出现次数超过一半的数字之python实现
class Solution: def MoreThanHalfNum_Solution(self, numbers): left, right = 0, len(numbers) - 1 index = self.helper(numbers, left, right) mid = int(len(numbers) / 2) ...
2019-05-06 18:35:04
106
原创 剑指offer-跳台阶之python实现
递归：def jumpFloor(number): if number <= 2: return number return jumpFloor(number - 2) + jumpFloor(number - 1)动态规划def jumpFLoor(number): dp = [0] * (number + 1) if ...
2019-05-06 18:34:47
208
原创 Vue组件实现触底判断
非常简陋的代码，以后有空回来完善子组件代码<template> <div class="scroll"></div></template><script> export default { name:'Scroll', methods:{ scrollEvent(){ if (document....
2019-04-29 15:07:55
3351
1
原创 Js实现数字动态滚动效果
生成gif后有点卡顿，实际上是很流畅的。完整代码如下DOM<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #root{ display: flex; justify-content: center;...
2019-04-29 12:06:03
10743
1
原创 React之diff算法源码解析
没时间详细写 都写在注释里面了，有空细说diff.jszzvar _ = require('./util')var patch = require('./patch')var listDiff = require('list-diff2')function diff (oldTree, newTree) { var index = 0 var patches = {} ...
2019-04-27 14:55:02
685
原创 剑指offer-和为S的两个数字之python实现
class Solution: def FindNumbersWithSum(self, array, tsum): if len(array) == 0: return [] if ...
2019-04-20 21:53:32
183
原创 剑指offer-和为S的连续正数序列之python实现
class Solution: def FindContinuousSequence(self, tsum): if tsum < 3: return [] if tsum == 3: ...
2019-04-20 20:54:40
248
原创 用promise和ajax封装axios
尝试着写了一下 肯定有很多不足之处~欢迎大家指出！function myaxios(options = {}){ let method = options.method; let url = options.url; let data = options.data; if (method == 'get') { this.get(url) } if (method == 'p...
2019-04-20 13:20:49
359
原创 lintcode41 最大子数组
我的代码 def maxSubArray(self, nums): total = 0 i = 0 maxnum = float('-inf') for i in range(len(nums)): if total + nums[i] < 0: total =...
2019-04-19 21:18:01
108
原创 HTML5之Canvas
1.绘制矩形<!DOCTYPE html><html><head> <title></title></head><body> <canvas id="canvas" height="400" width="400"></canvas></body><s...
2019-04-15 13:50:28
131
原创 圣杯布局及原理详解之浮动，负margin，百分比
之前看网上的双飞翼和圣杯布局讲解，很多博文都是大概讲了讲原理，但并没有深入，让我这个菜鸟经常看的一知半解的，今天算是把这个原理给弄懂了，特地写一篇博文详细解答双飞翼布局的原理圣杯布局利用float实现一个三栏布局，左右定宽，中间自适应，dom结构如下，注意middle的盒子必须放在第一，后面会解释为什么。然后三栏都设置float：left，左右栏定宽200px，中间宽度设置为100%...
2019-04-13 13:24:21
2247
转载 ES6之Class与继承
5）this 的指向类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); }}const...
2019-04-12 14:27:54
127
原创 webpack报错及解决办法
1. TypeError: validateSchema is not a function在学习webpack的时候遇到了validateSchema is not a function这样一个问题，反复检查自己的webpack.config.js配置是没问题的，但是无论怎么样还是报这个错。按照上面的提示信息找到这个conver-argv.js文件里出错的地方。 提示信息...
2019-04-05 11:29:59
2330
原创 Vue实现日历小插件
先看下效果图吧~ 如下源码可见于我的github：https://github.com/Sallywa/Calender/tree/master/Calender-Project实现关键点：1.组件的复用以及父子组件传值 很明显每年每个月的月历样式（数据不一样）是一致的，那么自然而然思路就是把每个月作为一个公用组件进行复用十二次，这样就避免了多次重复的代码...
2019-03-31 12:07:05
2392
原创 JS实现图片懒加载以及遇到的坑
本文参照了博文：http://axuebin.com/blog/2017/08/19/javascript-lazyload/在他的基础上做了一些改动为什么要图片懒加载因为一个图片就是一个请求，请求多了，自然浏览器的渲染速度下降，图片懒加载就是解决这个问题的一个方法。还有一个方法是使用雪碧图，可以看我另外一个blog。所谓的图片懒加载就是一开始就不加载所有的图片，而是当我们滚动到图片...
2019-01-30 15:24:06
1060
原创 CSS3 用animation画一个钟～
闹钟的效果如下dom <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="
2019-01-29 15:43:21
262
原创 webpack4学习之路
1.webpack的用处1.1 打包 把多个文件打包成一个文件，减少服务器压力1.2 转化 less/stylus/sass 需要loader进行转化1.3 优化2.webpack配置文件webpack.config.js2 入口出口2.1 最简单的配置文件，只包含入口和出口, 注意output里面的path要用绝对路径，不然会报错。2.2 如果就这么运行的话，会...
2019-01-22 18:56:16
855
原创 ES6之async/await
1.什么是async/await，相比与原生promise有什么优势？阮一峰老师的ES6里这一章一开始就有这么一句话，用于解释async/await进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。我觉得这句话，对于我这种菜鸟，还是不能一看就过，需要好好了解一下具体是个什么意思。‘async函数...
2019-01-22 10:16:55
12251
3
原创 CSS之如何显示没有宽高的background-image
使用background-image的时候，相信大家都遇到过这样一个问题：给一个没有设置宽高的盒子设置背景图片，但是无法显示，只有子级里面有内容把父级盒子撑开之后，背景图片才能够显示，而且只能显示撑开的部分。</head><body> <div class="background"> <div>111<...
2019-01-15 11:46:43
1951
原创 CSS之sprite/精灵图/雪碧图
刚开始学CSS Sprite的时候在网上看博客，总感觉写的不清楚，看了很多很久才明白CSS Sprite是个啥玩意儿，对新手党十分不友好。所以打算根据现有的文章和自己的理解写一个通俗的关于雪碧图的博客，能让新手党也一看就懂～1.什么是CSS雪碧图css雪碧图就是N张图片的拼接而成的一整张图片，注意是拼接成了一整张，而不是单纯的N张拼接在一起但仍然是零散N张。如下所示，假设我们的网页需要1，...
2019-01-14 11:23:55
880
原创 一个简单的纯js轮播图
本博客参照了此文章(https://www.cnblogs.com/LIUYANZUO/p/5679753.html)效果如下：1 自动播放 2 点击箭头切换 3 点击圆点切换DOM <div id="container" class="container"> <div class="pics"> ...
2019-01-11 11:57:49
815
原创 ES6之对象的扩展
属性和方法的简洁写法属性的简洁写法当属性名和变量名一致的时候，可以只写一个foo' = 123;//ES5写法const bar = { foo: foo'}//ES6写法const bar = { foo}例如当我们使用vue的时候，不是经常见主文件这么写吗？这里用的就是ES6的对象属性简洁写法new Vue（{ app, router, vuex,}...
2019-01-10 10:41:15
252
原创 ES6之数组的扩展
扩展运算符扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。btw：rest是ES6中代替arguments的，代表函数的参数。如果扩展运算符是把数组转为用逗号分隔的参数序列，那rest就是把函数参数从序列转变为数组。（1，2，3）=======》 [1, 2, 3]扩展运算符多用于函数的参数扩展运算符还可以用于表达式...
2019-01-08 19:15:52
164
原创 ES6之函数的扩展
函数的参数默认值参数变量是默认声明的，所以不能用let或const再次声明。下列代码会报错，并且默认声明用的是let/const而不是var，因为在函数内部再次用let对其声明的时候回报错，Identifier ‘xxx’ has already been declared。funtion(let x = 0, const y =1){...}使用参数默认值的时候 不能有重复的变量...
2019-01-04 18:30:11
224
原创 ES6之结构赋值
数组的结构赋值数组的结构赋值是按顺序赋值的[a,b,c] = [1,2,3]console.log(a,b,c)[b,a,c] = [1,2,3]console.log(a,b,c)// 123// 213扩展运算符+结构赋值let [head, ...tail] = [1, 2, 3, 4];不完全解构let [a, [b], d] = [1, [2, 3]...
2019-01-03 17:03:59
12724
原创 ES6之let和const
块级作用域var a = [];for (var i = 0; i &lt; 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 10以前因为没有块级作用域，在上面的例子中for循环里面用var定义的i是一个全局变量，所以i的值只会保存最后一次循环的值，就是i = 9，所以a[i=0，1，2……...
2019-01-02 16:50:25
174
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人