AlloyTeam

Node.js 异常捕获的一些实践
In Node.js on 2013年12月31日 by TAT.dmyang view: 40,224
3

本文 github 地址

本篇谈谈 Node.js 捕获异常的一些探索。

采用事件轮训、异步 IO 等机制使得 Node.js 能够从容应对无阻塞高并发场景，令工程师很困扰的几个理解 Node.js 的地方除了它的事件（回调）机制，还有一个同样头痛的是异常代码的捕获。

继续阅读

In JavaScript,Web开发 on 2013年12月30日 by TAT.云中飞扬 view: 28,112

D3 全称 Data-Driven-Documents，这里说的不是暗黑 III，d3 是一款可视化 js 库，其主要用途是用 HTML 或者 SVG 生动地展现数据。

相信网站开发者大都接入过 ga 来分析各种数据，例如 pv 图。ga 的图都是基于 SVG 的，下面笔者就用 d3 来一步一步实现类似 ga 的 pv 线形图，并假设读者具有一定的 SVG 基础（没有？没关系，w3school 帮你快速上手）。

step1：引入 d3.js

到 github d3 下载最新版 d3，然后在 html 代码增加标签

1 2	<script src="path/to/d3.js"></script> <!--more-->

step2：创建 SVG 容器

var margin = {top: 20, right: 20, bottom: 30, left: 50},

width = document.body.clientWidth - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

var container = d3.select('body')

.append('svg')

.attr('width', width + margin.left + margin.right)

.attr('height', height + margin.top + margin.bottom);

var svg = container.append('g')

.attr('class', 'content')

.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

margin、width、height 定义了 svg 节点的位置和尺寸，后面会用到。d3.select 类似 jquery 的选择器，并且 d3 的语法也支持串联调用，append('svg') 将 svg 追加到 body 的尾部，同时为 svg 节点设置了宽度和高度值，attr 也有 get 和 set 两种用法。

svg 的 g 元素类似于 div，在这里作为一组元素的容器，后面加入的元素都放在 g 里面，g 可以设置统一的 css，里面的子元素会继承可继承 css 属性。margin 和 position 对 g 的定位不起作用，只能使用 translate 通过位移来定位。

step3：定位坐标轴

既然 d3 是数据驱动的，那必须要有数据啊，没有数据肿么能搞呢。好吧，首先模拟一份数据，就模拟本月的 pv 数据吧，即 12 月每天的 pv 数据，日期采用 yy-mm-dd 的格式，pv 随机一个 100 以内的整数。

var data = Array.apply(0, Array(31)).map(function(item, i) {

// 产生31条数据

i++;

return {date: '2013-12-' + (i < 10 ? '0' + i : i), pv: parseInt(Math.random() * 100)}

});

然后定义坐标轴的一些参数

var x = d3.time.scale()

.domain(d3.extent(data, function(d) { return d.day; }))

.range([0, width]);

var y = d3.scale.linear()

.domain([0, d3.max(data, function(d) { return d.value; })])

.range([height, 0]);

横坐标是日期，这里使用 d3.time 自动帮我们在时间和字符串之间做转换。y 轴使用普通的线性缩放坐标轴。其实这里的 x 和 y 也是一个 function，后续会用到。
domain 规定了坐标轴上值的范围，d3.extent 从数组里选出最小值和最大值，d3.max 选数组里面最大值。range 规定了坐标轴端点的位置，svg 的坐标原点是左上角，向右为正，向下为正，而 y 轴正方向为由下向上，所以 (0, height) 才是图表的坐标原点。
然后使用 d3 的 axis 定制坐标轴

var xAxis = d3.svg.axis()

.scale(x)

.orient('bottom')

.ticks(30);

var yAxis = d3.svg.axis()

.scale(y)

.orient('left')

.ticks(10);

orient 有四个参数（left、right、top、bottom）定义了坐标轴的位置，这里很好理解。
ticks 定义了坐标轴上除最小值和最大值以外最多有多少个刻度，因为一个月最多有 31 天，ticks(30) 就足以展示每天的刻度了。

然后就可以把坐标轴加进 svg 容器了

// 横坐标

svg.append('g')

.attr('class', 'x axis')

.attr('transform', 'translate(0,' + height + ')')

.call(xAxis)

// 增加坐标值说明

.append('text')

.text('日期')

.attr('transform', 'translate(' + width + ', 0)');

// 纵坐标

svg.append('g')

.attr('class', 'y axis')

.call(yAxis)

.append('text')

.text('次/天');

加上坐标轴之后的效果图应该是这样

step4：画线

有了坐标轴之后我们可以加上图表的主体部分了，pv 图应该是一条折线图。怎么加折线呢，d3 提供了丰富的图表元素，需要折线只需要 append('path') 即可，了解 svg 的都知道，path 的 d 属性是最重要的，决定了折线的 “路径”，这里就不详细讲解 path 了。

我们只有一个数组的数据，怎么转化成需要的 d 呢，别担心，d3 帮我们做了这部分工作。首先需要用 d3.svg.line 生成一个 “线条函数”，然后将数据传给该函数即可生成我们想要的 d，我们需要做的就是定制这个 “线条函数” 的两条坐标轴分别由数据的哪部分决定。

