OrangeJ

闲逛Codepen时发现了一个利用Sprites图做动画效果的示例，大为所动，遂cope其图，自己实现一下。整体思路很简单：加载大图之后，利用js不断改变background-position以实现动画效果。ps1：只简单实现了动画效果，没有对首次加载图片的延时做处理，如果没看到动画，刷新一下页面就可以了ps2：处理延时时采用的setTimeout，性能堪忧，待我找到更好的方式后再优化

代码调试指南本篇指南将教你如何调试Node.js应用程序和代码.开启检查器注意: --inspect 选项和检查器协议都是实验性的, 它们将来可能会被更改.如果运行程序时开启了 –inspect 开关, Node.js进程会通过WebSocket监听那些由 检查器协议 定义的诊断命令, 默认情况下地址和端口是127.0.0.1:9229. 每个进程会被分配一个唯一的UUID(即

查看了一些Promise相关的教程，发现基本上都只介绍了then、catch、Promise.resolve、Promise.reject、Promise.all、Promise.race等方法的使用，而很少详细介绍链式调用then方法时的细节。而 ES6 Promise 的规范又超级长，看起来难免会费些时间。偶然发现了 Promises/A+ 规范，这个规范较为简短，并主要介绍了then方法的规范

使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性. 本文介绍 async / await 的基本用法和一些注意事项.await引用MDN的介绍: await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用.await 的使用语法非常简单:[return_valu

Node.js的事件循环, 定时器和process.nextTick()什么是事件循环?事件循环允许Node.js通过尽可能地分流对系统内核的操作, 来执行 非阻塞 的I/O操作, 即使JavaScript是单线程的.大多数现代的系统内核都是多线程的, 他们在后台可以处理多个同时执行的操作. 当其中一个操作完成时, 系统内核会通知Node.js, 然后与之相关的回调函数会被加入到 poll队列 并且

Node.js中的定时器原文地址: https://nodejs.org/en/docs/guides/timers-in-node/Node.js的定时器模块中含有这样的方法, 它们可以设定在指定时间之后执行某些代码. 定时器函数不需要通过 require() 导入, 它们是全局可访问的, 这是为了和浏览器中的JavaScript API保持一致. 为了彻底理解定时器回调何时被执行, 最好先仔细研

阻塞与非阻塞 原文地址: https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/本篇综述涵盖了Node.js中 阻塞(blocking) 调用 与 非阻塞(non-blocking) 调用之间的区别. 本文会涉及到事件循环和 libuv 库, 但是你无需提前了解它们. 我们只假定读者有JavaScript基础和对Node.js回调

HTTP事务剖析 原文地址: https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/本篇指南的目的是让读者对Node.js的HTTP处理过程有个清晰的理解. 我们假定读者已经了解一般意义上的, 无关特定编程语言和环境的HTTP请求是如何工作的. 我们也假定读者对Node.js的 EventEmitters 和 Stre

Redux是一款优秀的状态管理库, 它的设计巧妙, 可扩展性强, API简单易懂. 或许会有很多人以为实现Redux的代码量会很多, 然而事实恰恰相反. Reudx的核心代码只包含了不到10个js文件, 其中还有3个文件是辅助函数. 在阅读Redux源码时, 本人发现其中有一些很有意思的编程技巧, 遂整理并发出来与大家分享.在 src/utils.warning.js中, 有这样一段代码:...

Redux源码的src/utils/isPlainObject.js中有这样一个函数, 它用于判断一个值是否为一个普通的对象(普通对象即直接以字面量形式或调用 new Object() 所创建的对象):/** * @param {any} obj The object to inspect. * @returns {boolean} True if the argument appears to

一. 算法思想与伪代码插入排序是一种较简单的排序算法，其工作方式像排序扑克牌一样。开始时左手为空且桌子上牌面向下。然后，每次从桌子上拿走一张牌并将其插入左手中正确的位置。为了找到一张牌的正确位置，我们从右到左将它与手中的每张牌进行比较。拿在左手上的牌总是排序好的。将排序过程命名为INSERTION-SORT，类比这个思路，可以得出插入排序的伪代码：INSERTION-SORT(A):for j =...

npm link命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。那么，当运行npm link时发生了什么？简要地讲，这个命令主要做了两件事：为npm包目录创建软链接为可执行文件(bin)创建软链接

今天遇到一个问题，在IE9下运行类似以下代码时会报错：window.console.log.apply(window.console, ['a', 'b', 'c']);报错提示为:对象不支持"apply"属性或方法。查了一下，在Stack Overflow上查到了相关问题，地址为：https://stackoverflow.com/questions/5472938/does-ie9-suppor

window.performance.now()这句代码在IE9中会报错，报错原因是对象不支持“now”属性或方法。既然IE9不支持此方法，那么就需要找到一种等价的方式来取得该数值，查阅MDN可知其功能为：window.performance.now() 返回一个时间戳,以毫秒为单位,精确到千分之一毫秒.该时间戳的值是从 window.performance.timing 接口的navigation

function quickSort(arr) { //递归终止条件 if (arr.length <= 1) { return arr; } //取数组的第0个数组作为flag var flag = arr.splice(0, 1)[0]; //left为用于装载小于flag的数字的数组 var left = [];

function heapAdjust(arr, pos, len) { //将pos节点的数字保存 var tmp = arr[pos]; //计算pos节点左子节点位置 var child = pos * 2 + 1; //循环，直到没有子节点 while (child < len) { //若pos节点有右子节点且右子节点较大，

jQuery对象级插件是通过【jQuery.fn.extend()】增加功能，所增加的函数可以直接被jQuery对象调用。此示例的功能为：当鼠标悬停在某个li元素上时，该元素背景色会改变，源码如下：jquery.color.js :; (function($) { $.fn.extend({ "focusColor": function(li_col) { va

因为大整数阶乘的结果超出了导致js数值类型溢出，因此考虑用字符串保存结果来计算，方案如下： function f(n) { var a = [1]; for (var i = 1; i <= n; i++) {

在获取数据时，用XMLHttpRequest时，会有同源策略的限制。所谓同源是指，域名，协议，端口相同。形象些来说就是，A服务器中有个网页中含有JavaScript代码，这段代码如果用XMLHttpRequest来获取数据的话，就只能在A服务器中获取，不能获取B服务器中的数据。因此，可以用来获取非同源的数据。 Mighty Gumball (JSON)

原作地址：http://codepen.io/svendsen/pen/eNjqar效果如下：本人将其源代码重写后并添加注释，直接复制保存为HTML即可看到效果。源码如下： body { text-align: center; background-color: #2c3e50; } ca

.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

先上效果图：实现代码：二次贝塞尔曲线 body, h1{margin:0;} canvas{margin: 20px; } 二次贝塞尔曲线 /** * @param sx 起始点x坐标 * @param sy 起始点y坐标 * @param ex 结束点x坐标 * @param ey 结束点y坐标 *

需求背景假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口，x轴用于展示时间(分钟)，使用条形图的不同颜色来表示不同时间区间段的状态，使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例，图中则表示了0~10分钟为正常，10~25分钟为繁忙，25~45分钟为故障，45~60分钟为离线。根据此图，很容易想到可以用条形图试试。但后来发现，如果用堆

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient. 截至目前(2017-10-15), echarts的官方API中都没有对这个API添加说明文档, 故用本篇文章来简略说明其用法.为方便讲解, 先上示例代码:{ type: 'bar', itemStyle: {

前言之前一直使用Sublime Text写代码，使用wbond的sftp插件配个快捷键来将文件上传到服务器也是比较方便。最近改用VSCode了，安装了名为sftp的这款插件来上传代码文件，功能倒是挺好，只是没有快捷键来操作，每次都要右键点出菜单，然后点击SFTP: Upload来上传，总是感觉不如配个快捷键来的方便，于是经过一番探索，找到了一个配置快捷键的方法。探索历程不感兴趣的朋友请跳过本段，直接

背景最近设计师控制不住自己的洪荒之力，设计图搞得高端大气上档次，各种曲线满天飞。为了更好地实现页面效果，经常需要绘制形如下图的贝塞尔曲线： 一般实现这种效果有两种思路：SVG和Canvas。直接使用Canvas去画贝塞尔曲线比较繁琐，故在开发中使用了ZRender.js这款Canvas库。ZRender简介ZRender是EChart的底层库，功能十分强大，可以很方便地在Canvas中绘制各种图形

考虑一个常见的用户上传头像的场景：点击按钮，弹出文件选择框选中图片并确认后直接上传图片实现这个功能，需要使用<input>来添加文件，并实现上传功能。传统的上传文件是将<input>放到<form>中提交，但在这个场景中并不存在form表单，只有一个input而已。那么应该如何处理呢？答案是可以使用FormData来实现文件的提交。先看一下MDN对FormData的介绍： XMLHttpR

create-react-app是Facebook提供的一个用于快速构建React前端项目的工具，只需简单运行几个命令即可创建一个React应用。它的特点就是零配置，开箱即用。那么，在执行create-react-app命令之后，究竟发生了什么呢？接下来就通过源码来一探究竟。首先要知道的是，一般create-react-app这个npm包是全局安装的（也可以选择非全局安装，这种情况暂不讨论），因此...