- 博客(62)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Ribbon 负载均衡策略
下面我们来看看在 Ribbon 中都提供了哪些负载均衡的策略实现。RandomRule该策略实现从服务实例名单中随机选择一个服务实例的功能。根据选择逻辑的实现， 正常情况下每次选择都应该选出一个服务实例， 如果出现死循环获取不到服务实例时，则很有可能存在并发的 Bug。RoundRobinRule该策略按照线性轮询的方式选择服务实例。该策略实现与 RandomRule 类似，在循环条件中...
2019-09-29 14:51:06
380
原创 ArrayList 线程安全问题及解决办法
为什么线程不安全？ETC:这里使用多个线程同时处理一个 ArrayList ，期望输出 list.size 是 4000List<String> list = new ArrayList<>();for (int i = 0; i < 4; i++) { new Thread(() -> { for (int j = 0; j...
2019-09-29 14:39:50
949
原创 封装 generator 为 async 函数
generator 和 iterator对于 generator 生成的迭代器，调用函数，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，总是需要手动调用 next 函数去获取下一个迭代器状态function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';...
2019-01-17 14:41:58
555
原创 Canvas 绘制线条、与鼠标交互的线条
canvas入门，跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习，完成一个简单的 canvas 线条 demo，监听文档 document 的几个事件 mousemove、mouseleave、blur 来与背景线条交互， 当线条与鼠标相交时，停止线条运动下面是代码，操作解释都有注释：<!DOCTYPE html><html lang="en">...
2018-12-01 17:23:59
2654
1
原创 Canvas 绘制背景小球、与鼠标交互的小球
canvas入门，跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习，完成一个简单的 canvas demo下面是代码，操作解释都有注释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie
2018-11-30 11:25:34
887
1
原创 CSS渐变实现进度条、立体小球
进度条 设置 div 元素属性 background-image 为 linear-gradient （渐变）来实现倾斜的进度条，在使用 animation 动画来让进度条动起来，就能达到想要的效果啦HTML 代码：<div id="loader"></div>CSS 代码：@keyframes loader{ 0% { } ...
2018-11-29 16:05:05
1721
原创 位图与矢量图
位图与矢量图位图（BitMap）矢量图位图（BitMap）位图又叫像素图，其构成最小单位是像素，在缩放过程中会失真。位图是一个 HTML 元素，其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控位图内单独的图形，不能对其中的具体图形进行监控。位图每次更改位图设置都会重新绘制，位图相对矢量图能达到更好的视觉效果，效果越复杂需要的像素越多，图像文件内存占比也越大矢...
2018-11-29 09:45:43
1114
原创 连字符字符串与驼峰字符串的相互转换
连字符转驼峰第一种方法：使用正则匹配函数let str = 'str-arr-test';str = str.replace(/(\w*)-(\w*)/g, function ($1, $2, $3) { //console.log($2, $3); return $2 + $3[0].toUpperCase() + $3.slice(1);});console.l...
2018-09-24 22:30:15
2681
原创 字符串的全排列
方法一：使用 js 中的 reduce 方法function allPermutation(str) { if (str.length === 2) { return [str, str[1] + str[0]]; } return str.split('').reduce((acc, val, idx) => acc.conca...
2018-09-23 23:48:16
324
原创 页面中绘制圆周运动的 dom
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> * { margin: 0;
2018-09-08 22:12:42
287
原创 不用四则运算计算两数之和
这道题中可以使用按位异或，因为按位异或就是不进位加法，进位我们可以使用两个数按位与，可以得出应该进位的数，使用 << 左移符号来进位递归调用，知道 a 为零时返回 b ，b 为零时返回 a 举例：8 + 8 =1000 + 1000 =a 等于按位异或后为 0 b等于按位与之后为 1000，使用左移符号为 10000此时 a 为 0 ，返回 b ，也就是 10...
2018-09-06 10:07:31
682
原创 HTML 中 src 与 href 的区别
hrefhref 这个属性指定 web 资源的位置，从而定义当前元素（如锚点 a ）或当前文档（如链接）与目标锚点或目标资源之间的联系。这表示链接目标的 URL 或 URL 片段。<link href="style.css" rel="stylesheer" /><a href="www.xxx.com"></a>上面的两个栗子，都是指定建立标签..
2018-09-05 13:22:36
301
原创 两栏自适应布局与高度自适应
两栏自适应float + BFC使用 float 让 left 块脱离文档流，使用 BFC 规则，让 right 块宽度自适应，代码如下<!-- CSS 样式 --><style> * { margin: 0; padding: 0; } .left { float: left; ...
2018-08-20 21:48:08
2103
原创 CSS 权重问题
权重等级行内内嵌样式行内样式包含在你的 html 标签中 对你的元素产生直接作用，权重最大，但是不能声明伪类样式<div style="position:absolute;color:red;">test</div>ID 选择器ID 一般用来作为元素的唯一标识，权重第二类选择器、属性选择器、伪类选择器属性选择器：针对标签中的属性的选择器（这个形容有点...
2018-08-20 15:07:02
566
原创 牛客剑指offer----孩子们的游戏(圆圈中最后剩下的数)
题目描述每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此。HF作为牛客的资深元老,自然也准备了一些小游戏。其中,有个游戏是这样的:首先,让小朋友们围成一个大圈。然后,他随机指定一个数m,让编号为0的小朋友开始报数。每次喊到m-1的那个小朋友要出列唱首歌,然后可以在礼品箱中任意的挑选礼物,并且不再回到圈中,从他的下一个小朋友开始,继续0...m-1报数....这样下去.....
2018-08-17 18:29:56
163
原创 浏览器和 Node 中的事件循环 Event Loop 对比
什么是 Event Loop ？众所周知，JavaScript 是非阻塞单线程语言，在浏览器执行过程中会遇到很多事件，而这些事件的执行就涉及到异步处理（包括数据请求 Ajax 、用户交互事件、脚本、渲染等）这么多的事件肯定得有个执行顺序，这就涉及到 Event Loop 。而浏览器端和 node 的事件循环又有所不同。浏览器JavaScript 中分为执行栈和任务队列，而任务队列又...
2018-08-17 11:46:49
1575
1
原创 判断二叉树是否对称
从根节点开始检测二叉树左右节点是否都为空 是否其中一个为空 是否两个都不为空，但左右节点值不等 是否两个都不为空，但左右节点值相等，递归调用function Tree(pTree) { if (!pTree) { return true; } return TreeJug(pTree.left, pTree.right);}functio...
2018-08-14 23:07:42
2192
原创 逐帧动画
在网页中我们通常需要一些图片动画效果，一般我们可以使用 gif 来展示，但如果我们需要与动画有交互， gif 就不能满足需求。下面我们介绍其他方法。Js通过 js 逐帧切换 dom 的背景图 url ，达到一个动画的效果，并且可以实现交互，只是在这里我们需要很多张可以连贯起来的图片。可能会对网页负载有影响，因为会加载很对张图片。我们主要讲讲用 CSS 来实现的方法，js 就不多做介绍了...
2018-08-08 20:27:55
576
原创 Vue.js 内部运行机制（六）---- 批量异步更新策略及 nextTick 原理
之前我们学到了 Vue 更新数据是如何更新视图的。简单回顾数据更新（setter）-> 通知依赖收集集合（Dep） -> 调用所有观察者（Watcher） -> 比对节点树（patch） -> 视图在更新视图这一步，使用异步更新策略为什么呢？引用小册中的例子,下面有一个这样的 Vue 组件<template> <div> ...
2018-08-08 11:22:08
2513
原创 Vue.js 内部运行机制 (五) ---- 数据状态更新时的差异 diff 及 patch 机制
之前我们说到响应式、依赖收集、Virtual Dom，下一步应该就是比较我们的新旧节点树（Diff），update 更新视图，最终是将新产生的 VNode 节点与老 VNode 进行一个 patch 的过程，比对得出「差异」，最终将这些「差异」更新到视图上注：本文中图片都来自掘金小册《数据状态更新时的差异 diff 及 patch 机制》附上自己梳理的一份 Diff 思维导图跨平台的A...
2018-08-07 16:09:01
1418
原创 Vue.js 内部运行机制 (三) ---- Virtual DOM 的实现
在这一节我们主要学习简单的Virtual Dom的实现VNode类VNode 归根结底就是一个 JavaScript 对象，只是通过类的属性可以正确直观地知道当前节点的信息即可。这是最简单的实现。/** * virtual node生成类 * 去除复杂的情况 */class VNode { constructor(tag, data, children, text,...
2018-08-05 18:42:13
345
原创 Vue.js 内部运行机制 (二) ---- 响应式系统的依赖收集追踪原理
为什么需要依赖收集？ 1、在 Vue 中，我们可能更新了不用更新视图的数据，如果没有依赖收集，则也会调用更新视图的 cb 函数，显然这是不合理的2、Vue 页面中可能多处引用同一个 Vue 组件对象，更新响应式数据时，则应当更新多处视图，这些都涉及依赖收集 首先的订阅者 Dep 类/** * 依赖收集类 */class Dep { constructor() {...
2018-08-05 14:48:51
1165
1
原创 Vue.js 内部运行机制 (一) ---- 响应式系统基本原理
最近准备好好看看《Vue的内部运行机制》，学到什么就写什么，先介绍Vue的响应式主要核心APIObject.defineProperty(obj, key, descriptor)descriptor其中有几个属性：configurable --》属性可配置性，属性是否可修改或删除，默认falseenumerable --》属性可枚举性，默认falsevalue --》属性值...
2018-08-03 17:02:10
842
原创 阿里笔试题
本篇文章转载自我的个人博客题目 ajaxArray是一个异步请求数组，完成mergePromise函数达到以下输出，并返回一个Promise对象const ajax1 = () => timeout(2000).then(() => { console.log('1') return 1 })const ajax2 = () =>...
2018-08-03 10:45:09
349
原创 JavaScript加载
本篇文章转载自我的个人博客传统js加载方式<script src="path/to/myModule.js"></script><script src="path/to/myModule.js" defer></script><script src="path/to/myModule.js" async&
2018-08-02 13:19:13
304
原创 ES6--Module
本篇文章转载自我的个人博客exportexport命令可以输出变量、类、函数export输出变量就是本来的名字，但可以通过as关键字重命名export命令规定对外接口，必须与模块内部变量一一建立连接对应关系//报错export 1;//报错var m = 1;export m;//报错function f() {}export f;//正确export v...
2018-08-02 13:17:12
186
原创 严格模式
本篇文章转载自我的个人博客严格模式主要限制： 1、变量必须声明后再使用 2、函数的参数不能有同名，否则报错 3、不能使用with语句 4、不能对只读属性赋值 5、不能使用前缀0表示八进制 6、不能删除不可删除的属性 7、不能删除变量delete prop，会报错，只能删除属性delete global[prop] ...
2018-08-02 13:14:09
236
原创 ES6--修饰器
本篇文章转载自我的个人博客修饰器是一个函数，用来修改类的行为@testableclass MyTestable{ constructor() { super(); }}function testable(target) { target.isTestable = true;}MyTestable.isTestable; //true...
2018-08-02 13:12:32
757
原创 ES6--Class的继承（下）
本篇文章转载自我的个人博客类的prototype和__proto__1、Class同时具有prototype和__proto__2、子类的__proto__属性表示构造函数的继承，总是指向父类3、子类的prototype属性的__proto__属性表示方法的继承，总是指向父类的prototype属性4、作为对象子类B的原型（__proto__）是父类A,作为构造函数，子类B的原...
2018-08-02 11:59:00
156
原创 ES6--Async函数的实现
本篇文章转载自我的个人博客async function fn(){ //...}//等同于function fn(args){ return spawn(function* (){ //... });}所有async函数都可以写成第二种形式，其中spawn函数是自动执行器spawn函数实现：function spawn(genF){ return new P...
2018-08-02 11:55:12
283
原创 ES6--Async
本篇文章转载自我的个人博客async对Generator函数的改进： Generator执行必须靠执行器（类似co模块）,async函数自带执行器 返回值为Promise对象，则async函数可以看成封装多个异步操作的Promise对象 async表示异步操作，await表示紧跟在后面的表达式需要等待结果 co模块约定，yield命令后面只能...
2018-08-02 11:52:38
342
原创 ES6--Class的继承（上）
本篇文章转载自我的个人博客extendsES6中通过extends关键字实现继承class ColorPoint extends Point { constructor(x, y, color) { super(x, y); //调用父类的constructor(x,y) this.color = color; } toString() { return this....
2018-08-02 11:51:09
423
原创 ES6--Proxy
本篇文章转载自我的个人博客ProxyProxy可以理解为在对象前架设一个拦截层（过滤与改写）定义：var proxy = new Proxy(target,handler);自带方法：get(target,propKey,receiver);set(target,propKey,value,receiver);has(target,propKey);deleteP...
2018-08-02 11:48:23
156
原创 常见正则表达式
本篇文章转载自我的个人博客字符串trim函数其中str为测试字符串，re为正则表达式var str = ' www.liulei.@qq [email protected] ';var re = /((^s*)|(s*$))/g;console.log(str.replace(re,''));日期检测var str = '2014-04-01'; var re = ...
2018-08-02 11:45:39
285
原创 最长递增子序列----面试代码题
面试代码题在一组数字中，找出最长一串递增的数字，就是最长递增子序列，比如0, 3, 4, 17, 2, 8, 6, 10数字 0 3 4 17 2 8 6 10 长度 1 2 3 4 2 4 4 5 通过观察我们可以看出最长递增子序列是0, 3, 4, 8, 10或0, 3, 4, ...
2018-08-01 16:40:56
487
原创 浏览器渲染过程及重绘重排
浏览器渲染过程HTML代码转化成DOM CSS代码转化成CSSOM（CSS Object Model） 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息） 生成布局（layout），即将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在屏幕上详情可以思考下面两张图： 重排和重绘（重新布局、重新绘制）修改DOM 修改样式表 用户事件（比如...
2018-08-01 11:30:21
1158
转载 取消Promise
转载自 为Promise插上可取消的翅膀const makeCancelable = (promise) => { let hasCanceled_ = false; const wrappedPromise = new Promise((resolve, reject) => { promise.then((val) => hasCancele...
2018-07-31 17:20:23
1254
原创 Flex布局（CSS弹性盒子）
CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 ----摘自MDN 使用CSS弹性盒子.box{ display: flex;}...
2018-07-31 16:10:12
784
1
原创 js手动实现简易懒加载----LazyLoad
前言在网页加载中，对于一些存在很多Image的网页，一次加载所有图片，会造成性能浪费，图片优化的方法有很多，例如base64、雪碧图等，图片懒加载也是比较常见的一种性能优化的方法原理给页面中img标签设定自定义属性data-original,用来存放真正的img源URL，给所有img的src属性设定为一张静态图片或者不设置监听窗口滚动scroll事件，遍历图片计算图片是否出现在浏览...
2018-07-28 19:04:49
999
原创 常见的排序算法
冒泡排序冒泡排序算法的原理如下： 比较相邻的元素。如果第一个比第二个大，就交换他们两个。 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 ----摘自百度百科 functi...
2018-07-27 17:35:18
134
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人