- 博客(59)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 从源码看create-react-app命令的执行流程
create-react-app是Facebook提供的一个用于快速构建React前端项目的工具，只需简单运行几个命令即可创建一个React应用。它的特点就是零配置，开箱即用。那么，在执行create-react-app命令之后，究竟发生了什么呢？接下来就通过源码来一探究竟。首先要知道的是，一般create-react-app这个npm包是全局安装的（也可以选择非全局安装，这种情况暂不讨论），因此...
2018-07-14 00:32:01
1333
原创 CSS实现中间定宽，左右自适应的三列布局
要实现中间定宽，左右自适应的三列布局，个人想到的一种方式是：首先在父容器内设置两个子容器，宽度各占50%并分别向左向右浮动；在每个子容器中放置一个显示区，左容器的显示区设置margin-right，右容器的显示区设置margin-left，这样便留出了中间的空间。最后再使用一个定宽的绝对定位容器水平居中显示，即可完成中间定宽，左右自适应的三列布局。示例代码如下：<!DOCTYPE html&...
2018-07-03 09:46:11
548
原创 插入排序之JavaScript实现
一. 算法思想与伪代码插入排序是一种较简单的排序算法，其工作方式像排序扑克牌一样。开始时左手为空且桌子上牌面向下。然后，每次从桌子上拿走一张牌并将其插入左手中正确的位置。为了找到一张牌的正确位置，我们从右到左将它与手中的每张牌进行比较。拿在左手上的牌总是排序好的。将排序过程命名为INSERTION-SORT，类比这个思路，可以得出插入排序的伪代码：INSERTION-SORT(A):for j =...
2018-03-28 22:15:28
591
原创 Redux源码中的编程技巧(二)之isPlainObject函数的实现
Redux源码的src/utils/isPlainObject.js中有这样一个函数, 它用于判断一个值是否为一个普通的对象(普通对象即直接以字面量形式或调用 new Object() 所创建的对象):/** * @param {any} obj The object to inspect. * @returns {boolean} True if the argument appears to
2018-03-10 17:08:37
635
3
原创 Redux源码中的编程技巧(一)之手动抛出异常帮助定位代码
Redux是一款优秀的状态管理库, 它的设计巧妙, 可扩展性强, API简单易懂. 或许会有很多人以为实现Redux的代码量会很多, 然而事实恰恰相反. Reudx的核心代码只包含了不到10个js文件, 其中还有3个文件是辅助函数. 在阅读Redux源码时, 本人发现其中有一些很有意思的编程技巧, 遂整理并发出来与大家分享.在 src/utils.warning.js中, 有这样一段代码:...
2018-03-10 15:52:26
373
翻译 NodeJS官方文档中文版之《代码调试入门指南》
代码调试指南本篇指南将教你如何调试Node.js应用程序和代码.开启检查器注意: --inspect 选项和检查器协议都是实验性的, 它们将来可能会被更改.如果运行程序时开启了 –inspect 开关, Node.js进程会通过WebSocket监听那些由 检查器协议 定义的诊断命令, 默认情况下地址和端口是127.0.0.1:9229. 每个进程会被分配一个唯一的UUID(即
2018-01-11 21:49:34
2346
翻译 NodeJS官方文档中文版之《HTTP事务剖析》
HTTP事务剖析 原文地址: https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/本篇指南的目的是让读者对Node.js的HTTP处理过程有个清晰的理解. 我们假定读者已经了解一般意义上的, 无关特定编程语言和环境的HTTP请求是如何工作的. 我们也假定读者对Node.js的 EventEmitters 和 Stre
2018-01-10 10:37:22
450
翻译 NodeJS官方文档中文版之《阻塞与非阻塞综述》
阻塞与非阻塞 原文地址: https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/本篇综述涵盖了Node.js中 阻塞(blocking) 调用 与 非阻塞(non-blocking) 调用之间的区别. 本文会涉及到事件循环和 libuv 库, 但是你无需提前了解它们. 我们只假定读者有JavaScript基础和对Node.js回调
2018-01-09 09:29:22
323
翻译 NodeJS官方文档中文版之《Node.js中的定时器》
Node.js中的定时器原文地址: https://nodejs.org/en/docs/guides/timers-in-node/Node.js的定时器模块中含有这样的方法, 它们可以设定在指定时间之后执行某些代码. 定时器函数不需要通过 require() 导入, 它们是全局可访问的, 这是为了和浏览器中的JavaScript API保持一致. 为了彻底理解定时器回调何时被执行, 最好先仔细研
2018-01-09 09:28:32
3401
1
翻译 NodeJS官方文档中文版之《事件循环, 定时器和process.nextTick()》
Node.js的事件循环, 定时器和process.nextTick()什么是事件循环?事件循环允许Node.js通过尽可能地分流对系统内核的操作, 来执行 非阻塞 的I/O操作, 即使JavaScript是单线程的.大多数现代的系统内核都是多线程的, 他们在后台可以处理多个同时执行的操作. 当其中一个操作完成时, 系统内核会通知Node.js, 然后与之相关的回调函数会被加入到 poll队列 并且
2018-01-07 21:07:53
2108
原创 async/await的使用以及注意事项
使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性. 本文介绍 async / await 的基本用法和一些注意事项.await引用MDN的介绍: await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用.await 的使用语法非常简单:[return_valu
2017-12-29 18:17:19
74119
原创 Promise then方法的细节(Promises/A+规范完整翻译)
查看了一些Promise相关的教程，发现基本上都只介绍了then、catch、Promise.resolve、Promise.reject、Promise.all、Promise.race等方法的使用，而很少详细介绍链式调用then方法时的细节。而 ES6 Promise 的规范又超级长，看起来难免会费些时间。偶然发现了 Promises/A+ 规范，这个规范较为简短，并主要介绍了then方法的规范
2017-12-28 19:58:47
3563
1
原创 使用FormData实现异步上传文件
考虑一个常见的用户上传头像的场景：点击按钮，弹出文件选择框选中图片并确认后直接上传图片实现这个功能，需要使用<input>来添加文件，并实现上传功能。传统的上传文件是将<input>放到<form>中提交，但在这个场景中并不存在form表单，只有一个input而已。那么应该如何处理呢？答案是可以使用FormData来实现文件的提交。先看一下MDN对FormData的介绍： XMLHttpR
2017-12-22 16:48:17
458
原创 npm link 命令的作用浅析
npm link命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。那么，当运行npm link时发生了什么？简要地讲，这个命令主要做了两件事：为npm包目录创建软链接为可执行文件(bin)创建软链接
2017-12-01 18:18:10
29590
1
原创 IE9中调用window.performance.now()报错的问题
window.performance.now()这句代码在IE9中会报错，报错原因是对象不支持“now”属性或方法。既然IE9不支持此方法，那么就需要找到一种等价的方式来取得该数值，查阅MDN可知其功能为：window.performance.now() 返回一个时间戳,以毫秒为单位,精确到千分之一毫秒.该时间戳的值是从 window.performance.timing 接口的navigation
2017-11-27 09:17:48
1405
原创 IE9中调用console.log.apply的报错问题
今天遇到一个问题，在IE9下运行类似以下代码时会报错：window.console.log.apply(window.console, ['a', 'b', 'c']);报错提示为:对象不支持"apply"属性或方法。查了一下，在Stack Overflow上查到了相关问题，地址为：https://stackoverflow.com/questions/5472938/does-ie9-suppor
2017-11-21 10:50:12
1203
原创 使用ZRender画贝塞尔曲线
背景最近设计师控制不住自己的洪荒之力，设计图搞得高端大气上档次，各种曲线满天飞。为了更好地实现页面效果，经常需要绘制形如下图的贝塞尔曲线： 一般实现这种效果有两种思路：SVG和Canvas。直接使用Canvas去画贝塞尔曲线比较繁琐，故在开发中使用了ZRender.js这款Canvas库。ZRender简介ZRender是EChart的底层库，功能十分强大，可以很方便地在Canvas中绘制各种图形
2017-11-16 22:27:33
5464
1
原创 使用ECharts实现状态区间图
需求背景假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆
2017-10-20 12:58:58
16579
1
原创 VSCode自定义快捷键运行插件命令(为插件设置自定义快捷键)
前言之前一直使用Sublime Text写代码，使用wbond的sftp插件配个快捷键来将文件上传到服务器也是比较方便。最近改用VSCode了，安装了名为sftp的这款插件来上传代码文件，功能倒是挺好，只是没有快捷键来操作，每次都要右键点出菜单，然后点击SFTP: Upload来上传，总是感觉不如配个快捷键来的方便，于是经过一番探索，找到了一个配置快捷键的方法。探索历程不感兴趣的朋友请跳过本段，直接
2017-10-19 17:57:10
10575
2
原创 echarts中渐变色的使用
在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient. 截至目前(2017-10-15), echarts的官方API中都没有对这个API添加说明文档, 故用本篇文章来简略说明其用法.为方便讲解, 先上示例代码:{ type: 'bar', itemStyle: {
2017-10-15 18:17:24
48086
7
原创 二次贝塞尔曲线的实现（基于Canvas与JavaScript）
先上效果图：实现代码：二次贝塞尔曲线 body, h1{margin:0;} canvas{margin: 20px; } 二次贝塞尔曲线 /** * @param sx 起始点x坐标 * @param sy 起始点y坐标 * @param ex 结束点x坐标 * @param ey 结束点y坐标 *
2016-04-14 23:29:02
2646
原创 Fiddler2用于手机抓包时的配置方法
首先，在Fiddler的Tools--Fiddler Options--Connections里设置，然后保存设置，重启Fiddler：然后需要配置手机的HTTP代理。如果手机所连接的路由器和电脑是同一个内网中，那么可以把手机的HTTP代理地址设为电脑在内网中的ip地址，如192.168.0.150，端口设为8888即可。(此时，电脑和手机通信的网络是内网，所以手机代理
2016-04-01 23:23:37
2538
原创 Sublime Text 离线安装插件的方法
Sublime Text因为拥有众多插件而具备强大的功能。有时候公司的电脑是不能直接上外网的，那么给Sublime Text安装插件时就不能使用在线搜索安装的方式。本人经过几小时的研究和探索，终于找到了Sublime Text离线安装插件的终极大法。先介绍一下Sublime Text的插件安装机制。Sublime Text的插件绝大多数都托管在Github上，我们使用Pac
2016-03-25 13:39:38
25813
2
原创 用键盘控制鼠标移动的Python脚本
玩QQ桌球游戏时，有时候用鼠标控制鼠标指针的微小移动比较费劲儿，所以想写个程序，可以用键盘的上下左右键来控制鼠标的移动，每次只移动一个像素。本脚本依赖pywin32、pyHook和pymouse这两个库，请自行安装。代码中的pythoncom是pywin32库的一部分，运行脚本后，即可通过键盘的上下左右键控制鼠标移动了。# -*- coding:utf-8 -*-# 左37 上38 右3
2016-03-07 12:57:27
4978
原创 基于Python的豆瓣电影评分查询器
脚本运行效果：本代码运行需要先安装requests和BeautifulSoup这两个库。代码如下:# -*- coding: utf-8 -*-import urllibimport requestsimport refrom bs4 import BeautifulSoup# 读取用户输入的电影名，并转换为url编码tip = u'请输入电影名：'t
2016-02-25 14:21:37
1845
原创 Python安装easy_install报错的处理方式
今天看《Flask Web开发：基于Python的Web应用开发实战》时，在搭建Flask开发环境过程中，首先需要按照书本要求装一个虚拟环境管理器virtualenv。而这个virtualenv需要使用easy_install的方式去安装，所以要先安装easy_intall。步骤如下：1. 来到 https://pypi.python.org/pypi/setuptools/ 这个网站，本
2016-01-01 20:57:30
8223
2
原创 D3.js实现随机散点图（附带横纵坐标轴）
.axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } var w = 600; // svg宽度 va
2015-12-09 22:57:22
2807
2
原创 Canvas实现矩形随机铺满的动画效果
原作地址：http://codepen.io/svendsen/pen/eNjqar效果如下：本人将其源代码重写后并添加注释，直接复制保存为HTML即可看到效果。源码如下： body { text-align: center; background-color: #2c3e50; } ca
2015-10-15 15:39:00
1019
原创 纯css实现高尔夫小球动画案例分析
原作品网址为：http://codepen.io/kevinjannis/pen/MaoGbP作品效果如下：重写的代码如下： * { box-sizing: border-box; } html { background: #d1d1d1;
2015-10-10 15:13:01
1007
原创 Sprites图+JavaScript制作动画效果
闲逛Codepen时发现了一个利用Sprites图做动画效果的示例，大为所动，遂cope其图，自己实现一下。整体思路很简单：加载大图之后，利用js不断改变background-position以实现动画效果。ps1：只简单实现了动画效果，没有对首次加载图片的延时做处理，如果没看到动画，刷新一下页面就可以了ps2：处理延时时采用的setTimeout，性能堪忧，待我找到更好的方式后再优化
2015-10-09 16:54:28
753
原创 快速排序之JavaScript实现
function quickSort(arr) { //递归终止条件 if (arr.length <= 1) { return arr; } //取数组的第0个数组作为flag var flag = arr.splice(0, 1)[0]; //left为用于装载小于flag的数字的数组 var left = [];
2015-10-05 16:22:51
319
原创 堆排序之JavaScript实现
function heapAdjust(arr, pos, len) { //将pos节点的数字保存 var tmp = arr[pos]; //计算pos节点左子节点位置 var child = pos * 2 + 1; //循环，直到没有子节点 while (child < len) { //若pos节点有右子节点且右子节点较大，
2015-10-05 16:06:33
411
原创 jQuery对象级插件示例
jQuery对象级插件是通过【jQuery.fn.extend()】增加功能，所增加的函数可以直接被jQuery对象调用。此示例的功能为：当鼠标悬停在某个li元素上时，该元素背景色会改变，源码如下：jquery.color.js :; (function($) { $.fn.extend({ "focusColor": function(li_col) { va
2015-10-03 20:40:38
518
原创 JavaScript实现大整数阶乘的解决方案
因为大整数阶乘的结果超出了导致js数值类型溢出，因此考虑用字符串保存结果来计算，方案如下： function f(n) { var a = [1]; for (var i = 1; i <= n; i++) {
2015-09-28 11:14:45
2482
原创 HTML5的Canvas实现小圆点在屏幕内跑动
点击屏幕可以增加小圆点个数，效果如图：完整代码如下，复制到HTML文件，打开即可运行。 Hover --> /*@import url(http://fonts.googleapis.com/css?family=Right
2015-08-11 17:15:02
4561
原创 CSS3实现的一批hover特效
本特效的原版是codepen上面的hover.css项目，个人很喜欢所以把所有的hover特效自己也写了一遍，上传文件麻烦所以直接把css整合到HTML代码中了，代码复制下来保存后即可用浏览器打开浏览。 Hover .container { margin: 0 auto; w
2015-08-10 09:19:37
4396
1
原创 CSS3中transform,transition和animation的简介和用法示例
transform是一个属性，本质跟width,height是一样的，加上transform也就是为类增加一个变换属性。transition是一个属性，它是用来控制过渡效果的，因为用transform可以增加变换效果，而那个变换是瞬间突变，如果想让这个变化是平滑的、过渡型的，则要用transition来控制，设定要控制的属性和过渡的时间即可。animation是动画效果，要
2015-08-07 10:09:36
871
原创 CSS3中transition-duration参数对hover前后两种过渡时间的影响
transition-duration这个参数是设置过渡时间的，将transition-duration放在哪个类中，那么在这个类被启用时就会按照transition-duration设定的时间来过渡。例如，有类 .a 和 .a:hover 1.如果只在 .a 中设定transition-duration: 3s;的话，那么在鼠标覆盖这个元素和鼠标离开元素时，过渡时
2015-08-07 10:08:01
3294
原创 移动端页面弹出对话框效果Demo
核心思路：设置一个隐藏的(display:none;)、背景偏暗的div及其子div作为对话框，当点击某处时，将此div设置为显示。核心代码如下(部分js代码用于动态调整div内容的行高，这部分代码可以忽略): function getHeight(className) {
2015-07-24 15:32:21
10614
原创 使用Swiper框架模仿Swiper中文官网的效果Demo
核心代码如下： Swiper test * { margin: 0; padding: 0; } .blue-slide { background: #3566f2; } .red-slide {
2015-07-14 10:00:14
4817
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人