begin: 20170724
version: 20170724
导言
近两天勉强完成了free code camp的portfolio项目（题目地址），自己原生写的，感觉不用框架确实挺麻烦（虽然我目前只接触过一点点bootstrap，但是感觉用起来应该会节省非常多代码），而且做出来的东西我估计在移动端就不能看了。不过做这个项目过程中还是感觉颇有收获。
主要技术点
1.表单label动态隐藏/显示
通过对表单项focus和blur事件监听，修改相应label项的样式（颜色、可见性、相对定位位置），特别是label项的显示并不是以focus的触发为标准，而是要检测表单项中是否有有效字符输入，这一点通过利用超时调用模仿间歇调用，不断查询表单项的value值，来确定是否显示label。
2.点击导航栏链接时，渐变地改变页面滚动位置
在此过程中需要动态地获取和设置整个页面滚动条的位置，为此定义了两个函数，可以在跨浏览器条件下获取和设置页面相对视口滚动的高度（scrollTop）:
function getDocScrollTop(){
return Number(document.documentElement.scrollTop
|| window.pageYOffset
|| document.body.scrollTop);
}
function setDocScrollTop(height){
document.documentElement.scrollTop = height;
if(getDocScrollTop() !== height){
// unsucceed
document.body.scrollTop = height;
if(getDocScrollTop() !== height){
// unsucceed yet
if(window.pageYOffset){
window.pageYOffset = height;
}
}
}
}
另外我们要做的就是获取链接目标元素在页面中的位置，可以利用如下的函数实现：
function getOffsetTop(ele){
//get element(ele)'s position from the start of the document
var top = 0;
do{
top += ele.offsetTop;
ele = ele.offsetParent;
}while(ele !== null);
return top;
}
定义好这些函数以后，我们只需要监听导航栏中各个链接的click事件，事件触发时，先取消其默认操作，然后将整个页面的滚动高度（scrollTop）渐变地修改到等于链接目标在页面中位置高度。
3.根据页面滚动位置，动态修改导航栏链接的样式
这一点和上面一个技术点有点反向操作的意味，我们需要检测页面滚动高度，检测出当前是哪一个区块在视窗内（比较页面的scrollTop和各区块元素位置（调用getOffsetTop()），然后让导航栏中与这个区域对应的那个链接突出显示。页面的滚动我们检测鼠标滚动，普遍支持的是mousewheel事件（firefox不支持），实际上这个事件不是标准事件，标准是wheel事件（高版本firefox将其实现了），为了兼容老版本firefox，可以检测DOMMouseWheel事件（我没有在老版本测试验证）。如此，各个浏览器能较好兼容。
document.onmousewheel = handleScroll;
document.onDOMMouseWheel = handleScroll;//for lower edition ff
document.onwheel = handleScroll;//for lower edition ff
4.twitter,linkedin等外链图标
通过引入font-awesome字体：
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
bugs
一直不能完成加载
通过移出脚本后测试、注释主函数调用后测试、注释代码行后测试逐步确定问题的位置，最后发现是代码中出现了无限循环。
项目github地址
https://github.com/jacktown11/fcc/tree/master/Build_a_Personal_Portfolio_Webpage0
