javascript
2 分钟 读完 (大约 273 个字)

Set数据结构

Set

基本用法

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

阅读更多
作品
2 分钟 读完 (大约 364 个字)

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

前言

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

思路

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

阅读更多
javascript
1 分钟 读完 (大约 189 个字)

利用deviceorientation事件获取手机姿态

兼容性

兼容性

api

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

阅读更多
javascript
8 分钟 读完 (大约 1229 个字)

ES6 Generator 函数

简介

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

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

阅读更多
javascript
4 分钟 读完 (大约 665 个字)

使用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);
阅读更多
javascript
9 分钟 读完 (大约 1412 个字)

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

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

阅读更多
javascript
2 分钟 读完 (大约 238 个字)

js监听对象属性变化

思路

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

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';
作品
4 分钟 读完 (大约 658 个字)

js模拟alert,confirm,prompt Demo

目的

如果使用原生alert、confirm 等，若用户设置禁止弹窗会影响网页功能，所以使用模拟alert等更为合适。

思路

新建个构造函数，在其上加上属性方法来实现 alert、confirm、prompt功能。

部分代码

css部分

css 部分不多陈述，主要就是把这几个弹出框设置成 position:fixed 就行了，其余样式自己解决。

html部分

这里我对三个弹出框用了三个容器包裹，大部分样式相同。页面基础样式为了方便使用了 flex 布局，详细flex布局可以参照我之前的文章。 flex布局语法简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="alert layout">
        <div class="title">提示</div>
        <div class="close">+</div>
        <div class="content"></div>
        <div class="control">
            <a href="#" class="enter" id="alertEnter">确定</a>
        </div>
    </div>
    <div class="confirm layout">
        <div class="title">提示</div>
        <div class="close">+</div>
        <div class="content"></div>
        <div class="control">
            <a href="#" class="enter" id="confirmEnter">确定</a>
            <a href="#" class="cancel" id="confirmCancel">取消</a>
        </div>
    </div>
    <div class="prompt layout">
        <div class="title">输入内容</div>
        <div class="close">+</div>
        <input type="text" id="userInput">
        <div class="control">
            <a href="#" class="enter" id="promptEnter">确定</a>
        </div>
    </div>
    <div class="container">
        <div>alert</div>
        <button id="oAlert">原生alert</button>
        <button id="iAlert">模拟alert</button>
        <div>confirm</div>
        <button id="oConfirm">原生confirm</button>
        <button id="iConfirm">模拟confirm</button>
        <div>prompt</div>
        <button id="oPrompt">原生prompt</button>
        <button id="iPrompt">模拟prompt</button>
    </div>

javascript部分

阅读更多
作品
5 分钟 读完 (大约 751 个字)

使用websocket 的ws库构建聊天室

更新

现在开发了新版本 多房间聊天室

websocket

html5 新api，用于实现持久化连接，且不收跨域影响。通过HTTP 的Updrade头来升级协议。

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//创建实例
var socket=new WebSocket("ws://localhost:xxxx");
//发送数据
socket.send("hello world");
//接受数据
socket.onmessage=function(event){
	console.log(event.data)
}
//初始化事件
socket.onopen=function(){}
//关闭事件
socket.onclose=function(){}
//关闭连接
socket.close()

服务端

服务端这篇文章我使用了 ws 这个库。

1
npm install ws --save

Demo

新窗口打开
服务端随时可能关闭，仅供测试。 已关闭

tips

这里我使用了 vw vh 来做屏幕适配，之后我的博客会有专门文章来写这个

Demo 问题

阅读更多
css
2 分钟 读完 (大约 260 个字)

使用media query 实现响应式布局

media query 概念

media query 即是媒介查询，可以根据浏览器的不同特性来应用不同的css样式。
例如：

1
2
3
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者

1
2
3
4
5
<style type="text/css" media="screen">
	*{
		padding: 0px;
	}
</style>

以下我只讨论使用 screen 特性

media query screen

例子

例如

1
<link rel="stylesheet" href="style.css" media="screen and (min-width:640px) and (max-width:1080px)">

或者

阅读更多
关注我

友链

分类

标签云

ES6 ES7 angularjs canvas cli compiler css electron go http javascript lib mongodb node.js npm other react template typescript vue websocket 作品 教程 杂 算法 配置 音频

最新文章

归档

标签

ES6 7
ES7 1
angularjs 2
canvas 2
cli 1
compiler 1
css 8
electron 1
go 1
http 1
javascript 37
lib 1
mongodb 2
node.js 3
npm 3
other 3
react 4
template 1
typescript 1
vue 3
websocket 3
作品 7
教程 1
杂 1
算法 6
配置 2
音频 3

最新文章

归档

标签

ES6 7
ES7 1
angularjs 2
canvas 2
cli 1
compiler 1
css 8
electron 1
go 1
http 1
javascript 37
lib 1
mongodb 2
node.js 3
npm 3
other 3
react 4
template 1
typescript 1
vue 3
websocket 3
作品 7
教程 1
杂 1
算法 6
配置 2
音频 3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×