Web前端技術(shù) 課件 模塊四 任務(wù)6 發(fā)布評(píng)論功能實(shí)現(xiàn)

發(fā)布評(píng)論功能實(shí)現(xiàn)Web前端技術(shù)主講老師：何成芊延時(shí)符CONTENTS目錄01任務(wù)描述03知識(shí)點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識(shí)05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述隨著web2.0走向成熟，頁(yè)面更加強(qiáng)調(diào)用戶(hù)的互動(dòng)和內(nèi)容的自制。而且當(dāng)前頁(yè)面中的評(píng)論或者留言，可以讓網(wǎng)頁(yè)用戶(hù)參與度更高，并使得頁(yè)面內(nèi)容保持新鮮度，根據(jù)數(shù)據(jù)顯示評(píng)論越多頁(yè)面的可讀性越高，用戶(hù)的粘度越好。因此，評(píng)論區(qū)成為了當(dāng)前的內(nèi)容性頁(yè)面中必不可少的重要組成部分。本任務(wù)就是使用JavaScript實(shí)現(xiàn)評(píng)論區(qū)這一種重要的頁(yè)面組件的。效果如圖4-6-1所示。延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)綜合運(yùn)用JavaScript知識(shí)；掌握創(chuàng)建和刪除節(jié)點(diǎn)的方法；掌握操作子節(jié)點(diǎn)和父節(jié)點(diǎn)的方法；知識(shí)目標(biāo)能夠根據(jù)要求編寫(xiě)JavaScript代碼實(shí)現(xiàn)頁(yè)面評(píng)論區(qū)功能；能夠合理使用DOM節(jié)點(diǎn)的各項(xiàng)操縱；技能目標(biāo)延時(shí)符培養(yǎng)綜合項(xiàng)目開(kāi)發(fā)的能力；培養(yǎng)嚴(yán)謹(jǐn)踏實(shí)的學(xué)習(xí)習(xí)慣；培養(yǎng)敢于創(chuàng)新的精神；素養(yǎng)目標(biāo)知識(shí)點(diǎn)導(dǎo)圖延時(shí)符知識(shí)點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識(shí)延時(shí)符創(chuàng)建DOM節(jié)點(diǎn)插入節(jié)點(diǎn)刪除節(jié)點(diǎn)HTMLDOM創(chuàng)建元素一般分為3個(gè)步驟，首先，使用document.createElement()方法創(chuàng)建了節(jié)點(diǎn)；第二，使用document.createTextNode("")方法為新的節(jié)點(diǎn)加入內(nèi)容；現(xiàn)在，新的節(jié)點(diǎn)只存在于程序中，并沒(méi)有加入到頁(yè)面中，所以我們無(wú)法在瀏覽器中感覺(jué)到它的存在。因此，我們就有通常會(huì)使用第三個(gè)方法node.appendChild()將新的節(jié)點(diǎn)追加到已有元素。這樣的3步驟代碼如下所示：創(chuàng)建DOM延時(shí)符1.<divid="div1">2.<pid="p1">這是一個(gè)段落。</p>3.<pid="p2">這是另一個(gè)段落。</p>4.</div>5.<script>6.//第一步創(chuàng)建p元素節(jié)點(diǎn)7.varpara=document.createElement("p");8.//第二步創(chuàng)建內(nèi)容"這是一個(gè)新段落。"9.varnode=document.createTextNode("這是一個(gè)新段落。");10.//整合第一和第二步，將內(nèi)容加入到p元素11.para.appendChild(node);12.varelement=document.getElementById("div1");13.//第三步將p節(jié)點(diǎn)加入到div內(nèi)部最后位置14.element.appendChild(para);15.</script>上面代碼運(yùn)行結(jié)果如圖4-6-5所示：創(chuàng)建DOM（續(xù)1）延時(shí)符以上的實(shí)例我們使用了appendChild()方法，它用于添加新元素到已有節(jié)點(diǎn)的尾部。如果我們需要將新元素添加到已有節(jié)點(diǎn)的開(kāi)始位置或者是結(jié)尾以外的其它位置，那么可以使用另一個(gè)方法insertBefore()，也就是在上面實(shí)例的第3步，用insertBefore()替換appendChild()方法，代碼如下：插入節(jié)點(diǎn)延時(shí)符1.<divid="div1">2.<pid="p1">這是一個(gè)段落。</p>3.<pid="p2">這是另一個(gè)段落。</p>4.</div>5.<script>6.//第一步創(chuàng)建p元素節(jié)點(diǎn)7.varpara=document.createElement("p");8.//第二步創(chuàng)建內(nèi)容"這是一個(gè)新段落。"9.varnode=document.createTextNode("這是一個(gè)新段落。");10.//整合第一和第二步，將內(nèi)容加入到p元素11.para.appendChild(node);12.varelement=document.getElementById("div1");13.//定義插入的參考位置child即p1的位置14.varchild=document.getElementById("p1");15.//第三步將p節(jié)點(diǎn)加入到div內(nèi)部p1前的位置16.element.insertBefore(para);17.</script>上面代碼運(yùn)行結(jié)果如圖4-6-6所示：插入節(jié)點(diǎn)（續(xù)1）延時(shí)符刪除一個(gè)DOM節(jié)點(diǎn)就比插入要容易得多。要?jiǎng)h除一個(gè)節(jié)點(diǎn)，首先要獲得該節(jié)點(diǎn)本身以及它的父節(jié)點(diǎn)，然后，調(diào)用父節(jié)點(diǎn)的removeChild把自己刪掉：注意到刪除后的節(jié)點(diǎn)雖然不在DOM文檔樹(shù)中了，但其實(shí)它還在內(nèi)存中，可以隨時(shí)再次被添加到別的位置。刪除節(jié)點(diǎn)延時(shí)符1.//取得待刪除節(jié)點(diǎn):2.varself=document.getElementById('to-be-removed');3.//取得待刪除節(jié)點(diǎn)的父節(jié)點(diǎn):4.varparent=self.parentElement;5.//刪除節(jié)點(diǎn):6.varremoved=parent.removeChild(self);7.removed===self;//true任務(wù)實(shí)施延時(shí)符任務(wù)分析技術(shù)分析與實(shí)現(xiàn)完成代碼任務(wù)分析延時(shí)符實(shí)現(xiàn)評(píng)論區(qū)功能，主要工作有兩項(xiàng)，一是創(chuàng)建新的評(píng)論信息：需要?jiǎng)?chuàng)建新的消息節(jié)點(diǎn)；然后從文本域獲取用戶(hù)輸入信息；從而構(gòu)建新的評(píng)論信息，最后將新的評(píng)論信息節(jié)點(diǎn)加入到所以評(píng)論的最上方位置。二是刪除不要的評(píng)論信息，通過(guò)循環(huán)的方式將所有的“刪除評(píng)論”綁定刪除節(jié)點(diǎn)。所以這項(xiàng)任務(wù)的主要任務(wù)可以分解為2項(xiàng)子任務(wù)如圖4-6-3所示：技術(shù)分析與實(shí)現(xiàn)：步驟1延時(shí)符步驟1：新評(píng)論創(chuàng)建新節(jié)點(diǎn)li。在本案例中使用里作為一條評(píng)論信息的容器。創(chuàng)建新評(píng)論，首先就要為新評(píng)論創(chuàng)建出容器。使用以下代碼實(shí)現(xiàn)：1.varli=document.createElement("li");技術(shù)分析與實(shí)現(xiàn)：步驟2延時(shí)符步驟2：合成新評(píng)論內(nèi)容。新評(píng)論內(nèi)容來(lái)自以下兩個(gè)方面：1.提取文本域中的內(nèi)容，首先需要獲取文本域?qū)ο?，然后使用value屬性提取輸入信息；2.格式相關(guān)文件，這部分可以使用字符串預(yù)先準(zhǔn)備；實(shí)現(xiàn)以上功能代碼如下：1.//獲取文本域?qū)ο髏xt2.vartxt=document.querySelector("textarea");3.varli=document.createElement("li");4.//格式預(yù)制字符串5.varstrbefore='<divclass="head"><imgsrc="img/default_avatar.jpg"alt=""></div><divclass="cr"><ahref="#"class="user">用戶(hù)名</a>:';6.varstrafter='<divclass="lbottom"><spanclass="today">today</span><ahref="#"class="del">刪除評(píng)論</a></div></div>';7.//整合評(píng)論信息并賦值到新的節(jié)點(diǎn)對(duì)象8.li.innerHTML=strbefore+txt.value+strafter;技術(shù)分析與實(shí)現(xiàn)：步驟3延時(shí)符步驟3：新評(píng)論節(jié)點(diǎn)加入到評(píng)論區(qū)。將新評(píng)論節(jié)點(diǎn)li加入到評(píng)論區(qū)ul中，并且按照評(píng)論區(qū)使用習(xí)慣，最新的評(píng)論將定位在上方。所以使用insertBefore()方法實(shí)現(xiàn)，代碼如下所示：1.//將評(píng)論添加到ul中，而且在最上方2.ul.insertBefore(li,ul.children[0]);技術(shù)分析與實(shí)現(xiàn)：步驟4延時(shí)符步驟4：獲取所有的刪除評(píng)論鏈接。在創(chuàng)建新評(píng)論時(shí)，每個(gè)評(píng)論都包括了“刪除評(píng)論”鏈接（格式相關(guān)文件部分），所以需要使用querySelectorAll()方法進(jìn)行獲取，返回結(jié)果是對(duì)象數(shù)組，按照鏈接出現(xiàn)的次序排列。代碼如下所示：1.//獲取所有刪除評(píng)論鏈接2.varas=document.querySelectorAll("a.del");技術(shù)分析與實(shí)現(xiàn)：步驟4延時(shí)符步驟5：所有鏈接綁定刪除節(jié)點(diǎn)功能。通過(guò)循環(huán)遍歷所有的刪除節(jié)點(diǎn)鏈接。為每個(gè)鏈接綁定單擊事件，事件處理方法使用removeChild()刪除節(jié)點(diǎn)，由于鏈接和評(píng)論區(qū)ul以及所在評(píng)論li的關(guān)系，參數(shù)設(shè)置應(yīng)當(dāng)表達(dá)為當(dāng)前父節(jié)點(diǎn)的父節(jié)點(diǎn)的父節(jié)點(diǎn)(this.parentNode.parentNode.parentNode)。代碼如下所示：1.//循環(huán)給每個(gè)刪除綁定事件