Promise简单实现

前言

你可能知道，javascript的任务执行的模式有两种：同步和异步。异步模式非常重要，在浏览器端，耗时很长的操作（例如ajax请求）都应该异步执行，避免浏览器失去响应。

在异步模式编程中，我们经常使用回调函数。一不小心就可能写出以下这样的代码：

1
2
3
4
5
6
7
8

//事件1
doSomeThing1(function(){
  //事件2
  doSomeThing2(function(){
    //事件3
    doSomeThing3();
  });
})

当你的需要异步执行的函数越来越多，你的层级也会越来越深。

这样的写法存在的缺点是：

1. 不利于阅读
2. 各个任务之间的高度耦合，难以维护
3. 对异常的处理比较难

用Promise可以避免这种回调地狱，可以写成这样

1
2
3
4
5
6
7
8
9
10
11
12
13

//事件1
doSomeThing1()
  .then(function(){
    //事件2
    return doSomeThing2();
  })
  .then(function(){
    //事件3
    return doSomeThing3();
  })
  .catch(function(){
    //这里可以很方便的做异常处理
  })

在市面上有许多库都实现了Promise，例如：Q.js 、when.js ，es6也将Promise纳入了标准中

es6 的 Promise使用方法可以参考阮一峰的 http://es6.ruanyifeng.com/#docs/promise ，我就不在做具体介绍

接下来，我们模仿ES6的promise，一步一步来实现一个简单版的Promise。

构造函数

我们使用Promise的时候，

1
2
3
4
5
6
7
8

