剛開始學(xué)前端那會兒我拿到過一道很經(jīng)典的練習(xí)做一個微博發(fā)布框。很多課程都習(xí)慣把這個題目安排成前端課的第四次作業(yè)因?yàn)樗鼊偤每ㄔ陟o態(tài)頁面和動態(tài)交互的過渡點(diǎn)上——你已經(jīng)有能力把界面畫出來了但還沒真正理解JavaScript是怎么讓頁面活起來的。這個「web前端 第四次作業(yè) 微博發(fā)布案例」我見過太多人翻車而且翻車的方式高度相似樣式調(diào)了半天打開控制臺卻不知道從哪下手或者把所有功能堆在一個函數(shù)里調(diào)試的時候根本無從下手。這篇文章我想從需求拆解、界面搭建、交互邏輯、數(shù)據(jù)持久化、踩坑記錄五個角度完整走一遍這個案例。內(nèi)容會盡量貼近實(shí)際做作業(yè)時的思考過程不帶框架、不引庫全程用原生HTML/CSS/JavaScript。如果你正在做類似的作業(yè)或者想用這個案例鞏固DOM操作和事件處理這篇文章應(yīng)該能幫你把每個環(huán)節(jié)都打通。1. 先弄清這個案例到底在考什么需求拆解與目標(biāo)界定很多同學(xué)拿到題目就急著打開編輯器開始寫代碼結(jié)果寫了一下午回頭發(fā)現(xiàn)布局不對、交互怪怪的、刷新之后數(shù)據(jù)全沒了。這個問題的根源在于沒有先花幾分鐘把老師到底想讓我練什么想清楚。1.1 表面是發(fā)微博實(shí)際是DOM操作的集合作業(yè)這個案例看起來只是輸入內(nèi)容、點(diǎn)發(fā)布、內(nèi)容出現(xiàn)在下方列表但仔細(xì)拆開看它幾乎把前端最基礎(chǔ)也最重要的知識點(diǎn)全部串起來了事件監(jiān)聽、表單狀態(tài)管理、數(shù)組操作、模板渲染、瀏覽器本地存儲。如果說前面的作業(yè)是在練習(xí)畫頁面那這個作業(yè)就是從畫到用的關(guān)鍵轉(zhuǎn)折點(diǎn)。我習(xí)慣把它類比成做菜看起來是一盤番茄炒蛋實(shí)際上練的是刀工、火候、調(diào)味三件事。同樣的道理這個微博發(fā)布案例表面上是一個產(chǎn)品功能實(shí)際上是讓你把DOM操作、事件流、數(shù)據(jù)刷新這三件事綜合起來練一遍。如果你只盯著把界面做像那核心的訓(xùn)練目標(biāo)就丟了。1.2 功能清單與驗(yàn)收關(guān)鍵詞開始寫代碼之前先把目標(biāo)拆成一個一個可以驗(yàn)收的小功能。我當(dāng)時給自己列了一個清單也推薦你按這個標(biāo)準(zhǔn)來做功能項(xiàng)具體說明驗(yàn)收關(guān)鍵詞輸入文本在文本域中輸入內(nèi)容支持換行textarea實(shí)時字?jǐn)?shù)統(tǒng)計(jì)每輸入一個字?jǐn)?shù)字實(shí)時變化input事件發(fā)布按鈕狀態(tài)內(nèi)容為空時按鈕置灰有內(nèi)容時高亮可點(diǎn)狀態(tài)管理發(fā)布到列表點(diǎn)擊發(fā)布后內(nèi)容追加到下方時間線動態(tài)渲染清空輸入框發(fā)布成功后輸入框重置為空表單重置刷新保留數(shù)據(jù)頁面刷新后已發(fā)布的內(nèi)容仍然存在localStorage超長處理超過140字時要有提示或限制邊界條件這個表就是整個編碼階段的施工圖。每做完一項(xiàng)就在瀏覽器里測一下對應(yīng)行為全綠了這個作業(yè)才算真正完成。作業(yè)階段的驗(yàn)收關(guān)鍵詞還有一個額外要求必須只用瀏覽器原生能力完成。也就是說不引入jQuery不引入Vue不引入任何第三方庫。因?yàn)橹挥忻撾x工具你才能真正理解每一步在干什么。1.3 推薦的開發(fā)順序先靜態(tài)后動態(tài)先核心后優(yōu)化我見過不少人一上來就寫localStorage結(jié)果輸入框還沒畫好就被數(shù)據(jù)存儲的邏輯繞暈了。正確的順序應(yīng)該是先把靜態(tài)界面完整還原出來再寫JavaScript核心交互最后再考慮數(shù)據(jù)持久化。每一步都驗(yàn)證通過之后再回頭優(yōu)化細(xì)節(jié)比如動畫效果、防XSS、時間格式化之類。文件結(jié)構(gòu)也用最經(jīng)典的三個文件weibo-demo/ ├── index.html ├── style.css └── script.js零依賴、結(jié)構(gòu)清晰瀏覽器直接打開index.html就能跑。不需要配服務(wù)器不需要npm install。這也是這個案例作為第四次作業(yè)的合理性所在——它足夠綜合但又不涉及構(gòu)建工具和環(huán)境配置能讓注意力完全集中在語言本身。2. 靜態(tài)界面搭建還原微博發(fā)布框的布局細(xì)節(jié)交互邏輯再復(fù)雜最終呈現(xiàn)在用戶眼前的還是界面。微博發(fā)布框的布局其實(shí)非常有辨識度頂部是輸入?yún)^(qū)中間是工具欄圖標(biāo)底部是字?jǐn)?shù)統(tǒng)計(jì)和發(fā)布按鈕。把這幾個區(qū)塊還原到位頁面就成功了一大半。2.1 整體布局結(jié)構(gòu)劃分我自己寫靜態(tài)頁面時習(xí)慣先畫一個結(jié)構(gòu)草圖哪怕只是隨手在紙上畫個方框也比直接敲HTML有方向。這個案例的頁面結(jié)構(gòu)可以分成三層div classpage-wrapper div classcard !-- 發(fā)布區(qū)域頭像 文本域 -- div classpublish-area div classavatar/div div classinput-area textarea idcontentInput placeholder有什么新鮮事想分享/textarea /div /div !-- 工具欄圖片、、表情等圖標(biāo)占位 -- div classtoolbar span classtool-icon圖片/span span classtool-icon/span span classtool-icon表情/span /div !-- 底部操作欄字?jǐn)?shù)統(tǒng)計(jì) 發(fā)布按鈕 -- div classbottom-bar span idwordCount0/140/span button idpublishBtn classprimary disabled發(fā)布/button /div /div !-- 動態(tài)時間線發(fā)布后內(nèi)容出現(xiàn)在這里 -- div idtimeline classtimeline/div /div這版HTML里我用了一個比較偷懶的方式工具欄的圖片、、表情直接用文字占位因?yàn)樽鳂I(yè)階段真正的重點(diǎn)是發(fā)布鏈路而不是圖標(biāo)資源。如果你想做得更精致可以用SVG或者Unicode符號替代但沒必要在這個階段花太多時間。2.2 發(fā)布框區(qū)域的樣式要點(diǎn)靜態(tài)樣式的核心是讓頁面像微博又保持代碼簡潔。幾個關(guān)鍵樣式點(diǎn)值得單獨(dú)說一下第一整個卡片應(yīng)該居中寬度固定在屏幕寬度較小時自適應(yīng)?？ㄆ年幱安灰^重border-radius也不要太夸張否則一眼看上去就出戲。第二文本域的樣式需要重點(diǎn)處理。textarea默認(rèn)樣式比較粗糙要手動去掉邊框、設(shè)置padding、設(shè)定最小高度并且允許用戶垂直拉伸。還有一個容易被忽略的細(xì)節(jié)placeholder的字體顏色要比正文淺一個色階這樣界面層級才清晰。第三頭像區(qū)域。很多新手會直接放一張網(wǎng)絡(luò)圖片但作業(yè)階段我建議用純CSS畫一個圓形占位區(qū)塊加一個底色和文字既避免了找圖的時間也方便后續(xù)改成真正的頭像數(shù)據(jù)。.card { width: 600px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); padding: 20px; } .publish-area { display: flex; gap: 12px; } .avatar { width: 48px; height: 48px; border-radius: 50%; background: #ff8200; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; } #contentInput { width: 100%; min-height: 80px; border: none; outline: none; resize: vertical; font-size: 15px; line-height: 1.6; padding: 8px 0; } #contentInput::placeholder { color: #999; } .toolbar { padding: 8px 56px 4px; display: flex; gap: 16px; } .tool-icon { cursor: pointer; color: #888; font-size: 14px; user-select: none; } .bottom-bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 8px; }這里我特意把輸入?yún)^(qū)左側(cè)的pading留給了頭像工具條也用56px的左內(nèi)邊距和頭像對齊整體視覺就非常接近真實(shí)產(chǎn)品的布局了。樣式寫完后先在瀏覽器里打開看一眼輸入框能不能拉伸、placeholder顏色是否協(xié)調(diào)、按鈕有沒有默認(rèn)的藍(lán)色邊框——后兩者特別容易被忽略。2.3 輸入狀態(tài)對應(yīng)的按鈕樣式管理微博發(fā)布按鈕的典型狀態(tài)有兩種內(nèi)容為空時是灰色、不可點(diǎn)擊輸入內(nèi)容后變成橙色、可點(diǎn)擊。很多新手實(shí)現(xiàn)時會直接依賴HTML的disabled屬性然后在CSS里加一句button:disabled { cursor: not-allowed; opacity: 0.5; }這樣當(dāng)然能跑但我建議你加上class切換 disabled屬性雙管齊下。為什么因?yàn)閐isabled屬性只控制了能不能點(diǎn)如果后續(xù)你想做出更豐富的視覺反饋比如按鈕懸停變暗、按下有輕微位移class才是靈活的入口。.primary { background: #ff8200; color: #fff; border: none; border-radius: 20px; padding: 6px 24px; font-size: 14px; cursor: pointer; } .primary:hover { background: #e67500; } .primary.is-disabled { background: #ffcf9e; cursor: not-allowed; }注意這里我沒有直接給button加disabled樣式而是定義了一個is-disabled類。JavaScript里同步維護(hù)disabled屬性和class最終的效果是視覺上通過class控制行為上通過原生屬性兜底。即使某處樣式加載失敗按鈕依然不可點(diǎn)邏輯不會被繞過。這一階段的成果是一個看起來完整、能正確響應(yīng)鼠標(biāo)懸停狀態(tài)的靜態(tài)頁面。接下來才是這個案例真正的重頭戲——讓發(fā)布框開口說話。3. JavaScript交互核心字?jǐn)?shù)統(tǒng)計(jì)、按鍵監(jiān)聽與按鈕狀態(tài)管理如果說靜態(tài)部分是皮那JavaScript交互就是骨。這一部分我會按監(jiān)聽什么事件統(tǒng)計(jì)什么數(shù)據(jù)切換什么狀態(tài)三條線展開這也是整個案例最核心的考點(diǎn)。3.1 監(jiān)聽input事件而不是keyup事件獲取輸入框內(nèi)容的最常見寫法是監(jiān)聽keyup事件因?yàn)樗侵形幕ヂ?lián)網(wǎng)上大量老教程的標(biāo)配。但如果你真正驗(yàn)證過就會發(fā)現(xiàn)keyup有個問題它只在鍵盤按鍵彈起時觸發(fā)用戶通過鼠標(biāo)右鍵粘貼文本、拖拽文本、或者用輸入法組合拼音的過程中keyup根本不會觸發(fā)或者觸發(fā)時機(jī)不對。正確的做法是監(jiān)聽input事件。input事件是HTML5標(biāo)準(zhǔn)事件只要輸入框的值發(fā)生變化包括粘貼、剪切、拖拽、輸入法確認(rèn)它就會立刻觸發(fā)。這是實(shí)時字?jǐn)?shù)統(tǒng)計(jì)最可靠的基礎(chǔ)。const textarea document.getElementById(contentInput); const wordCount document.getElementById(wordCount); const publishBtn document.getElementById(publishBtn); const timeline document.getElementById(timeline); textarea.addEventListener(input, function () { updateWordCount(); updateButtonState(); });這里有一個細(xì)節(jié)值得單獨(dú)提中文輸入法組合階段的誤觸發(fā)。用戶在拼音輸入法里打nihao時input事件會在組合過程中反復(fù)觸發(fā)導(dǎo)致字?jǐn)?shù)統(tǒng)計(jì)和按鈕狀態(tài)實(shí)時跳動視覺上很不穩(wěn)定。規(guī)范的處理方式是配合compositionstart和compositionend事件在拼音組合期間暫停統(tǒng)計(jì)let isComposing false; textarea.addEventListener(compositionstart, function () { isComposing true; }); textarea.addEventListener(compositionend, function () { isComposing false; updateWordCount(); updateButtonState(); }); textarea.addEventListener(input, function () { if (!isComposing) { updateWordCount(); updateButtonState(); } });這樣用戶在拼音組合過程中字?jǐn)?shù)不會瘋狂跳動只有選詞確認(rèn)后才會更新一次。這個細(xì)節(jié)不僅適用于本次作業(yè)以后做搜索框、彈幕框、聊天輸入框時都會遇到。3.2 字?jǐn)?shù)統(tǒng)計(jì)的邊界處理與中文場景字?jǐn)?shù)統(tǒng)計(jì)的常規(guī)邏輯一句話就能說清讀取textarea.value.length。但真實(shí)場景里邊界情況比想象中多。三種情況必須分別處理function updateWordCount() { const text textarea.value; const len text.length; const maxLen 140; wordCount.textContent len / maxLen; if (text.trim().length 0) { wordCount.style.color #999; } else if (len maxLen) { wordCount.style.color #e74c3c; } else { wordCount.style.color #999; } }其中text.trim().length 0這個判斷特別關(guān)鍵用戶如果只輸入了一堆空格界面上看著有內(nèi)容實(shí)際上沒有發(fā)布價值。如果不做trim判斷按鈕就會錯誤地變?yōu)榭牲c(diǎn)擊狀態(tài)發(fā)出來一條空白微博這是會被扣分的操作。另一個點(diǎn)是**微博歷史上限是140字這里做成140是為了讓超限時的紅色警告有意義。**如果你用的是不同的上限也完全沒問題核心是長度邊界要能被用戶明確感知。超限之后怎么處理我建議不阻止輸入而只是用紅色提醒因?yàn)閺?qiáng)制截斷用戶的粘貼內(nèi)容會帶來更糟糕的體驗(yàn)而且還需要額外監(jiān)聽粘貼事件。真正要阻止的是超限內(nèi)容發(fā)布出去這一步放在按鈕狀態(tài)管理里處理。3.3 發(fā)布按鈕的三態(tài)管理邏輯發(fā)布按鈕的狀態(tài)其實(shí)是三態(tài)的不只是灰/亮兩態(tài)內(nèi)容為空時禁用正常輸入時可以使用超限時按鈕亮著但點(diǎn)擊后應(yīng)該被攔下來并給提示。第一種做法是超限時直接置灰按鈕但用戶體驗(yàn)一般用戶會覺得我明明在寫東西為什么按鈕突然不能點(diǎn)了。第二種做法是我更推薦的按鈕視覺上保持可點(diǎn)但綁定點(diǎn)擊事件后做二次校驗(yàn)。function getText() { return textarea.value.trim(); } function updateButtonState() { const text getText(); const len text.length; const valid text.length 0 len 140; if (valid) { publishBtn.classList.remove(is-disabled); publishBtn.removeAttribute(disabled); } else { publishBtn.classList.add(is-disabled); publishBtn.setAttribute(disabled, disabled); } } publishBtn.addEventListener(click, function () { const text getText(); if (text.length 0) { alert(內(nèi)容不能為空); return; } if (text.length 140) { alert(內(nèi)容超過140字請精簡后再發(fā)布); return; } publishPost(text); });這套邏輯的好處是職責(zé)清晰updateButtonState負(fù)責(zé)視覺和可點(diǎn)擊狀態(tài)click處理器負(fù)責(zé)最終的內(nèi)容校驗(yàn)。以后如果你要做敏感詞攔截或者黑名單標(biāo)簽過濾只需要在click處理器里加判斷即可不影響按鈕狀態(tài)的更新邏輯。發(fā)布成功后需要重置整個輸入?yún)^(qū)——這個操作看著簡單但順序錯了會有大坑放到下一章專門講。4. 動態(tài)渲染與數(shù)據(jù)持久化從發(fā)布到時間線發(fā)布按鈕點(diǎn)擊之后數(shù)據(jù)必須出現(xiàn)在頁面下方的時間線里。這一步涉及兩個問題一是什么樣的渲染方式既簡單又安全二是數(shù)據(jù)刷新后如何保留。4.1 渲染方案的選型手動DOM拼接與數(shù)組驅(qū)動新手最容易想到的寫法是發(fā)布時創(chuàng)建幾個DOM元素然后appendChild到時間線容器里。這種寫法也能跑但問題在于數(shù)據(jù)和視圖是焊死的——后續(xù)想加刪除、編輯、排序功能時你得翻遍所有代碼非常痛苦。另一個常見做法是用innerHTML拼接字符串timeline.innerHTML div classpost-item content /div;這個寫法是典型的反面教材第一會讓每次發(fā)布都重排整個列表數(shù)據(jù)量大時不推薦第二content里的HTML標(biāo)簽會被當(dāng)成代碼解析直接造成XSS攻擊漏洞第三樣式和內(nèi)容混在一起后續(xù)維護(hù)很痛苦。我推薦的做法是數(shù)組驅(qū)動渲染。把每條微博存成一個對象放進(jìn)一個數(shù)組里每當(dāng)數(shù)據(jù)變化就調(diào)用一個render()函數(shù)把整個數(shù)組重新渲染成列表。這個模式是Vue、React這類框架底層的樸素雛形。雖然作業(yè)階段看起來多寫了幾行代碼但你提前建立了數(shù)據(jù)驅(qū)動視圖的心智模型后面學(xué)框架時會非常順暢。let posts []; function createPostElement(post) { const item document.createElement(div); item.className post-item; const author document.createElement(div); author.className post-author; author.textContent post.author; const content document.createElement(div); content.className post-content; content.textContent post.content; const time document.createElement(div); time.className post-time; time.textContent post.time; item.appendChild(author); item.appendChild(content); item.appendChild(time); return item; } function render() { timeline.innerHTML ; posts.forEach(function (post) { const item createPostElement(post); timeline.appendChild(item); }); }這版代碼里有三個很關(guān)鍵的細(xì)節(jié)第一createPostElement用textContent來設(shè)置內(nèi)容而不是innerHTML用戶輸入的任何HTML都會被當(dāng)作純文本展示XSS漏洞直接堵死第二render()先清空容器再整體渲染保證列表數(shù)據(jù)和posts數(shù)組永遠(yuǎn)一致第三每條數(shù)據(jù)包含作者、內(nèi)容、時間三個字段為后續(xù)擴(kuò)展留好了空間。4.2 localStorage的數(shù)據(jù)結(jié)構(gòu)與存取流程頁面刷新后數(shù)據(jù)消失是新手最容易受挫的環(huán)節(jié)。解決方案是用localStorage把posts數(shù)組持久化到瀏覽器里。localStorage的使用有三步存數(shù)據(jù)、讀數(shù)據(jù)、清理數(shù)據(jù)。存數(shù)據(jù)時要先把數(shù)組轉(zhuǎn)成JSON字符串function savePosts() { localStorage.setItem(weibo_posts, JSON.stringify(posts)); }讀數(shù)據(jù)時要把JSON字符串轉(zhuǎn)回數(shù)組這個步驟千萬不能省。我第一次寫的時候直接localStorage.getItem(weibo_posts)拿回來后當(dāng)數(shù)組用結(jié)果報錯半天function loadPosts() { const stored localStorage.getItem(weibo_posts); if (!stored) return; try { posts JSON.parse(stored) || []; } catch (e) { posts []; } }try...catch非常有必要。因?yàn)閘ocalStorage是用戶可以手動修改的存儲區(qū)一旦里面存了非法的JSON字符串JSON.parse會直接拋異常整個頁面腳本就會中斷。加一層容錯至少保證數(shù)據(jù)崩了頁面還能打開。localStorage的容量上限大約是5MB對微博文本列表來說綽綽有余。但有一點(diǎn)要注意localStorage只能存字符串不要試圖直接存對象或數(shù)組。任何結(jié)構(gòu)化數(shù)據(jù)都必須走JSON序列化這道工序。結(jié)構(gòu)化字段設(shè)計(jì)為{ id: Date.now(), author: 我, content: 今天天氣不錯, time: new Date().toLocaleString(zh-CN, { hour12: false }) }把Date.now()作為id比用數(shù)組下標(biāo)安全得多——刪除、排序時下標(biāo)會變但時間戳id不會變。這個字段現(xiàn)在看起來多余但如果后續(xù)要做刪除功能、點(diǎn)贊功能id就是定位數(shù)據(jù)的錨點(diǎn)。4.3 清空輸入框與增量渲染的順序問題發(fā)布動作的完整流程順序千萬不要亂。我最早寫的時候是先清空輸入框再渲染結(jié)果列表里永遠(yuǎn)顯示為空排查了好久。正確順序是讀取內(nèi)容 → 校驗(yàn) → 構(gòu)造數(shù)據(jù)對象 → push進(jìn)數(shù)組 → 保存到localStorage → 渲染列表 → 清空輸入框 → 重置字?jǐn)?shù)統(tǒng)計(jì)和按鈕狀態(tài)。function publishPost(text) { const post { id: Date.now(), author: 我, content: text, time: new Date().toLocaleString(zh-CN, { hour12: false }) }; posts.unshift(post); savePosts(); render(); textarea.value ; updateWordCount(); updateButtonState(); }先存數(shù)據(jù)和渲染最后清空輸入框。這個順序的意義在于如果你先清空textarea再調(diào)用renderrender內(nèi)部雖然不依賴輸入框的值但后續(xù)想從輸入框讀取本次發(fā)布內(nèi)容的任何擴(kuò)展邏輯都會被破壞。從數(shù)據(jù)流的角度看發(fā)布的內(nèi)容一旦被持久化就和輸入框解耦了此時再重置輸入框才是安全的。另外注意我用的是unshift而不是push這樣最新發(fā)布的微博出現(xiàn)在時間線最頂部符合主流產(chǎn)品的排序習(xí)慣。如果你希望新內(nèi)容在底部改成push即可。頁面初始化時也要記得加載歷史數(shù)據(jù)loadPosts(); render();這兩行放在script文件最末尾執(zhí)行等DOM就緒后再渲染。如果你想更保險可以把它們放進(jìn)DOMContentLoaded事件里。不過只要script標(biāo)簽放在body的最后直接調(diào)用也完全沒有問題。5. 踩坑記錄與進(jìn)階擴(kuò)展把作業(yè)真正吃透的細(xì)節(jié)做完以上功能作業(yè)已經(jīng)合格了。但如果你想把代碼質(zhì)量提上去或者以后被問到這個項(xiàng)目有什么坑時能說出真實(shí)經(jīng)驗(yàn)這一部分的細(xì)節(jié)一定要看。這些都是我在反復(fù)寫、反復(fù)調(diào)試中踩過的坑每個都能復(fù)現(xiàn)。5.1 最容易翻車的三個細(xì)節(jié)事件綁定、innerHTML、數(shù)據(jù)初始化第一個坑動態(tài)生成的節(jié)點(diǎn)上綁定事件無效。很多同學(xué)發(fā)布成功后想給每條微博加一個刪除按鈕于是在createPostElement里直接給按鈕加事件監(jiān)聽deleteBtn.addEventListener(click, function () { // 刪除邏輯 });這種做法在作業(yè)階段勉強(qiáng)能跑但一旦涉及動態(tài)創(chuàng)建/刪除節(jié)點(diǎn)就會遇到事件丟失、內(nèi)存泄漏、代碼邏輯混亂等問題。更好用的方案是事件委托把事件綁定到時間線容器上用e.target判斷點(diǎn)擊的是不是刪除按鈕。這樣一來無論列表里有多少條內(nèi)容事件只需要綁定一次性能更優(yōu)代碼也更穩(wěn)。第二個坑用innerHTML插入用戶輸入導(dǎo)致XSS漏洞。上文的textContent寫法已經(jīng)規(guī)避了這個問題但如果你堅(jiān)持用模板字符串加innerHTML拼接內(nèi)容就等于把前端安全的大門敞開了。經(jīng)典攻擊演示用戶在輸入框里貼上img srcx onerroralert(document.cookie)發(fā)布后這段代碼會在每個訪問者的瀏覽器里執(zhí)行。這不是危言聳聽真實(shí)產(chǎn)品里因此出事的不在少數(shù)。牢記一條鐵律凡是插入用戶內(nèi)容永遠(yuǎn)優(yōu)先使用textContent。第三個坑初始化順序。有同學(xué)把loadPosts()寫在文件開頭那時候程序還沒執(zhí)行到定義posts變量的上一行結(jié)果是報錯posts is not defined。這個坑非常隱蔽尤其是在使用let聲明變量時因?yàn)閘et存在暫時性死區(qū)變量在被聲明之前訪問會直接拋錯。我的習(xí)慣是所有事件監(jiān)聽放在文件中間所有初始化邏輯放在文件最后這個順序簡單粗暴但確實(shí)有效。5.2 簡單防XSS處理中間層轉(zhuǎn)義與textContent二選一如果你確實(shí)需要在項(xiàng)目里用innerHTML渲染復(fù)雜的模板結(jié)構(gòu)比如帶高亮標(biāo)顏色的內(nèi)容那就要對用戶輸入做轉(zhuǎn)義。最簡單的方式是給字符串加一層處理function escapeHTML(str) { return str .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #039;); }然后在拼接HTML時timeline.innerHTML div escapeHTML(userContent) /div;不過說句實(shí)在話對這個案例來說textContent已經(jīng)是最佳方案代碼還更簡潔。真正需要轉(zhuǎn)義的情況是內(nèi)容里還要插入結(jié)構(gòu)化的HTML標(biāo)簽時比如把#話題#變成藍(lán)色鏈接把用戶變成可點(diǎn)擊跳轉(zhuǎn)。如果你把微博案例往這個方向擴(kuò)展轉(zhuǎn)義函數(shù)就派上用場了。5.3 超出作業(yè)的擴(kuò)展方向圖片預(yù)覽、相對時間、動畫與刪除功能作業(yè)做完之后我強(qiáng)烈建議你在原基礎(chǔ)上擴(kuò)展一到兩個小功能這是從完成作業(yè)到掌握技能的分水嶺。第一個推薦擴(kuò)展是圖片預(yù)覽。給工具欄的圖片圖標(biāo)綁定一個隱藏的input[typefile]選擇圖片后用URL.createObjectURL(file)生成臨時預(yù)覽地址發(fā)布時將圖片信息一并存入post對象列表渲染時如果是圖文類型就拼接一個img標(biāo)簽展示。這個功能會加深你對對象URL和二進(jìn)制資源的理解。第二個推薦擴(kuò)展是相對時間顯示。現(xiàn)在post對象里存的是完整時間字符串你可以改成存時間戳渲染時動態(tài)計(jì)算剛剛 / x分鐘前 / x小時前 / x天前。這樣每次渲染都需要重算一次時間也對數(shù)據(jù)是不可變快照還是可變狀態(tài)有了更深的體會。相對時間功能練的是純邏輯不涉及新增API非常適合檢驗(yàn)自己的日期處理能力。第三個推薦擴(kuò)展是入場動畫。在列表渲染時給新添加的item加一個CSS transition從透明度0、位移20px過渡到正常狀態(tài)會讓整個頁面質(zhì)感提升不少。動畫過程中要注意一個細(xì)節(jié)不能每次render()都觸發(fā)所有條目的動畫否則刷新頁面時整屏都會閃。解決辦法是只在發(fā)布動作后針對剛插入的那條item添加動畫class其他條目不做處理。第四個推薦擴(kuò)展是刪除功能。配合5.1節(jié)說的事件委托給每條微博加一個刪除按鈕點(diǎn)擊后根據(jù)item的>