ios用戶端暑期“動畫屋“活動項目總結

    入職實習的這個公司，第一天就分配了任務，從零開始寫一個網頁，之前雖然瞭解一些前端知識，但從頭開寫還是遇到了很多問題，互連網公司講求效率，有deadline還是比較有緊迫感的，與在實驗室放羊狀態有了鮮明的對比。mentor、產品經理、組裡的boss、實習生同事都給我提供了非常多的協助。此篇總結為獨立完成的第一個項目的項目總結。是已上線活動介面效果。

項目介紹

（一）．愛奇藝IOS用戶端發現—活動頁面中“動畫屋”活動開始頁面的開發

    活動開始頁面的開發主要需求是：

    根據產品方提供的原型圖實現基本頁面的結構與布局。

1.內容：

  根據原型圖分析出頁面分為三大塊：

• app下載按鈕以及背景圖；
• 話題以及評論輸入框和評論發表按鈕；
• 最新評論展示。

  根據分析構造結構與布局。

2.結構（HTML）：

  根據分析內容構造的html結構：大體規則按照分塊與語義化結合。

• 上述三塊內容分為三塊div封裝。這三塊外圍被一個大的div封裝便於整體定位。
• 每個div內部根據內容性質設定語義化標籤：文字用p標籤，圖片用img標籤，按鈕用input button類型的標籤，並列語義內容用ul與li標籤等等構造出結構圖，以達到未有css樣式仍有可讀性。
• 文字部分採取<p>標籤可以靈活控制對齊，而<br />則做不到。

3.樣式（CSS）:

• 根據上述構造出的語義化標籤結構，再結合原型圖構造樣式布局。
• 樣式布局id或者class命名可以參考一些文章根據內容的css命名規則。
• 樣式布局則仍然以內容出發，首先設定外層的div的絕對布局position：absolute；top left right等，形成布局基礎。
• 然後通過外層div內部div性質如果左右布局則需要設定float屬性。設定div標籤背景映像以及顏色需要對父級對象設定高度和寬度。
• 設定不規則的布局出現問題，很多時候都可以通過設定父級div width或者height來解決，如文字長度的限制。
• 四個方向的padding屬於內容的延伸，四個方向的margin則是邊框的延伸。置中布局可同時設定margin-left 與margin-right同時為auto。
• 隱藏標籤採用display：none與jquery hide（）方法實現效果一樣。
• 定義css樣式時，面向的標籤盡量細化，以免造成關聯影響。

4.互動（js/jQuery）：

    根據原型圖判斷需要實現的使用者行為互動。

   添加互動：

• 輸入評論框預設文字消失並且輸入文字顏色與預設文字顏色不同，如果未登入跳轉到登入介面。
• 點擊發表按鈕，如未登入會跳轉到登入頁面，否則發送評論內容到相應介面，提示發表成功，並重新整理評論展示內容。
• 評論部分從相應介面取出最新評論資料50條。按照原型圖樣式顯示。

   技術實現：

   （1）此項目與後端的互動過程即取資料、存資料的過程。通過查看jquery中ajax、get、post方法的用法格式以及json作為資料格式按照對象屬性的方法取用規則，再通過介面文檔擷取ajax方法中所需傳遞的參數值實現存取相應資料的目的。採用ajax方法，可以在瀏覽器network查看post和get請求詳細資料。

