? ? 入職實(shí)習(xí)的這個(gè)公司，第一天就分配了任務(wù)。從零開始寫一個(gè)網(wǎng)頁。之前盡管了解一些前端知識(shí)。但從頭開寫還是遇到了非常多問題，互聯(lián)網(wǎng)公司講求效率，有deadline還是比較有緊迫感的，與在實(shí)驗(yàn)室放羊狀態(tài)有了鮮明的對照。mentor、產(chǎn)品經(jīng)理、組里的boss、實(shí)習(xí)生同事都給我提供了非常多的幫助。此篇總結(jié)為獨(dú)立完畢的第一個(gè)項(xiàng)目的項(xiàng)目總結(jié)。

下圖是已上線活動(dòng)界面效果。

? ?俗話說，士別三日當(dāng)刮目相看。當(dāng)樂帝從12月的角度，審視6月做的這個(gè)項(xiàng)目時(shí)，對于當(dāng)時(shí)寫的代碼可謂痛心疾首，代碼還能夠?qū)懙娜绱嘶靵y。所以從12月開始將曾經(jīng)代碼，又一次審視，重構(gòu)曾經(jīng)代碼，以期有一個(gè)溫故知新。扎實(shí)基礎(chǔ)的提高。

? ?本項(xiàng)目重構(gòu)后頁面代碼地址：http://download.csdn.net/detail/yingyiledi/8255887

項(xiàng)目介紹

（一）．愛奇藝IOSclient發(fā)現(xiàn)—活動(dòng)頁面中“動(dòng)畫屋”活動(dòng)開始頁面的開發(fā)

? ? 活動(dòng)開始頁面的開發(fā)主要需求是：

? ? 依據(jù)產(chǎn)品方提供的原型圖實(shí)現(xiàn)基本頁面的結(jié)構(gòu)與布局。

? ? 1.內(nèi)容：

? ? 依據(jù)原型圖分析出頁面分為三大塊：

• 活動(dòng)宣傳圖區(qū)域。
• 發(fā)表評論區(qū)域；
• 評論展示列表區(qū)域。

? ? 依據(jù)分析構(gòu)造結(jié)構(gòu)與布局。

? ?2.結(jié)構(gòu)（HTML）：

? ? 依據(jù)分析內(nèi)容構(gòu)造的html結(jié)構(gòu)：大體規(guī)則依照分塊與語義化結(jié)合。

• 上述三塊內(nèi)容分為三塊div包裝。
• 活動(dòng)宣傳圖區(qū)域採用背景圖方式寫HTML，評論展示列表區(qū)域，用戶頭像採取背景圖方式實(shí)現(xiàn)。

? ?3.樣式（CSS）:

• 依據(jù)上述構(gòu)造出的語義化標(biāo)簽結(jié)構(gòu)。再結(jié)合原型圖用ps測量各數(shù)據(jù)構(gòu)造樣式布局。

• 樣式書寫依照盒模型（由內(nèi)而外）、浮動(dòng)、定位來設(shè)置。

? ?4.交互（js/jQuery）：

? ? 依據(jù)原型圖推斷須要實(shí)現(xiàn)的用戶行為交互。

?

?? ? ?重構(gòu)技術(shù)實(shí)現(xiàn)：

? ? 因?yàn)樵?jīng)頁面結(jié)構(gòu)沒有與行為非常好的分離。此次重構(gòu)，主要對行為與結(jié)構(gòu)分離做了重構(gòu)。這里用到了underscore的模板引擎template方法。

? ? （1）列表頁模板

<%_.each(data, function(item) { %><li class="comment-item"><div class="user-info" style="background:url('<%=item.imgUrl%>') no-repeat 0 0;background-size:30px 30px; "><span class="user-id"> <%= item.userId %> </span><span class="comment-time"> <%=item.createTime %> </span></div><p class="comment-content"><%=item.content %></p></li><%});%>
? ??（2）列表頁對取得后端數(shù)據(jù)的處理

? ? ?對數(shù)據(jù)進(jìn)行處理，以適應(yīng)模板變量的需求。處理函數(shù)例如以下：

function modifyData(data) {var innerData = data.data.comments;var newData = [];for (var i = 0; i < innerData.length; i++) {newData[i] = {};newData[i].content = innerData[i].content;newData[i].imgUrl = innerData[i].userInfo.icon;newData[i].userId = innerData[i].userInfo.uname;newData[i].createTime = formatDate(new Date(innerData[i].addTime));}return newData;}
? ??（3）將數(shù)據(jù)渲染到模板并加入到頁面