const promise = new Promise((resolve, reject)=>{
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise是一个构造函数，接收一个函数，函数里有两个参数，resolve、reject。

REM 是什么

rem 这个单位代表根元素的 font-size 大小（例如 元素的font-size）。

所以当在根元素的font-size设置为 50px时，1rem = 50px

如何设置 font-size 会方便我们计算

由于我们设计稿是以 iPhone6 为基准，也就是 750*1334

而我们希望我们切图的时候，可以不用计算，按设计稿上的大小来写。

也就是 750rem = 设备宽度

那么，我们要如何设置的根元素的font-size呢？

1
2
3
4
5
6
7
8

注：realWidth: 设备真实宽度，rootFontSize：根元素字体大小

1rootFontSize = 1rem

750rem = realWidth

得出：rootFontSize = realWidth/750

实际使用的时候，发现计算出来的rootFontSize的值为：

• iPhone5：320/750等于 0.46666px
• iPhone6：375/750等于 0.5px

underscore源码分析

使用js小技巧

在阅读underscore的过程中，发现了它的一些小技巧，对我们平时的编程很有用。在这里向大家介绍一二

1. void 0 代替 underfined

首先，看源码：

1
2
3

_.isUndefined = function (obj) {
    return obj === void 0;
};

这里为啥要用 obj === void 0, 而不是 obj === undefined 呢？
因为，在 js 中，undefined并不是类似关键字（js关键字有function,return …），所以，理论上是可以更改的。
事实上，在IE8上也的确是可以被更改的,

1
2

var  undefined  =  1;
alert(undefined); // 1 -- IE8, undefined --- chrome

而在chrome或高版本的IE中，并不能更改全局的undefined。但是，局部的undefined仍然可以被改变。例如：

1
2
3
4

(function(){
   var  undefined  =  1;
   alert(undefined); // 1 -- chrome
})()

所以，undefined并不十分可靠，所以才需要void 0
void是js的保留字，所以不可被更改。在MDN上定义是：

The void operator evaluates the given expression and then returns undefined.
翻译：void操作符会对void后面的表达式进行运算，然后返回undefined

所以，使用void会一直返回undefined，所以，可以用void 0替代undefined.

underscore源码分析

如何实现不定参数

使用过underscore.js 的人，肯定都使用过以下几个方法：

1
2
3
4

_.without(array, *values) //返回一个删除所有values值后的array副本
_.union(*arrays) //返回传入的arrays（数组）并集
_.difference(array, *others)//返回来自array参数数组，并且不存在于other 数组
...

这些方法都有一个共同点，就是可以传入不定数量的参数，例如，我想删除掉array中的value1，value2，可以这样使用,_.without(array,value1,value2);

那么，这个需要怎样才能做到呢？

我们知道，js中function里面，有一个arguments参数，它是一个类数组，里面包含着调用这个方法的所有参数，所以可以这样处理：

1
2
3
4
5
6
7
8
9
10

_.without = function(){
   if(arguments.length > 0){
      var array = arguments[0];
      var values = [];
	  for(var i = 1 ; i < arguments.length; i++){
	     values.push(arguments[i])
	  }
	  //这样得到了array，和values数组，便可以进一步处理了
   }
}

使用canvas绘图

HTML5添加的最受欢迎的功能就是<canvas>元素，这个元素负责在页面中设定一个区域，然后就可以通过javascript动态的在这个区域中绘制图形

基本用法

1. 使用canvas元素，必须指定width，height属性
2. 开始标签和结束标签之间的内容，是后备信息。如果浏览器不支持canvas，则显示该信息
   <canvas id="drawing" width="200" height="200"> drawing something </canvas>
3. 要在画布（canvas）上绘图，需获取2D上下文。

   1 2 3 4 5

   var drawing = document.getElementById("drawing"); if(drawing.getContext){ //必须先判断，因为有些浏览器并没有getContext方法 var context = drawing.getContext("2d"); //更多操作 }

客户端检测

在现实当中，浏览器之间的差异以及不同浏览器的怪癖，多得不胜枚举。因此，客户端检测除了是一种补救措施之外，更是一种行之有效的开发策略

检测web客户端的手段有很多，而且各有利弊。但最重要的是要知道，不到万不得已，就不要使用客户端检测！如果能找到更通用的方法，应优先采用更通用的方法。既是，先设计通用的方案，在针对差异增强该方案

能力检测

能力检测的目标不是识别特定浏览器，而是识别浏览器的能力。只要确定浏览器的能力，就可以给出特定解决方案

• 检测的时候应该尽可能精确，例如，你想检测sort，不应该只检测是否存在sort属性，而应该更深一步检测sort是否是function类型的。而且需要注意typeof 在各个浏览器之间的差异
• 能力检测并非浏览器检测，并不能识别出特定的浏览器，因为其他浏览器新版本可能会改变，导致你的检测逻辑不严谨
• 检测完，应该把检测结果保存起来，这样就不需要每次都进行

例如：早期针对IE的检测：

1
2
3
4
5
6
7
8
9

function getElement(id){
   if(document.getElementById){
       return document.getElementById(id);
   }else if(document.all){
       return document.all[id];
   }else{
      throw new Error("getElementById不可用")
   }
}

面向对象的程序设计

理解对象

属性类型

1.数据属性

特性：

• Configurable : 表示能否通过delete删除属性，能否修改属性特性，能否把属性改为访问器属性
• Enumerable ： 表示能否通过for in 循环返回
• Writable : 表示能否修改属性的值
• Value ： 包含属性的值，读取或写入实际上操作的是这个值

2.访问器属性

事件

事件流

• 事件冒泡
• 事件捕获
• DOM事件流
  DOM2级事件规定事件流分为三个阶段：
  1. 事件捕获阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

IE9、Opera、Firefox、Chrome和safari都支持DOM事件流；IEB及更早版本不支持

事件处理程序

HTML事件处理程序
在HTML中指定事件缺点:

1. 存在时差问题，加载html的时候，js可能并没有加载完全
2. 作用域链在不同的浏览器可能会导致不同的结果
3. 使HTML和javascript紧密耦合，一旦修改，需同时修改js以及html

DOM0级事件处理：

1
2

xxx.onclick  = function(){ dosomething() }; //添加事件监听
xxx.onclick = null;//删除事件监听

引用类型

引用类型的值（对象）是引用类型的一个实例。在ECMAScript中，引用类型是一种数据结构，将数据和功能组织在一起

Object 对象

创建Object实例方法有两种：

1. 使用构造方法：new Object();
2. 使用对象字面量 var obj = { name：'andy chen' }

使用对象字面量定义对象的时候，实际上并不会调用构造方法，推荐使用对象字面量方法

访问对象属性的方法也有两种：

1. 点表示法 例如： console.log(obj.name)
2. 方括号法 例如： console.log(obj["name"])
   阅读全文 »

1 . 高级函数

安全的类型检测

• js内置的类型检测并非完全可靠，typeof操作符难以判断某个值是否为函数
• instanceof在多个frame的情况下，会出现问题。
  例如：var isArray = value instance of Array ;
  会由于存在多个window，而value与Array不属于同个window的情况而导致出错

对于这样的问题，最好的解决方法是通过调用Object的toString方法，例如：

1
2
3

function isArray(){
    return Object.prototype.toString.call(value) == "[object Array]";
}

注意，这个技巧前提是Object.prototype.toString方法未被修改过