下面看代码

var line = d3.svg.line()

.x(function(d) { return x(d.date); })

.y(function(d) { return y(d.pv); })

.interpolate('monotone');

上面的代码很好理解，设置了 x 坐标轴由 date 属性决定，y 坐标轴由 pv 属性决定，最后还调用了 interpolate，该方法会改变线条相邻两点之间的链接方式以及是否闭合，接受的参数有 linear，step-before，step-after，basis，basis-open，basis-closed，bundle，cardinal，cardinal-open，cardinal-closed，monotone，读者可以一一尝试，看看线条有什么不一样。

“线条函数” 生成好了，可以应用到 path 上了

var path = svg.append('path')

.attr('class', 'line')

.attr('d', line(data));

此时的图应该是这样了

step5：打点

到这里其实基本的图形已经实现了，只用了应该不到 20 行代码，不过这也太丑了点吧，而且完全木有交互啊。

别急，ga 的 pv 图在每个数据点都会有一个小点来占位，其实本来我们的数据就是离散的，图上也应该是离散的一些点，不过为了图表好看，也为了方便查看数据的走势，折线图显然更形象一些。

下面就在折线上增加相应的点，点我们可以用 circle，要增加元素用 append 即可

var g = svg.selectAll('circle')

.data(data)

.enter()

.append('g')

.append('circle')

.attr('class', 'linecircle')

.attr('cx', line.x())

.attr('cy', line.y())

.attr('r', 3.5)

.on('mouseover', function() {

d3.select(this).transition().duration(500).attr('r', 5);

})

.on('mouseout', function() {

d3.select(this).transition().duration(500).attr('r', 3.5);

});

这里的代码可能复杂一点，因为 circle 不止一个，需要使用 selectAll，而 circle 现在是还不存在的。selectAll('circle') 的作用可以理解成先预定若干个 circle 的位置，等有数据了再插入 svg 容器里。

enter 就表明有数据来了，将每个 circle 放到单独的 g 里面，这里没有特殊的用意，就像 html 里面习惯用 div 来装其他元素一样。

为 circle 设置一些属性，cx、cy 代表圆心 x、y 坐标，line.x() 和 line.y() 会返回折线上相应点的 x、y 坐标，这样添加的 circle 就依附在折线上了。r 表示圆半径，同时为 circle 添加了两个鼠标事件，这样鼠标在 circle 上移动和移出的时候增加了圆半径变化的一个动画。

效果图

step6：增加 tips

现在看整体数据倒是可以了，不过看某天的具体数据还是太不方便了，如果在 circle 上直接标注出具体的数据又太挫了。

咋办？嘿嘿，参考 ga 呗。ga 在鼠标经过某点的纵坐标所在的直线的时候就会在改点附近出现具体的数据 tips，赞，既能清晰地看到整体的走势又能看到每天的具体数据。

先上效果图

图中用一个圆角矩形和两行文字组成了一个简单的 tips

var tips = svg.append('g').attr('class', 'tips');

tips.append('rect')

.attr('class', 'tips-border')

.attr('width', 200)

.attr('height', 50)

.attr('rx', 10)

.attr('ry', 10);

var wording1 = tips.append('text')

.attr('class', 'tips-text')

.attr('x', 10)

.attr('y', 20)

.text('');

var wording2 = tips.append('text')

.attr('class', 'tips-text')

.attr('x', 10)

.attr('y', 40)

.text('');

为啥要用矩形呢，为啥不直接在 g 上设置圆角效果呢？实践证明对 g 设置的 width、height、border-radius 均无效，无赖只能使用 svg 的 rect 元素了。

rx、ry 是圆角两个方向的半径，原理同 border-radius。展示文字用 text 元素即可，这里的 x 和 y 还是坐标，不过是相对于父元素 g 的坐标。

最后的关键是怎么让 tips 出现在该出现的位置和展示对的数据，即鼠标经过某个点的纵坐标所在的直线是 tips 出现在改点附近，且展示改点的数据。

container

.on('mousemove', function() {

var m = d3.mouse(this),

cx = m[0] - margin.left;

var x0 = x.invert(cx);

var i = (d3.bisector(function(d) {

return d.date;

}).left)(data, x0, 1);

var d0 = data[i - 1],

d1 = data[i] || {},

d = x0 - d0.date > d1.date - x0 ? d1 : d0;

function formatWording(d) {

return '日期：' + d3.time.format('%Y-%m-%d')(d.date);

}

wording1.text(formatWording(d));

wording2.text('PV：' + d.pv);

var x1 = x(d.date),

y1 = y(d.pv);

// 处理超出边界的情况

var dx = x1 > width ? x1 - width + 200 : x1 + 200 > width ? 200 : 0;

var dy = y1 > height ? y1 - height + 50 : y1 + 50 > height ? 50 : 0;

x1 -= dx;

y1 -= dy;

d3.select('.tips')

.attr('transform', 'translate(' + x1 + ',' + y1 + ')');

d3.select('.tips').style('display', 'block');

})

