用javascript生成回型矩阵 蛇形矩阵

回型/蛇形矩阵形式

1
2
3
4
1 2 3
8 9 4
7 6 5

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

阅读更多

viewport详解

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

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

基本用法

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

阅读更多

利用手机姿态使用websocket控制客户端css长方体姿态

前言

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

思路

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

阅读更多

利用deviceorientation事件获取手机姿态

兼容性

兼容性

api

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

阅读更多

ES6 Generator 函数

简介

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

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

阅读更多

使用fetch来取代Ajax

为什么要使用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);

阅读更多

ES6 promise 对象

含义

  • 状态

    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); // 返回数据
})
});
});

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

阅读更多

js监听对象属性变化

思路

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

1
2
3
var obj = {
a:null
}

阅读更多