原題目地址：http://www.cnblogs.com/winter-cn/p/3350728.html
web前端作業“自動完成”功能
寫在前面的話：
做這篇作業前我是完全沒有接觸過web前端開發，因為js基礎知識學習的匆忙，所以沒有深入的了解js，導致有很多功能實現起來都是非常的“笨重”，所以希望多給點意見，也會虛心接受，然后完成我第一個“js庫”，謝謝！
時間預估
| Time | Personal Software Process Stages | Estimate Time | Actually Time |
| Planning | 計划 | ||
| · Estimate | · 估計這個任務需要多少時間 | 3天 | 4天 |
| Development | 開發 | ||
| · Analysis | · 需求分析 (包括學習新技術) | 30分 | 1小時 |
| · Design Spec | · 生成設計文檔 | 2小時 | 2小時 |
| · Design Review | · 設計復審 (和同事審核設計文檔) | 1小時 | 30分 |
| · Coding Standard | · 代碼規范 (為目前的開發制定合適的規范) | 20分鍾 | 30分 |
| · Design | · 具體設計 | 3小時 | 3小時 |
| · Coding | · 具體編碼 | 13小時 | 28小時 |
| · Code Review | · 代碼復審 | 1小時 | 2小時 |
| · Test | · 測試（自我測試，修改代碼，提交修改） | 2小時 | 2小時 |
| Reporting | 報告 | ||
| · Test Report | · 測試報告 | 2小時 | 1小時 |
| · Size Measurement | · 計算工作量 | 30分鍾 | 20分鍾 |
| · Postmortem & Process Improvement Plan | · 事后總結, 並提出過程改進計划 | 30分鍾 | 20分鍾 |
| 合計 | 25小時 | 31小時 |
需求分析
題目的要求簡述：
編寫一個js的庫可以實現baidu，taobao，google搜索框的“自動完成”功能。
我們暫且先將“自動完成”的提示框命名成TipBox
在對baidu， taobao， google的TipBox相同點和不同點分析后得出以下需求：
相同點需求：
- 滿足輸入框獲取到焦點，輸入框中有文字（空格不算），有相應關鍵字可以提示時顯示TipBox。
- 輸入框獲取焦點時，按下Enter鍵會有相應的事件響應。
- 滿足輸入框獲取焦點時，按下方向鍵”上“，”下“時可以有選擇TipBox中的關鍵字功能，並且會有循環效果。
- 當TipBox顯示時，鼠標移動到相應的關鍵字上時會有選擇效果。
- 當選擇某項關鍵字時，輸入框中的文字跟着變化
- 當TipBox顯示時，左鍵點擊相應的TipBox會有相應的點擊事件。
- TipBox顯示的條目個數最大為10個
不同點需求：
- 各個TipBox中的文字大小不同
- TipBox邊框顏色有細微的差距
- TipBox寬度不是和輸入框等寬，在baidu中TipBox沒有包括搜索按鈕，在Taobao中包括搜索按鈕長度
- 文字距離上下左的元素的距離是可調的
生成設計文檔
根據需求分析，我們大致可以生成一份設計文檔。
- 設計一個js庫，使用戶傳入一個輸入框，使這個輸入框具有TipBox功能。
- TipBox的顯示必須滿足以下所有條件：輸入框具有焦點，輸入框內有文字（不包括空格），有可顯示的數據。
- 在輸入框有TipBox顯示前提下，用戶按方向鍵“下”，“上”會有對關鍵字進行選擇的操作，被選中的關鍵字背景會有變化，輸入框中文字變化成相應的關鍵字。
- 在輸入框有TipBox顯示前提下，用戶按“Enter”鍵會有事件響應，但是這個響應事件應該交給用戶來決定。
- 在輸入框有TipBox顯示前提下，用戶移動鼠標對TipBox中關鍵字進行選擇時，關鍵字背景變化，輸入框文字變化成相應的關鍵字。
- TipBox中關鍵字由用戶自己傳入。
- TipBox可以修改關鍵字大小，文字邊距，被選中的背景，最多個數。
- TipBox可以默認寬度為輸入框寬度，默認位置為輸入框下方，也可以對其進行修改。
- TipBox可以修改邊框顏色。
代碼規范
這是個單人作業，所以代碼風格都采用我個人風格：
- 大括號采用K&R風格
- 每個if, else, for, do, while后都要有一個大括號，即使有一條語句
- css樣式命名“所用於的元素_何種情況”規范
- 每一個接口函數必須有注釋，包括形參，返回值，接口用途。
- 變量名和函數名都采用首字母lowerCamelCase的命名規則
具體設計
- 模式采用mvc
顯示操作及監聽：負責顯示的模塊和監聽事件的響應模塊（view）。
“li”具體的操作：對選擇或者是失去選擇的“li”的具體操作（control）。
“li”集合的操作：對所有“li”集合的操作，當更改選擇“li”元素，“li”的應該生成。（model）
- 顯示操作及監聽（view）：
監聽輸入框和控制TipBox是否顯示。當監聽到“上”“下”按鈕的操作時會交給“li”集合處理。自己也會處理一些的監聽事件，是否需要顯示或者是隱藏TipBox的時候。
- “li”集合具體的操作（model）：
對全部的“li”集合操作，如果由view層監聽到“上”“下”操作，調用model層進行事件處理，並且把具體的“li”傳給control層進行處理。model里面保存着當前選擇的是那個“li”，也可以進行向下選擇，向上選擇處理。用戶更新關鍵字數據也由這個處理，直接生成對應的“li”。
- “li”具體的操作（control）：
由model層調用，model傳入個某個具體的“li”給control，對當前“li”做相應的處理，並且更新界面。
- 用戶如何使用：
用戶只需傳入一個“輸入框”元素，我們就可以為“輸入框”提供一個TipBox功能。並且提供一些api使用戶可以根據自己的需求調整界面。這樣用戶可以更方便的使用我們的庫，而只用考慮“輸入框”的設計。
- 將css樣式表和js文件分開編寫：
這樣就可以將邏輯層和界面層分開，簡便代碼編寫。需要升級庫的時候更方便。
- 接口設計：
1 /** 2 *為傳入的輸入框添加TipBox功能 3 *element：一個“input”元素 4 **/ 5 tipBoxInput(element);
1 /** 2 *一個用於更新數據 3 *data:數組類型，用於存放數據。 4 **/ 5 updateTip(data);
1 /** 2 *設置當顯示TipBox的時候回調函數 3 *callback：需要執行的函數。 4 **/ 5 showTipBoxCallback(callback);
1 /** 2 *用於設置鼠標右鍵點擊關鍵字時候回調函數 3 *callback:需要執行的函數 4 **/ 5 mouseLeftButtonClickCallback(callback);
1 /** 2 *設置沒有被選中關鍵字的背景顏色 3 *value：字符串類型，顏色的RGB值。如“#FFFFFF” 4 **/ 5 setDisCheckedBackgroundColor(value);
1 /** 2 *設置確定鍵的回調函數 3 *callback:需要執行的函數 4 **/ 5 setEnterCallback(callback);
2 *用於設置文字的大小 3 *value：是一個字符串類型，文字的值。如“10px” 4 **/ 5 setTextSize(value);
1 /** 2 *設置邊框顏色 3 *color：字符串類型，是顏色的RGB值。如“#FFFFFF” 4 **/ 5 setBorderColor(color);
1 /** 2 *用於設置最大的文字個數 3 *value:整形變量，文字的個數。如6 4 **/ 5 setTipMaxNumber(value);
1 /** 2 *設置關鍵字距離左邊距 3 *value: 字符串變量。如“10px” 4 **/ 5 setTextMarginLeft(value);
1 /** 2 *設置關鍵字上邊距 3 *value:是一個字符串類型。如“10xp” 4 **/ 5 setTextMarginTop(value);
1 /** 2 *設置提示TipBox距離瀏覽器上邊的距離 3 *value:是一個字符串值，“10px” 4 **/ 5 setTipBoxPositionTop(value);
1 /** 2 *設置TipBox的寬度 3 *value:字符串類型，“10px” 4 **/ 5 setTipBoxWidth(value);
1 /** 2 *設置提示框距離瀏覽器左邊的距離 3 *value:設置TipBox距離左邊的距離 4 **/ 5 setTipBoxPositionLeft(value);
具體編碼
就不一一舉例了，每層舉一個代表性的例子，博客最后面會貼出源碼。
- View層
在View對相應的事件注冊監聽，如“上” = 38，“下” = 40，“enter” = 13。並且去調用相應層。
inputElement.addEventListener("keydown",function(event){
if(event.keyCode == 38 ){//上鍵
onKeyUp();
}else if(event.keyCode == 40){//下鍵
onKeyDown();
}else if (event.keyCode == 13) {//Enter鍵
if(enterCallback!=undefined){
enterCallback();
}
}else{
}
},false);
function onKeyUp(){ if(!isShowTip())//判斷是否顯示TipBox時 return; if(tipLis.isBeChecked()){//當有下拉框而且顯示的時 discheckedRow(tipLis.getCheckedLiElement());//通過control層對具體的li操作 tipLis.keyUp();//調用model層的上操作 if(tipLis.isBeChecked()){ checkedRow(tipLis.getCheckedLiElement()); } }else if(!tipLis.isBeChecked()){ tipLis.keyUp(); checkedRow(tipLis.getCheckedLiElement()); } }
- model層
舉個view層監聽到向下按鈕調用model中keydown，具體實現如下，采用框架分層之后具體的操作就簡化許多，這實現的就是下標的加減。如果是最后一個則賦值為0。通過這個我們就可以很簡單實現“li”集合的控制
var cursor = 0;//當前選擇的“li”的下標 var length;//當前“li”的個數（從1開始） this.keyDown = function(){ if(cursor == length - 1){ cursor = 0; }else{ cursor = cursor + 1; } }
- control層
當前“li”被選中之后，改變輸入框中的值為關鍵字的值，並且把樣式改為默認的，並且判斷是否有自定義的背景顏色
function checkedRow(row_element){ input.value = row_element.innerHTML; row_element.className = "rwo_checked"; if(checkedBackgroundColor != undefined){ row_element.style.backgroundColor = checkedBackgroundColor; } }
測試
進行測試
測試報告
- 需求測試：經過測試，可以很簡單的實現這幾個界面的大致輪廓。當是對於google有一個較大的區別就是沒有提供在TipBox中加入按鈕。
- 兼容性測試：用過以下幾個瀏覽器可以兼容Chrome，Firefo，Opera。但是對Safari有兼容性問題，TipBox的顯示位置有問題
- 黑盒子測試：測試所有的api都可以正常的時候。
事后總結
因為我第一次寫web前端的代碼，實在是有點趕鴨子上架的感覺，有很多地方都有挺好的想法，如像回調函數的實現，TipBox中的“li”中樣式，最好是用戶可以完全自定義樣式，而不是通過接口只能簡單的設置那幾樣。深切的感受了“科學技術是第一生產力”。因為以前寫安卓程序習慣用mvc模式，不清楚前端應該用什么模式比較好，生搬硬套采用mvc模式，寫的並不是那么順利，有空時還是要盡量多接觸點別的技術。
擴展
檢查庫是否可以擴展用於的搜索引擎
在這個步驟我挑選的是“bing搜索”。然后非常的遺憾發現我們的“js庫”不能滿足這個搜索引擎的需求。
- 為什么你們的組件無法應對新需求？
因為我們提供組件提供的api接口用於調整“li”樣式有限，並不能完成所有的樣式調整。對於這邊我也很遺憾，原因是因為我個人能力問題，我本來想“li”的樣式應該是用戶自己也可以定義的，經驗太少了，所以最后我只能采用列舉樣式的方式，提供幾個重要的樣式的更改，簡化了實現的難度但是也犧牲了“li”樣式的多樣化。這就是我們組件無法應對這個需求的原因。
- 需要做怎樣的設計變更和代碼重構，才能支持新的需求？
我們可以和項目開始一樣，分析們需要的功能，進行再一次的接口擴展，這是耗時低的辦法，但是這是治標不治本的辦法。所以我們應該提供一個接口，用戶可以自己定義“li”樣式。這樣可以更好的新的需求。