.on('mouseout', function() {

d3.select('.tips').style('display', 'none');

});

这段长长的代码需要重点解释一下，首先是 d3.mouse(this)，这个方法会返回当前鼠标的坐标，是一个数组，分别是 x 和 y 坐标。

下面这一步最重要的一点来了，x.invert(cx) 跟据传入的横坐标数值返回该横坐标的实际数据上的值，在本例中返回一个日期。

下面的 i 是根据返回的日期反向得到 data 数组中的元素位置。有了这个 i 一切都好办了，接下来的代码是为了判断鼠标在两个日期之间离哪个更近。

后面的代码都很简单了，拿到了 tips 应该出现的 x、y 坐标之后设置 tips 的 transform 即可，再控制 tips 的 display 属性就达到了最后的效果。

查看最后的代码请移步 http://jsfiddle.net/jarvisjiang/wh877/

That‘s all.

CSS 的障眼法：利用 border 实现图片的翻转
In Web开发 on 2013年12月30日 by TAT.Cson view: 15,557
8

兼容：IE7 8 9 10 chrome firefox
demo 地址

之所以说这是 CSS 的障眼法，是因为这种效果并不是使用 CSS 原生的属性进行实现的，并不仅仅是使用一张图片，然后通过特定属性使其翻转，因为我们知道 CSS 并不提供另图片翻转的接口。要实现这种效果，我们需要的是通过图片和外层 div 的 border 的配合，使图片看起来翻转了一定角度。

继续阅读

Android 音频模块学习小结
In Android 开发,移动开发 on 2013年12月30日 by TAT.zerozheng view: 11,693
0

现在移动端已不仅仅局限于文本、图片这些 pc 平台上的常见信息类型，语音的使用愈见频繁，于是前段时间萌生了个想法：如果在移动端对语音内容做处理，提取特征出来构建关键词库是否可以对这些语音进行分类、搜索，于是花了一段时间研究 android，本文从音频的录制、处理来记录总结，识别下篇放上。

一、音频系统的架构

安卓系统里的音频模块可划分为几层：硬件、驱动、硬件抽象层、硬件与 java 库之间的 “中介”、Framework（供 app 调用的接口都封装在这层）、实际用户可视的 app。

二、语音录制

继续阅读

Cocos2D-X2.2 在 Mac 上的安装与创建新工程
In iOS 开发,移动开发 on 2013年12月30日 by TAT.Minren view: 9,162
2

手边有一台 iMac，听说 cocos2d 比较流行就想尝试一下。

首先到官网看文档，http://www.cocos2d-x.org/wiki

看了 2 天，完全不知所云。我想再 mac 上开发 ios 版本的，结果大部分都是 android 相关的，或这 windows 平台的内容。先看看下载的安装包吧。

下载的 2.2 版本，里面真是程序猿风格，一篇文档说明都木有。既然文档没用就自己试吧。

进入 samples/Cpp/HelloCpp/pro.ios/目录找到一个 Xcode 的工程文件。双击打开，然后运行，居然没有报错，顺利打开模拟器，还能运行。

继续阅读

小米 WIFI 预定页面是如何出声的？
In Web开发 on 2013年12月26日 by TAT.Minren view: 8,382
5

小米又做了一个成功的营销。在首页上放了 7 个三色的小米随身 WIFI 图片，每个图片是一个琴键，各代表一个音节，按照提示可以弹出《铃儿响叮当》。然后就出现了小米 WIFI 的预订页面。

这个页面估计又要在微博、微信中疯转了。小米的互联网营销技巧实在是无法望其项背。所以这里就谈谈技术实现吧。

继续阅读

Web 设计基础知识（三）
In Web开发,用户体验设计 on 2013年12月26日 by TAT.sheran view: 12,906
2

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/***************************接上文《Web 设计基础知识 (二)》*****************************/

2) layOUT

1) Layout-布局四原则（principles）

1、contrast 对比

继续阅读

Web 设计基础知识 (二)
In Web开发,用户体验设计 on 2013年12月26日 by TAT.sheran view: 12,286
5

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/****************************接上文《Web 设计基础知识 (一)》**************************/

2、What to learn?

在做好设计之前，首先你需要学习一些基本的知识：Colors（颜色） + layOut（布局）

1) Color

继续阅读

Web 设计基础知识 (一)
In Web开发,用户体验设计 on 2013年12月26日 by TAT.sheran view: 12,608
4

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/************************** 文章华丽开场*******************************/

继续阅读

【视频】modern workflows for modern webapps 之 grunt 入门
In JavaScript,资源工具 on 2013年12月22日 by TAT.woshayawo view: 9,378
13

前端的发展越来越快，项目越来越大，越来越复杂，如何简单高效的组织开发流程就显得尤为重要。

所以 alloyteam 决定推出介绍现代化 webapp 的开发流程的一系列视频教程，今天就为大家呈上第一部【grunt 入门】。

继续阅读

上页 1 ...38 39 40 41 42 43 44 45 46 47 ...61 下页