work | 一个官网重构的项目

#### The picker tree
关于一个流程谱系图的展示，客户希望实现类似ios picker的效果，嗯...所以在网上搜了搜。

发现了dcloudio的mui，觉得以后的web mobile端都有救了....
github里有个很有趣的issue，[#我承认你们被apicloud抄得体无完肤#](https://github.com/dcloudio/mui/issues/275)

去参观了一下[apicloud](http://www.apicloud.com/)官网，学习了一下。感觉很不错。

### Some new HTML5 API

####  classList
item() class name indexing /  add() /  remove()
####  querySelector & querySelectorAll
功能类似于jQuery的选择器，无法查找带伪类状态的元素, the former returns single element, the laters returns elements.

#### js related issues

修改main js的时候发现jshint的提示: 
<span style='color:red'>Don't make functions within a loop</span>

然后 [stackoverflow](http://stackoverflow.com/questions/3037598/how-to-fix-jslint-error-dont-make-functions-within-a-loop)
 @Skilldrick came up with a trick, to use the make_handler() to avoid recreating function for each iteration of the loop.
 ```javascript
 function make_handler(div_id) {
    return function () {
        alert(div_id);
    };
}
for (i ...) {
    div_id = divs[i].id;
    divs[i].onclick = make_handler(div_id);
}
 ````
 
## picker js

About perspective effect：``self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 1.5));``  The original number is 0.8. I changed to 1.5 to make the list height larger.
but the RotateX use the value = ``elf.endAngle = self.itemAngle * index;``

So it get larger too. The transform mainly related to two method: **translateZ & rotateX**

To check the detailed effect [理解：translate rotate 与 perspective 暧昧关系](http://www.alloyteam.com/wp-content/uploads/2012/11/simpleDemo2.html)

bcz frame was built with gulp-start | github, it require the sass, so I always use 
[css2sass](http://css2sass.herokuapp.com/)