? ? 核心代碼例如以下。主要採用template方法：

data = modifyData(data);var template1 = _.template($("#list-item-template").html());var str1 = template1({data: data});$(".comment-list ul").append(str1);

? ?

? （4）解析url傳遞的參數(shù)構(gòu)造成對象，採用ajax方法存取數(shù)據(jù)。須要讀取url傳遞的參數(shù)值的各狀態(tài)。并傳遞給ajax參數(shù)。

var theRequest = new Object();(function GetRequest() {var url = location.search; //獲取url中"?"符后的字串if (url.indexOf("?

") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest; })()//將url中各參數(shù)提取出傳入ajax方法各個(gè)參數(shù)

??
? ?（5）分頁插件的使用
? ? 分頁插件的本質(zhì)上是對象的方法，此處的對象是應(yīng)用插件的標(biāo)簽元素，插件作為方法就須要有參數(shù)傳遞到函數(shù)內(nèi)。分頁插件傳入的兩個(gè)元素一個(gè)是所需分頁內(nèi)容總長度。另外一個(gè)則是分頁插件初始化對象的傳入。此對象包含：分頁回調(diào)函數(shù)、分頁初始頁、每頁內(nèi)容個(gè)數(shù)、上一頁、下一頁的文字描寫敘述等。

并可依據(jù)須要改動(dòng)分頁插件文件初始值。

當(dāng)中比較關(guān)鍵的是回調(diào)函數(shù)的書寫，此函數(shù)參數(shù)為當(dāng)前頁數(shù)，決定了在哪展現(xiàn)怎么展現(xiàn)的問題，能夠按需求更改。

var optInit = {callback: pageselectCallback,current_page:0,items_per_page:50,num_display_entries:10,num_edge_entries:2,prev_text:"上一頁",next_text:"下一頁" }$("#pagination").pagination(length, optInit);function pageselectCallback(page_index, jq){// 從表單獲取每頁的顯示的列表項(xiàng)數(shù)目var max_elem = Math.min((page_index+1) * items_per_page, length);//返回當(dāng)前條目頁內(nèi)容與最大頁內(nèi)容較小值。防止溢出$("#Searchresult").html("");//清空顯示值內(nèi)容// 獲取載入元素for(var i=page_index*items_per_page;i<max_elem;i++){$("#Searchresult").append($("#comentShow .comentList:eq("+i+")").clone());//非常奇怪i兩側(cè)用加號(hào)，顯示需遍歷的內(nèi)容，并復(fù)制追加到結(jié)果處,此處用clone保證追加的是副本}//阻止單擊事件return false;}//應(yīng)用分頁插件

? ?

（二）．愛奇藝IOSclient發(fā)現(xiàn)—活動(dòng)頁面中“動(dòng)畫屋”活動(dòng)抽獎(jiǎng)中頁面的開發(fā)

? ? 活動(dòng)抽獎(jiǎng)中頁面主要需求是：

? ? 1.?依據(jù)原型圖分析出頁面有兩大塊：app下載button盒背景圖；獲獎(jiǎng)結(jié)果等文字內(nèi)容。

? ? 依據(jù)分析構(gòu)造結(jié)構(gòu)與布局。

（三）．愛奇藝IOSclient發(fā)現(xiàn)—活動(dòng)頁面中“動(dòng)畫屋”活動(dòng)結(jié)束頁面的開發(fā)

? ? 1.依據(jù)原型圖分析出頁面有兩大塊：app下載button盒背景圖。獲獎(jiǎng)username單列表。

? ? 依據(jù)分析構(gòu)造結(jié)構(gòu)與布局。

? ? 2.?依據(jù)原型圖實(shí)現(xiàn)用戶行為的交互

? ? 加入交互：從后臺(tái)取出獲獎(jiǎng)用戶對應(yīng)信息展示。

? ? 第二、三個(gè)頁面的制作，因?yàn)轫撁嫱谝粋€(gè)頁面所用到技術(shù)大同小異。但提高的地方在于依照內(nèi)容、結(jié)構(gòu)、樣式、交互的順序，一步步推導(dǎo)、演繹確定技術(shù)方案。然后再開始動(dòng)工。效率有了明顯的提升。

先思考再寫代碼。

第二三個(gè)頁面相對于第一個(gè)頁面的改進(jìn)：

• .寫抽獎(jiǎng)中和活動(dòng)結(jié)束頁面的內(nèi)容、結(jié)構(gòu)、css、js分析方法非常提高效率與掌控力。

• 網(wǎng)頁元素命名也依據(jù)內(nèi)容進(jìn)行了語義化，通過下載的txt文件查看經(jīng)常使用的命名。
• 通過給產(chǎn)品經(jīng)理提出原型的意見添加了對產(chǎn)品的理解。

個(gè)人總結(jié)做網(wǎng)頁的流程 ? ? 拿到原型圖首先對原型圖內(nèi)容、結(jié)構(gòu)、樣式、交互有個(gè)理解，原型圖不明白的須要與產(chǎn)品經(jīng)理溝通意見。

? ?1.了解有哪些是內(nèi)容：將內(nèi)容分類。 ? ?（1）.靜態(tài)內(nèi)容 ? ?（2）.與server交互內(nèi)容 ? ?2.依照內(nèi)容性質(zhì)所屬語義構(gòu)造html語義標(biāo)簽結(jié)構(gòu) ? ?（1）依據(jù)內(nèi)容耦合情況，分塊處理div ? ?（2）依照對內(nèi)容的分類及一些邏輯關(guān)系選擇標(biāo)簽。可參考博客園文章。 ? ?（3）語義標(biāo)簽依據(jù)是否有共性將其劃分為語義的class及id。命名力求簡潔、清晰表達(dá)內(nèi)容 ? ?3.依照內(nèi)容相應(yīng)標(biāo)簽確定的布局 ? ?（1）首先確定最外層絕對位置的布局格式及內(nèi)層div布局浮動(dòng)或者豎排格式 ? ?（2）確定各個(gè)div邊框、邊距及內(nèi)層html的邊框、邊距內(nèi)容 ? ?（3）內(nèi)層文字、背景、表單等格式的確定。 ??4.js交互 ? ?（1）分析須要的交互需求，確定整個(gè)流程所要實(shí)現(xiàn)的目標(biāo)。 ? ?（2）依據(jù)交互需求細(xì)化交互流程。 ? ?（3）依據(jù)交互流程確定所採用的技術(shù)及可能用到的算法。 ? ?（4）寫交互代碼。 個(gè)人提高的方向 ? ? 做網(wǎng)頁如同寫作文首先確定內(nèi)容，然后是確定章節(jié)、然后是格式。都是熟能生巧的事情。

沒有什么技術(shù)含量。

• 有技術(shù)含量的是語義化標(biāo)簽的磨練，通過看模板代碼和理論知識(shí)。以及屬性、類的命名。
• （1）css布局圖上溯的長度、布局的確定。特別是從原型圖中找出不合理的地方。（2）不應(yīng)該糾纏于頁面中各種像素?cái)?shù)據(jù)。（3）學(xué)會(huì)用adapter即base.css文件的內(nèi)容。（4）并積累自己的一個(gè)css庫。
• （1）js技術(shù)含量在于寫出規(guī)范、可讀性高的代碼。（2）同一時(shí)候積累一些實(shí)現(xiàn)經(jīng)常使用內(nèi)容的函數(shù)。

  （3）深入理解框架和插件的機(jī)理。

