Web 开发 | AlloyTeam

In 未分类 on 2014年05月04日 by TAT.dmyang view: 53,448

24

本篇，主要普及 promise 的用法。

一直以来，JavaScript 处理异步都是以 callback 的方式，在前端开发领域 callback 机制几乎深入人心。在设计 API 的时候，不管是浏览器厂商还是 SDK 开发商亦或是各种类库的作者，基本上都已经遵循着 callback 的套路。

腾讯 AlloyTeam 招聘 Web 前端工程师 2014

In 未分类 on 2014年04月03日 by TAT.Kinvix view: 65,250

99

腾讯 AlloyTeam 时隔 2 年，再次对外开放社会招聘机会，想加入 AlloyTeam 的 Web 前端开发工程师请抓紧！工作职责主要负责腾讯手机 QQ、PC QQ 中的 Web 业务的前端开发。如果你热爱面向 Web 的前端开发工作，欢迎前来应聘，机会难得，各种挑战等着你～～

岗位名称：Web 前端开发工程师（T2-T3 级别）

AlloyDesigner 新版本特性之 “DOM 分析器” 使用教程

In 未分类 on 2014年04月01日 by TAT.dorsywang view: 22,228

5

DOM 分析器是 AlloyDesigner 在 V1.1.0 版本中引入的新特性
DOM 分析器有以下几个特点

显示文档中的元素与属性
属性使用 JSON 数据直观表示
显示元素在文档中的位置
独有的元素预览功能

腾讯 Codestar 第二季《前端突击队》疯狂来袭

In 未分类 on 2014年03月25日 by TAT.老教授 view: 59,267

127

去年 CodeStar 第一季《前端特工》带来的热潮还没完全过去，3 月 21 号，短短几个月后 AlloyTeam 团队又强势推出了 CodeStar 第二季《前端突击队》，这次又将会给各位前端 er 带来什么视觉、体验和智力挑战上的盛宴？

全新理念的 Web 前端开发方式——AlloyDesigner

In 未分类 on 2014年03月10日 by TAT.Kinvix view: 49,971

55

AlloyDesigner 介绍

　　AlloyDesigner 的创意来自于 “临摹” 的灵感，使用 AlloyDesigner 后，你可以把设计稿拖进你的 Web 页面铺在页面的最底层，然后就可以对着设计稿来构建 DOM 元素和 CSS 样式啦，这样子是不是直观了很多？通过 AlloyDesigner 直观地调整页面，迅速达到与视觉稿一致的目的。

AlloyDesigner 的官网：http://alloyteam.github.io/AlloyDesigner/

前端相关数据监控

In 未分类 on 2014年03月04日 by TAT.Perlt view: 35,733

19

项目开发完成外发后，没有一个监控系统，我们很难了解到发布出去的代码在用户机器上执行是否正确，所以需要建立前端代码性能相关的监控系统。

所以我们需要做以下的一些模块：

一、收集脚本执行错误

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function error(msg,url,line){

var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息

var m =[msg, url, line, navigator.userAgent, +new Date];// 收集错误信息，发生错误的脚本文件网络地址，用户代理信息，时间

var url = REPORT_URL + m.join('||');// 组装错误上报信息内容URL

var img = new Image;

img.onload = img.onerror = function(){

img = null;

};

img.src = url;// 发送数据到后台cgi

}

// 监听错误上报

window.onerror = function(msg,url,line){

error(msg,url,line);

}

通过管理后台系统，我们可以看到页面上每次错误的信息，通过这些信息我们可以很快定位并且解决问题。

更快的异步执行

In 未分类 on 2014年03月03日 by TAT.Cson view: 42,939

20

如果要异步执行一个函数，我们最先想到的方法肯定会是 setTimeout
例如：setTimeout(function( /* 1s 后做点什么 */){},1000}

那如果说要最快速地异步执行一个函数呢？
是否会是：

1	setTimeout(function( /* 尽快做点什么 */){},0}