$.post("所用介面url", {請求介面傳入的對象資料如 page_size:30},            function(data){            window.location.reload();//重新載入頁面                 },"json");//向相應介面發送請求，並返回json格式的資料data

            json資料的讀取：按照對象屬性方法讀取。此處重新載入頁面需要注意，重新載入時，在移動端和pc端都有對圖片的緩衝，所以不會耗費大量流量及時間重新載入，而是在一定基礎上的載入。

dataTmp2=data["data"]["comments"].length;//擷取評論長度

  （2）解析url傳遞的參數構造成對象，採用ajax方法存取資料，需要讀取url傳遞的參數值的各狀態，並傳遞給ajax參數。

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中各參數提取出傳入ajax方法各個參數

   （3）輸入評論預設文本消失，輸入的文本樣式與預設文本樣式不同，控制文本長度為140字，並且不能發送預設文字。

$("#textarea1").click(function(){    this.innerHTML="";//單擊清空預設值    $("#textarea1").addClass("clickFont");//給文本域內容添加輸入文本的字型樣式    });

    此處用到jquery中addClass方法添加css屬性，但由於原字型樣式由id構造，這裡追加的class，在css中優先順序id比class高，所以採用了新加屬性顏色後加!important方式實現。

.clickFont{color:#464646 !important;}

    擷取文字框內容，並判斷是否為預設值。如果不是預設值則將內容截取前140字，作為ajax方法的參數發送到後台。

if($("#textarea1").val()!="我最喜歡的動畫片是…")//判斷是否輸入新內容         { content=$("#textarea1").val().substring(0,140);//截取前140字的評論}

   （4）點擊發表按鈕及點擊評論框都對使用者登入狀態進行判斷，如登入則繼續執行，未登入則跳轉到登入頁面。

if(theRequest.P0001.length>1)         //執行內容}else{ window.location.href = "iqiyi://login";}

  （5）動態產生評論部分的構造

   動態產生部分的思路：首先從結構上並列或者內含項目關聯性劃分div，構造語義化標籤，形成dom樹，裝入樣本內容，作為評論部分的範例。然後對上述結構採用樣式布局，構造出css樣式與原型圖一致後。即可按照dom樹規則確定互動取資料、動態產生所需內容。

  此處指令碼主要會用到幾種方法：

• 創造節點並設定屬性

var icon = document.createElement("div");icon.setAttribute("class","icon");

• 確定節點內的內容

    圖片內容

var img = document.createElement("img");img.src = n['userInfo']['icon'];

    文字內容

uid_content.innerHTML = n['userInfo']['uname'];

• 節點追加子節點構造dom樹

$("#resultContainer ul").append(list_tag);

    此處考慮到評論內容分頁的需求，將載入評論放入到一個標籤內，並將其隱藏。按照需求取出並放到展示評論的標籤下。

for(var i = 0; i < prize_length;i++){$("#contentList").append($("#resultContainer ul li:eq("+i+")").clone());}

• 對評論時間戳記轉化為標準時間的處理

function   formatDate(now)   {                   var   year=now.getFullYear();                var   month=now.getMonth()+1;                   var   date=now.getDate();                   var   hour=now.getHours();                   var   minute=now.getMinutes();  if(hour<10)  {  hour="0"+hour;  }  if(minute<10)  {  minute="0"+minute;  }  var   myDate = new Date();  if(myDate.getFullYear()==year)  {   return   month+"-"+date+"   "+hour+":"+minute;//本年評論則去掉年份  }              return   year+"-"+month+"-"+date+"   "+hour+":"+minute;                   }   

   （6）分頁外掛程式的使用
    分頁外掛程式的本質上是對象的方法，此處的對象是應用外掛程式的標籤元素，外掛程式作為方法就需要有參數傳遞到函數內。分頁外掛程式傳入的兩個元素一個是所需分頁內容總長度，另外一個則是分頁外掛程式初始化對象的傳入，此對象包括：分頁回呼函數、分頁初始頁、每頁內容個數、上一頁、下一頁的文字描述等。並可根據需要修改分頁外掛程式檔案初始值。其中比較關鍵的是回呼函數的書寫，此函數參數為當前頁數，決定了在哪展現怎麼展現的問題，可以按需求更改。

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){// 從表單擷取每頁的顯示的清單項目數目var max_elem = Math.min((page_index+1) * items_per_page, length);//返回當前條目頁內容與最大頁內容較小值，防止溢出$("#Searchresult").html("");//清空顯示值內容// 擷取載入元素for(var i=page_index*items_per_page;i<max_elem;i++){$("#Searchresult").append($("#comentShow .comentList:eq("+i+")").clone());//很奇怪i兩側用加號，顯示需遍曆的內容，並複製追加到結果處,此處用clone保證追加的是副本}//阻止單擊事件return false;}//應用分頁外掛程式

   （7）關於項目中的排序

    儘可能不對頁面中的資料進行排序，而是從收發ajax資料時，先排序再存取，形成介面或者形成發送到背景資料。

    按照對象屬性對對象進行排序的代碼：

data["data"]["comments"].sort(function(a,b)            {            return b["addTime"]-a["addTime"];            });//按時間對評論進行排序

（二）．愛奇藝IOS用戶端發現—活動頁面中“動畫屋”活動抽獎中頁面的開發

    活動抽獎中頁面主要需求是：

    1. 根據原型圖分析出頁面有兩大塊：app下載按鈕盒背景圖；獲獎結果等文字內容。

    根據分析構造結構與布局。

（三）．愛奇藝IOS用戶端發現—活動頁面中“動畫屋”活動結束頁面的開發

    1.根據原型圖分析出頁面有兩大塊：app下載按鈕盒背景圖；獲獎使用者名稱單列表。

    根據分析構造結構與布局。

    2. 根據原型圖實現使用者行為的互動

    添加互動：從後台取出獲獎使用者相應資訊展示。

    第二、三個頁面的製作，由於頁面同第一個頁面所用到技術大同小異，但提高的地方在於按照內容、結構、樣式、互動的順序，一步步推導、演繹確定技術方案，然後再開始動工，效率有了明顯的提升。先思考再寫代碼。

第二三個頁面相對於第一個頁面的改進：

• .寫抽獎中和活動結束頁面的內容、結構、css、js分析方法很提高效率與掌控力。
• 網頁元素命名也根據內容進行了語義化，通過下載的txt檔案查看常用的命名。
• 通過給產品經理提出原型的意見增加了對產品的理解。

個人總結做網頁的流程     拿到原型圖首先對原型圖內容、結構、樣式、互動有個理解，原型圖不明確的需要與產品經理溝通意見。    1.瞭解有哪些是內容：將內容分類。    （1）.靜態內容    （2）.與伺服器互動內容    2.按照內容性質所屬語義構造html語義標籤結構    （1）根據內容耦合情況，分塊處理div    （2）按照對內容的分類及一些邏輯關係選擇標籤。可參考部落格園文章。    （3）語義標籤根據是否有共性將其劃分為語義的class及id。命名力求簡潔、清晰表達內容    3.按照內容對應標籤確定的布局    （1）首先確定最外層絕對位置的布局格式及內層div布局浮動或者豎排格式    （2）確定各個div邊框、邊距及內層html的邊框、邊距內容    （3）內層文字、背景、表單等格式的確定。    4.js互動    （1）分析需要的互動需求，確定整個流程所要實現的目標。    （2）根據互動需求細化互動流程。    （3）根據互動流程確定所採用的技術及可能用到的演算法。    （4）寫互動代碼。 個人提高的方向     做網頁如同寫作文首先確定內容，然後是確定章節、然後是格式。都是熟能生巧的事情。沒有什麼技術含量。

• 有技術含量的是語義化標籤的磨練，通過看模板代碼和理論知識。以及屬性、類的命名。
• （1）css布局圖上溯的長度、布局的確定，特別是從原型圖中找出不合理的地方。（2）不應該糾纏於頁面中各種像素資料。（3）學會用adapter即base.css檔案的內容。（4）並積累自己的一個css庫。
• （1）js技術含量在於寫出規範、可讀性高的代碼。（2）同時積累一些實現常用內容的函數。（3）深入理解架構和外掛程式的機理。
• 從各種瀏覽器適配的角度，考慮前端開發的最佳化。
• 從使用者體驗的角度考慮，功能的實現，以及效率問題（速度）的提升如ajax讀取資料。
• 從整個前端的製作網頁流程，反推整個策劃、產品開發的產生過程。
• 學習後端與前端互動，特別是網路端linux和svn工具命令、瀏覽器調試的運用。