回型/蛇形矩阵形式

1
2
3
4

1  2  3
8  9  4
7  6  5

上述这种形式即为蛇形矩阵。

viewport概念

viewport 是一个移动专属的 meta 值，用于设定“视窗口”的各种行为。
因为css中的1px往往不等于移动设备中的1px，因为移动设备像素密度越来越高，所以后来就有移动设备上2px表示css中1px。例如 iphone5 的屏幕像素宽度是640px，在css中既是320px。
总之 viewport 就像一个容器把原本比较大的屏幕挤到特定大小。

viewport 属性

viewport一般形式如下

1
2

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

其中content 内容为其属性。

ES6引入Map的目的

js 的对象本质上就是键值对集合也就是 Hash结构，但是只能用字符串作为键值，而 Map 就可以解决这个问题。

用法

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

var m= new Map();
var o={
	a:1
};

m.set(o,"123");
m.get(o);  // "123"

m.has(o);  // true
m.delete(o); // true
m.has(o); // false

Set

基本用法

Set 是ES6 新的数据结构，类似于数组，但每一项都是唯一的没有重复项。

前言

我之前有篇文章写了利用deviceorientation事件获取手机姿态。既然可以获取手机在三位空间内的与坐标轴角度，也就可以通过这来控制网页中css长方体的姿态。至于在两个网页/客户端传输数据，当然是用websocket最好了。这里刚好我之前做过两个小demo关于这个。

• CSS3 3D立方体
• 使用websocket 的ws库构建聊天室

思路

这个 Demo 分为客户端，控制端和服务端。客户端是一个用css3写的三维的长方体，只接受websocket数据。

兼容性

api

首先在三位空间内正常拿着手机 x 轴方向由左向右， y 轴从下到上， z 轴垂直于手机屏幕向外。

简介

Genertor 函数是ES6提供的一种异步编程解决方法，从语法上，首先从语法上可以理解成一个成一个状态机，封装了多个内部状态。

执行 Generertor 函数会返回一个遍历器对象。也就是说， Generator 函数处理是状态机，还是一个遍历器对象生成函数。返回的遍历器对象，一次遍历Generator函数内部每一个状态。

为什么要使用Fetch

传统ajax or XMLHttpRequest()往往非常复杂的，而且并不好记忆。例如手写一个ajax ：

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

var xhr = new XMLHttpRequest();
//不考虑浏览器兼容性
xhr.open("get","garychang.cn",true);
xhr.onreadystatechange=function(){
	if(xhr.readyState==4){
		if(xhr.status>=200&&xhr.status<300||xhr.status==304){
			console.log(xhr.responseText);
		}
	}
}
//或者 onload方法稍稍简单点。
xhr.onerror=function(err){
	//error......
}
xhr.send(null);

含义

• 状态

  promise 对象代表一个异步操作，有三种状态：

  • Pending 进行中
  • Resolved 已完成 （又称Fulfilled）
  • Rejected 失败

• 特点
  一旦状态改变就不会在改变。

目的

解决回调写法的混乱以及一个统一标准。

以下文字至“用法”前来源于 原文连接

假设有一个数据库保存操作，一次请求需要在三个表中保存三次数据。那么我们的代码就跟上面的代码相似了。这时候假设在第二个db.save出了问题怎么办？基于这个考虑，我们又需要在每一层回调中使用类似try…catch这样的逻辑。这个就是万恶的来源，也是node刚开始广为诟病的一点。

1
2
3
4
5
6
7
8
9
10

db.save(data, function(data){
    // do something...
    db.save(data1, function(data){
        // do something...
        db.save(data2, function(data){
            // do something...
            done(data3); // 返回数据
        })
    });
});

另外一个缺点就是，假设我们的三次保存之间并没有前后依赖关系，我们仍然需要等待前面的函数执行完毕, 才能执行下一步，而无法三个保存并行，之后返回一个三个保存过后需要的结果。（或者说实现起来需要技巧）

思路

监听对象属性变化有两种方法：回调函数、使用访问器属性。
首先定义一个对象

1
2
3

var obj = {
	a:null
}

回调函数

使用回调函数思路是定义一个函数来设置对象的属性，之后在调用回调函数

定义监听函数

1
2
3
4
5
6
7
8
9
10
11

function $watch(obj, prop, callback) {
    if (!obj.$property) {
        obj.$property = function(prop, value) {
            if (this[prop] != value) {
                this[prop] = value;
                return callback(this);
            }
            return this;
        }
    }
}

触发回调

1
2
3

$watch(obj,'a',function(obj){
	console.log("obj的属性a的发生改变："+obj.a);
})

更改属性值

1

obj.$property('a','random')

访问器属性

使用访问器属性即使用set get 属性，可以通过 Object 的 defineProperty 方法访问到。此方法有兼容性问题 ，这里我只监听属性更改，没有修改。

监听

1
2
3
4
5

Object.defineProperty(obj,"a",{
    	set:function(val){
    		console.log("obj的属性a的发生改变："+val);
    	}
    });

更改属性值

1

obj.a='random';