可惜的是，浏览器为了避免 setTimeout 嵌套可能出现卡死 ui 线程的情况，为 setTimeout 设置了最小的执行时间间隔，不同浏览器的最小执行时间间隔都不一样。chrome 下测试 setTimeout 0 的实际执行时间间隔大概在 12ms 左右。

JS、CSS 以及 img 对 DOMContentLoaded 事件的影响

In 未分类 on 2014年03月03日 by TAT.kerry95 view: 27,853

14

最近在做性能有关的数据上报，发现了两个非常有意思的东西：Chrome 开发者工具的 Timeline 分析面板，以及 DOMContentLoaded 事件。一个是强大的令人发指的性能分析工具，一个是重要的性能指标，于是就用 Timeline 对 DOMContentLoaded 事件进行了一番研究。

停不下来的前端，自动化流程

In 未分类 on 2014年03月01日 by TAT.yuanyan view: 38,940

18

流程

关于流程，是从项目启动到发布的过程。在前端通常我们都做些什么？

用 d3.js 实现基于 SVG 的柱状图

In 未分类 on 2014年02月28日 by TAT.云中飞扬 view: 13,249

5

之前用 6 步实现了基于 SVG 的折线图，这一篇文章将回到比折线图更基本的图表——柱状图。

本篇直接从创建 SVG 讲起，引入 d3 等简单的准备工作参见用 d3.js 实现基于 SVG 的线形图。

step1：模拟数据

1

2

3

4

5

// 模拟100条0-100的随机数，作为柱状图的高度

var data = Array.apply(0, Array(100)).map(function() {

return Math.random() * 100;

});

step2：创建 SVG 容器

1

2

3

4

5

6

7

8

9

10

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 chart = d3.select('body')

.append('svg')

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

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

.append('g')

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

这里的代码就不解释了，前一篇文章已经详细说明。chart 就是最终建立的容器，下面就往容器里面放元素。

step3：画柱状图

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 计算每根柱状物体的宽度

var barWidth = width / data.length;

// 用g作每根柱状物体的容器，意义可类比div

// 前一篇文章已经介绍过selectAll的意义，即生成占位符，等待填充svg图形

var bar = chart.selectAll('g')

.data(data)

.enter()

.append('g')

// 接收一个数据填充一个g元素

// 同时为g设置位置

.attr('transform', function(d, i) {

return 'translate(' + i * barWidth + ', 0)';

});

bar.append('rect')

// 添加一个矩形

.attr('y', function(d) {

return height - d;

})

.attr('height', function(d) {

return d;

})

.attr('width', barWidth - 1);

前文提到 svg 的元素定位都是基于整个 svg 容器左上角作为原点，但并不能使用 position: absolute 等方法定位，此处的 g 元素通过位移来定位 x 坐标，即 transform: translate(x, 0)。

这里的 bar 可类比 jQuery 对象，是一个类数组对象，bar 调用的方法都会对 bar 里面每个对象进行调用。代码中每一次调用都插入一个矩形，同时设置 y 坐标、高度和宽度，x 坐标跟父容器（g）保持一致即可。这里需要注意 y 坐标往下为正，为了让所有矩形的下边处于同一高度，这里设置每个矩形的 y 坐标为容器高度减去矩形高度。为了用一像素区分开每个矩形，这里设置矩形宽度为父容器的宽度减 1。

通过以上 js 代码再稍微设置一点 css

1

2

3

rect {

fill: #2177BB;

}

即可看到一张最简单的柱状图了。

step4：添加坐标轴

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var y = d3.scale.linear()

.domain([0, d3.max(data)])

.range([height, 0]);

var xAxis = d3.svg.axis()

.scale(x)

.orient('bottom')

.ticks(1);

var yAxis = d3.svg.axis()

.scale(y)

.orient('left');

// 添加x坐标轴

chart.append('g')

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

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

.call(xAxis);

// 添加y坐标轴

chart.append('g')

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

.call(yAxis);

完整的柱状图就是这样了

完整的代码请移步 jsFiddle

由于篇幅关系，本篇文章就暂时只介绍最基本的柱状图是怎么完成的，后续会更新动态柱状图以及为柱状图添加交互系效果的实现方法，敬请期待！