翾的博客

redux讲connect之前先来回顾一下redux的基本用法, 见下面的例子: import { createStore } from 'redux';function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DE

前言该篇博客涉及__proto__, prototype属性, 如果不是太了解, 参见下面这篇博客 https://blog.youkuaiyun.com/c_kite/article/details/78484191ES3 继承在JavaScript中，所谓的类就是函数，函数就是类。一般情况下，我们在函数的prototype上面定义方法，因为这样所有类的实例都可以公用这些方法；在函数内部...

序言: 上个月换工作了, 从网易来到了阿里巴巴, 感觉同事都是冰冷; 也知道了研发工程师和开发工程师的区别; 现在冒出了想去读研学算法和AI的打算.预览图老规矩, 先放图第一个红格子是DOM渲染的, 第二个带边框的红格子是用html的代码在canvas画出来的, 没有使用canvas的api哦. 本文最后贴出了代码.原理本文转化的实现, 以及本文下半部分所介绍的ht...

简介其实原理很简单就是通过浏览器的性质来完成下载方案1function download(src) { const $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download", ""); const event = new Mous..

效果图由于用的公司的电脑, 不太方便录制, 不过亲测是好使的. (之后会补上的)简介本次使用的框架为国外比较出名的HTML5 2D渲染引擎, http://www.pixijs.com/ 本篇开发基于https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js 其框架的4.7.1版本进行开发. 实现的效果: dom...

序言最近看了些面试题, 发现大多数都会问一个问题就是JavaScript生成二叉树, 本来想偷懒百度看看算了, 可是发现好多网站博客的代码都是一样的, 并且生成的还是平衡二叉树………. 如果我不输入数字你给我生成一个试试. so, 看起来只能自己搞一下了.百度百科–平衡二叉树定义百度百科–二叉树定义我之前写过一篇基于C++的二叉树创建以及遍历方法, 本片博客算法就是基于之前的C++...

快速排序主要思路: 不断拆分成两个数组, 小的放左边, 大的放右边.时间复杂度: O (nlogn) 数组有n个元素，因为要递归运算，算出支点pivot的位置，然后递归调用左半部分和有半部分，这个时候理解上是若第一层的话就是n/2，n/2，若是第二层就是n/4,n/4,n/4,n/4这四部分，即n个元素理解上是一共有几层2^x=n，x=logn，然后每层都是n的复杂度，那么平均就是O(...

最简单循环查找去重var array = [1, 1, '1'];function unique(array) { var res = []; for (var i = 0, len = array.length; i < len; i++) { var current = array[i]; if (res.indexOf(curre...

绑定规则下面几种绑定方式, 除了es6的箭头函数, 都属于动态作用域, es6箭头函数里面的this采用的静态作用域默认绑定function foo() { console.log(this.a);}var a = 2;foo(); // 2其实很简单, 这里只要看foo这个函数是由谁来调用的即可, 明显是window, 所以输出的是2, 如果使用严格模式(str...

理由有时候开发者会需要注册一些回调函数在浏览器的scroll和resize事件上, 但是scroll和resize这类事件触发非常频繁, 而实际用户并不需要感知这么多的事件产生, 造成大量函数触发, 而如果这些函数和动画有关, 会给浏览器造成巨大压力, 节流函数可以很好的解决这个问题.节流函数原理是设置一个阈值, 在一定时间内的触发但并不真实调用函数, 从而做到性能的优化, 实现的方式有反跳和节流.

坑爹的开始….Chorme56+开始为了让页面滚动变得更为流畅，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略默认事件的preventDefault(), 你要是手动阻止会弹出一个警告, 告诉你阻止不了!!!解决办法在CSS属性上对想要禁用触摸事件的元素设置t

定义简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看：函数的返回结果只依赖于它的参数。函数执行过程里面没有副作用。const a = 1const foo = (b) => a + bfoo(2) // => 3foo 函数不是一个纯函数，因为它返回的结果依赖于外部变量...

substrstr.substr(start[, length])start 开始提取字符的位置, 不改变原字符串。如果为负值，则被看作 strLength + start，其中 strLength 为字符串的长度（例如，如果 start 为 -3，则被看作 strLength + (-3)）。length 可选。提取的字符数。// 例子const a = '12345...

效果 看下面我们已经成功上传到了根文件目录下 思路前端图片展示使用的是FileReader, 使用Ajax向后台发送数据; 后台配置比较简陋, 用的express和multer.代码<!--html--> <div class="row"> 头像: <a href="javascript:void(0...

最近这一阵子由于写项目好久没写博客了, 现在我又回来了~ajax为什么要设置requestHeader理由默认情况下, 服务器对POST请求和提交web表单的请求并不会一视同仁. 因此, 服务器端必须有程序来读取发送过来的原始数据, 并从中解析出有用的部分. 不过我们可以使用xhr来模仿表单提交: 首先将Content-Type头部信息设置为application/x-www-form-urlenc

xhr的progress事件在XMLHttpRequest2级中添加了一个progress事件, 这个事件会在浏览器接收新数据期间周期性的触发. 而onprogress事件处理程序会接收到一个event对象, 其target属性是XHR对象, 但会额外包含三个属性: lengthComputable, position和totalSize. 其中, lengthComputable是一个表示进度信息

如下图所示画的有点不太好看, 但是关系还是很清楚的

简介这项技术非常类似动态脚本注入. 使用JavaScript创建一个新的Image对象, 并把src属性设置为服务器上的脚本URL. 该URL包含了我们要通过GET传回的键值对数据. 请注意并没有创建img元素或把它插入DOM. var url = '/status_tracker.php';var params = [ 'step=2', 'time=124802

本文例子和方法来源于阮一峰es6入门http://es6.ruanyifeng.com/#docs/function.真是大神级的人物, 必须膜拜. 虚心学习尾递归函数调用自身，称为递归。如果尾调用自身，就称为尾递归。递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。例

不得不说MDN网站真心好用, 里面例子真心不错.附上MDN网址: https://developer.mozilla.org/zh-CN/本文地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty转载仅出于学习目的.Object.defineP

巩固一下之前学的知识. 看如下的效果图. 功能描述: 基本游戏需求以及排行榜记录保存.主界面: 游戏界面: 游戏记录保存: 为了方便演示, 结束时提示保存记录, 正常输了的话提示重新开始游戏. 排行榜: 代码和教程都在github上: https://github.com/TheKiteRunners/Web-Sweep

避免多次提交表单var form = document.getElementById("myform");form.addEventListener("submit", function(event) { var event = event || window.event; var target = event.target; var btn = target.el

“Duff`s Device”是一个循环体展开技术, 它使得一次迭代中实际执行了多次迭代的操作. Jeff Greenberg被认为是将”Duffs Device”代码从原始C实现移植到JavaScript中的第一个.代码: var iterations = Math.floor(items.length / 8), startAt = items.length % 8, i = 0

call( )语法fun.call(thisArg[, arg1[, arg2[, ...]]])参数thisArg 在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的thi

首先看一个例子, 这是一个连接字符串的常用方法.str += "one" + "two";此代码运行时, 会经历4个步骤: 在内存中创建一个临时字符串.连接后的字符串”onetwo”被赋值给临时字符串.临时字符串与str当前的值连接.结构赋值给str 这是浏览器完成此任务的大概步骤.以下代码在大多数浏览器中这样做会提速10%-40%;str = str + "one" + "two"赋值

关于javascript正则表达式的使用请参考我的这篇博客http://blog.youkuaiyun.com/c_kite/article/details/53959534为了更高效的使用正则表达式, 首先要理解它的工作原理. 下面是一个正则表达式处理的基本步骤. 基本步骤第一步: 编译当你创建了一个正则表达式对象(使用正则直接量或RegExp构造函数), 浏览器会验证你的表达式, 然后把它转化为一个原生代码

使用定时器来处理数组//参数: 待处理的数组, 对每一个数组项调用的函数, 处理完成后运行的回调函数.function processArray(items, process, callback) { var todo = items.concat(); setTimeout(function() { process(todo.shift()); if

简介web worker 是运行在后台的 JavaScript，不会影响页面的性能。例如处理类似高斯函数处理图片这种处理信息量比较庞大时有可能会造成页面阻塞, 因此这种时候就可以通过Worker创建一个线程在后台处理信息, 当处理完成时会把信息返回回来.兼容性Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.

在需要将DOM的结构序列化为XML或HTML字符串时, 多数都会涉及遍历元素特性.注意:针对attribute对象中的特性, 不同浏览器返回的顺序不同. 这些特性在XML或HTML代码中出现的先后顺序, 不一定与它们出现在attribute对象的顺序一致.IE7及更早版本会返回HTML中所有可能的特性, 包括没有指定的特性. 换句话说, 返回100多个特性的情况会很常见.代码function

NodeList每个节点都有一个childNodes属性, 其中保存这一个NodeList对象. NodeList是一种类数组对象, 用于保存一组有序的节点, 可以通过位置来访问这些节点. NodeList对象的独特之处在于, 它实际上是基于DOM结构动态执行查询的结果, 因此DOM结构的变化能够自动反映在NodeList中. NodeList是”动态的”:var arrayOfNodes = Ar

简述 名称 功能 currentTarget 其事件处理程序当前正在处理事件的那个元素 target 事件的目标区别在事件处理程序内部, 对象 this 始终等于 currentTarget 的值, 而 target 则只包含事件的实际目标. 如果直接将事件处理程序指定给了目标元素, 则this \ currentTarget \ target 包含相同的值. 如果上面的句子

脚本位置由于脚本会阻塞页面其他资源的下载, 因此推荐将所有的< script >标签尽可能放到< body >标签的底部, 以尽量减少对整个页面下载的影响. 组织脚本Steve Souders发现, 把一段内嵌脚本放在引用外链样式表的< link >标签之后会导致页面阻塞去等待样式表的下载. 这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息. 因此, Souders建议永远不要把内嵌脚本紧跟

本篇博客为”高性能JavaScript”一书部分知识点学习笔记摘录.作用域链及和标识符解析每一个JavaScript函数都表示为一个对象, 要确切的说, 是Function对象的一个实例. Function对象同其他对象一样, 拥有可以编程访问的属性, 和一系列不能通过代码访问而仅供JavaScript引擎存取的内部属性. 其中有一个内部属性是[[Scope]].内部属性[[Scope]]包含了一

forEach定义: forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。其实forEach()是Array下的一个方法. 注意: 无法使用break等语句跳出遍历, 直到所有元素都传递给调用的函数, 但是可以使用抛出异常, 提前终止循环 兼容版本: 使用方法:<!DOCTYPE html><html lang="en"><head> <meta cha

…可能有人会说这是水贴, 可是我真的一直对addEventListener第三个参数不太懂, 因此令开一贴, 用例子分析一下它的作用.

let块级作用域ES6里增加了let，const, 声明在{}, -> “function,if ,for等” 的变量作用域被限制在块级。（严格模式下 function 变量属于块级作用域）例:{ let i = 0;}console.log(i);//报错Uncaught ReferenceError: i is not defined同时还可以解决闭包问题, 例如我们为10个div

解构赋值es6为我们对变量赋值提供了新的方式.方式1 : //ES5 var a = 1; var b = 2; var c = 3; //这是在es6之前的赋值方式 //ES6 var [a,b,c] = [1,2,3]; console.log(a,b,c);

Array.fromArray.from 方法用于将两类对象转为真正的数组：类似数组的对象(所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组) 和 可遍历的对象（ES6新增的数据结构 Set和Map）在ES5模式的时候我们一般将一个类数组变成一个数组的做法是 var arrayLike = {'0'

for ofES6提供三个新的方法——entries()，keys()和valueOf()——用于遍历数组。可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、valueof()是对键值的遍历，entries()是对键值对的遍历。对于下面let, 解析赋值不懂的同学, 可以看看我http://blog.youkuaiyun.com/c_kite/article/details/7247758

对象创建新方法ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 上面代码表明，ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。//例1: var foo = 'bar'; var baz1 = {foo}; console.log(baz1);// Object {foo: "bar"}; var baz2