Angular2 使用体验

In 未分类 on 2015年07月31日 by TAT.simplehuang view: 12,273

10

Angular2 开发者预览版出来已有一段时间，这个以速度与移动性能为目的的框架到底如何，今天我们来尝试一下。

在官网有一段号称 5 分钟入门的教程：

quick start： https://angular.io/docs/js/latest/quickstart.html

flow–facebook 出品的 javascript 静态类型检查器

In 未分类 on 2015年07月31日 by TAT.will view: 7,418

5

起源

众所周知，js 是一门弱类型的语言，类型转换往往隐含在各种业务代码中，同时也埋下了不少的坑。比如以下代码

1

2

3

4

5

6

7

8

9

// return string

function getEnvVersion(){

return '1.1.1';

}

// '1.1.1' > 0 => false, so nothing happen

if(getEnvVersion() > 0){

// doSthAwesome();

}

前端逻辑和 Node 直出复用与重构

In 未分类 on 2015年07月31日 by burlin view: 3,033

1

不得不聊到的重构简介

要实现软件演化基本准则，最关键的策略就是重构，Martin Fowler 将其定义为” 在不改版软件外部行为的前提下，对其内部结构进行改变，使之更容易理解并便于修改 “。

复用的理由

重复的代码，几乎是代表着对最初设计彻底分解方面的一个失误。无论何时，如果需要对某个地方进行修改，你都不得不在另一个地方进行完成同样的修改，这样你就陷入了两线作战的境地。重复的代码同样违背了代码哲学 DRY 原则：”Don’t Repeat Yourself“

使用 Abstract 2.0 构建页面

In 未分类 on 2015年07月31日 by TAT.dorsywang view: 1,845

5

为什么是 2.0?

Abstract 1.0 去哪了？1.0 就在这里

react 组件间通信

In 未分类 on 2015年07月30日 by TAT.Fujun view: 16,585

24

通信是发送者通过某种媒体以某种格式来传递信息到收信者以达致某个目的（摘至维基百科）。

前两天为了练习 react，自己写了如下一个 Demo，功能很简单，展示学生成绩列表，支持按性别和姓名筛选。效果如下：

从上面的效果图，我们也可以看到如下的组件树结构：

是时候升级你的 gulp 到 4.0 了

In 未分类 on 2015年07月29日 by TAT.云中飞扬 view: 13,591

3

不得不说的废话

随着前端工程化的推进，相信越来越多的项目都用上了自动化构建。
对前端构建来说，使用最多的莫过于 grunt 和 gulp。

本文的主角是 gulp，所以花一两句话来介绍 gulp 还是有必要的。

gulp 是一款基于 stream 的前端构建工具，由于底层使用 stream，可以将多个任务无缝串连在一起，相比使用临时文件的 grunt 要快不少；同时也不用像 grunt 一样写一大堆配置文件，每一个任务都可以可编程的来完全控制逻辑。

gulp 比 grunt“快” 这是公认的事实，这里不再过多比较两者之间的差异，还是那句话，各有千秋吧。

这是前端最好的时代——论前端的 “三化” 建设

In 未分类 on 2015年07月28日 by TAT.heyli view: 4,143

6

CSDN 原文链接：http://www.csdn.net/article/2015-07-17/2825243-alloy-team-leehey

摘要：深 JS 大会近日在深圳举办，涵盖了 JS 领域众多热点话题，很多专家的精彩分享更是引起参会者的诸多思考，如赫门演讲中提出的 “每 18 至 24 个月，前端都会难一倍”。本文来自腾讯 AlloyTeam 李成熙，分享了他参会的所见所感。

JS 中国开发者大会于 7 月 11-12 日在深圳成功举办。该大会号称 JavaScript 和 Node.js 领域含金量最高的技术分享大会，聚集了来自国内外 20 多位讲师及大量 JS 技术爱好者，几乎涵盖了 JS 领域的所有热点话题。会后，腾讯 AlloyTeam 李成熙特别撰写了该文章，分享了他参会的所见所感。

Canvas 画椭圆的方法

In 未分类 on 2015年07月26日 by TAT.vorshen view: 10,656

2

虽然标题是画椭圆，但是我们先来说说 Canvas 中的圆

相信大家对于 Canvas 画圆都不陌生

编程小技巧分享 (队列回调)

In 未分类 on 2015年07月25日 by TAT.finlay view: 4,117

7

场景描述

有时候我们会碰到这样的任务场景，需要在一个界面上展示，许多图表内容，而获取图表数据的 CGI 做得非常原子化，也不方便更改，那么只能发很多个请求来拉取数据，展示图表，大致像下面的界面。

或者有时候，希望一系列函数按照一定顺序自动执行，但里面内嵌各种回调，完全不知道函数何时执行。可能不得不使用标志位来记录执行阶段。(当然可以使用 promise, 这里是尝试给出另外一种解决方案和思路), 这样代码看来一团糟，作为有处女座潜质的程序员多少有些纠结。

背景交代完毕，现在是正题，小技巧分享。
其实呢，我们需要的只是一个有加载顺序的队列来完成任务。
但是这里有个思维难点是程序执行流程并非线性推进，而是通过事件推进，不符合常规的线性思维方式。

我就想了一种可以让代码看起来更线性的一种方案.

代码如下:

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

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

var queuePool = (function(){

var pools = [] ,

isRunning = false ;

function walk(){

var runner = pools.shift();

if( runner ){

runner( walk );

}else{

isRunning = false ;

}

return {

add : function( fn ){

pools.push( fn );

} ,

run : function(){

if( !isRunning ){

isRunning = true ;

walk();

}

};

})();

//添加一个执行队列函数

queuePool.add( function( callback /**后续执行函数**/ ){

setTimeout( function(){

alert(1);

callback();

} , 500 );

});

queuePool.add( function( callback /**后续执行函数**/ ){

setTimeout( function(){

alert(2);

callback();

} , 1500 );

});

queuePool.add( function( callback /**后续执行函数**/ ){

alert(3);

});

queuePool.run();

queuePool.add( function( callback /**后续执行函数**/ ){

$.ajax({

url : url ,

data : {

date : formatTime( new Date() ),

referer : data.referer

} ,

dataType : “json” ,

success : function( response ){

var data = [] , i = 0 ,

result = response.result.data;

for( ; i < result.length ; ++i ){

data.push( Number( result[i].counter ) );

}

$(el).kendoSparkline({

data: data

});

callback();

} ,

fail : function(){

callback();

}

});

queuePool.run();

这里我做的事情就是将队列函数，交给调用方自己来决定，何时执行。
同时 run 是个幂等函数，方便随时调用，还可以保证只有一个队列在执行，且不被多次调用。
这样就满足了开场需求，在 ajax 中顺序回调:)

AEditor 快速上手教程

In 未分类 on 2015年07月12日 by TAT.Cson view: 10,687

12

本教程演示如何使用 AEditor 制作一个简单的 H5 交互页 demo:

交互页 demo 地址：

点击打开 H5 交互页 demo

AEditor 访问地址：

http://aeditor.alloyteam.com