• 從各種瀏覽器適配的角度，考慮前端開發(fā)的優(yōu)化。
• 從用戶體驗(yàn)的角度考慮。功能的實(shí)現(xiàn)。以及效率問題（速度）的提升如ajax讀取數(shù)據(jù)。
• 從整個(gè)前端的制作網(wǎng)頁流程，反推整個(gè)策劃、產(chǎn)品開發(fā)的產(chǎn)生過程。
• 學(xué)習(xí)后端與前端交互，特別是網(wǎng)絡(luò)端linux和svn工具命令、瀏覽器調(diào)試的運(yùn)用。

重構(gòu)意見 ? ?之前的代碼版本號(hào)。不管是結(jié)構(gòu)、樣式還是行為都沒有做到集約化和標(biāo)準(zhǔn)化。通過這次重構(gòu)。對HTML結(jié)構(gòu)做了精簡，特別是背景圖的使用，使整個(gè)頁面結(jié)構(gòu)更合理。

樣式上，採用PS精確測量各個(gè)數(shù)據(jù)，做到了與原型圖高度統(tǒng)一。行為上採用了模板與函數(shù)分塊編程。使結(jié)構(gòu)與行為全然分離，行為邏輯更加清晰易懂。便于后期維護(hù)。

轉(zhuǎn)載于:https://www.cnblogs.com/yxwkf/p/5068792.html

總結(jié)

以上是生活随笔為你收集整理的iosclient暑期“动画屋“活动项目总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。