begin: 20170724
version: 20170724
導(dǎo)言
近兩天勉強(qiáng)完成了free code camp的portfolio項(xiàng)目（題目地址），自己原生寫的，感覺不用框架確實(shí)挺麻煩（雖然我目前只接觸過一點(diǎn)點(diǎn)bootstrap，但是感覺用起來應(yīng)該會(huì)節(jié)省非常多代碼），而且做出來的東西我估計(jì)在移動(dòng)端就不能看了。不過做這個(gè)項(xiàng)目過程中還是感覺頗有收獲。
主要技術(shù)點(diǎn)
1.表單label動(dòng)態(tài)隱藏/顯示
通過對(duì)表單項(xiàng)focus和blur事件監(jiān)聽，修改相應(yīng)label項(xiàng)的樣式（顏色、可見性、相對(duì)定位位置），特別是label項(xiàng)的顯示并不是以focus的觸發(fā)為標(biāo)準(zhǔn)，而是要檢測表單項(xiàng)中是否有有效字符輸入，這一點(diǎn)通過利用超時(shí)調(diào)用模仿間歇調(diào)用，不斷查詢表單項(xiàng)的value值，來確定是否顯示label。
2.點(diǎn)擊導(dǎo)航欄鏈接時(shí)，漸變地改變頁面滾動(dòng)位置
在此過程中需要?jiǎng)討B(tài)地獲取和設(shè)置整個(gè)頁面滾動(dòng)條的位置，為此定義了兩個(gè)函數(shù)，可以在跨瀏覽器條件下獲取和設(shè)置頁面相對(duì)視口滾動(dòng)的高度（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;
}
}
}
}
另外我們要做的就是獲取鏈接目標(biāo)元素在頁面中的位置，可以利用如下的函數(shù)實(shí)現(xiàn)：
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;
}
定義好這些函數(shù)以后，我們只需要監(jiān)聽導(dǎo)航欄中各個(gè)鏈接的click事件，事件觸發(fā)時(shí)，先取消其默認(rèn)操作，然后將整個(gè)頁面的滾動(dòng)高度（scrollTop）漸變地修改到等于鏈接目標(biāo)在頁面中位置高度。
3.根據(jù)頁面滾動(dòng)位置，動(dòng)態(tài)修改導(dǎo)航欄鏈接的樣式
這一點(diǎn)和上面一個(gè)技術(shù)點(diǎn)有點(diǎn)反向操作的意味，我們需要檢測頁面滾動(dòng)高度，檢測出當(dāng)前是哪一個(gè)區(qū)塊在視窗內(nèi)（比較頁面的scrollTop和各區(qū)塊元素位置（調(diào)用getOffsetTop()），然后讓導(dǎo)航欄中與這個(gè)區(qū)域?qū)?yīng)的那個(gè)鏈接突出顯示。頁面的滾動(dòng)我們檢測鼠標(biāo)滾動(dòng)，普遍支持的是mousewheel事件（firefox不支持），實(shí)際上這個(gè)事件不是標(biāo)準(zhǔn)事件，標(biāo)準(zhǔn)是wheel事件（高版本firefox將其實(shí)現(xiàn)了），為了兼容老版本firefox，可以檢測DOMMouseWheel事件（我沒有在老版本測試驗(yàn)證）。如此，各個(gè)瀏覽器能較好兼容。
document.onmousewheel = handleScroll;
document.onDOMMouseWheel = handleScroll;//for lower edition ff
document.onwheel = handleScroll;//for lower edition ff
4.twitter,linkedin等外鏈圖標(biāo)
通過引入font-awesome字體：
<link rel="stylesheet"
>
bugs
一直不能完成加載
通過移出腳本后測試、注釋主函數(shù)調(diào)用后測試、注釋代碼行后測試逐步確定問題的位置，最后發(fā)現(xiàn)是代碼中出現(xiàn)了無限循環(huán)。
項(xiàng)目github地址
https://github.com/jacktown11/fcc/tree/master/Build_a_Personal_Portfolio_Webpage0
