網(wǎng)站建設(shè)公司分享一個經(jīng)過測試的前端框架建設(shè)解決方案。深圳網(wǎng)站建設(shè)公司雖然在本欄目前面文章中描述每個場景都突出了更深刻的組織層面的問題，但它們都可以通過適當?shù)臏y試覆蓋率來緩解。我們不去測試 JavaScript 函數(shù)的有效返回結(jié)果，而是抓取已授權(quán)的設(shè)計系統(tǒng)的視覺外觀，從而驗證我們沒有偏離該系統(tǒng)。在提交之前抓取這些視覺還原是保證設(shè)計系統(tǒng)一致性的關(guān)鍵。
網(wǎng)站建設(shè)對于前端視覺還原測試讓我們可以將正在開發(fā)的版本或者即將部署的版本（新版本）與正確的版本（基線版本）進行視覺對比。這個過程只不過是抓取基線版本的截圖，與最新版本進行對比，并找出像素層面的差異。通過把這些基線圖片提交到倉庫，或者在測試庫里將其標記為通過，我們就對任何特定的功能（在我們的例子中為聯(lián)系表）在像素級別的視覺表現(xiàn)有了簽名確認并一致認同的核對記錄。在任何代碼提交到主分支之前，視覺還原測試提供了一種測試網(wǎng)站所有功能的方法，以確保沒有出乎意料的視覺改變。這樣，我們對一些原本由 PSD 文件不一致導(dǎo)致的 bug 報告也有了應(yīng)對措施。借助于已經(jīng)簽名并提交到代碼庫的基準，我們可以跑一遍測試程序，并自信地回復(fù)道：“我們的代碼沒有問題，一定是 Photoshop 文件出了問題。”同樣，我們也可以借此分辨真正的 bug 和新的變更需求。
網(wǎng)站建設(shè)公司關(guān)于網(wǎng)站前端架構(gòu)設(shè)計視覺還原測試的多面性
借助于多種技術(shù)和流程，視覺還原測試可以有多種風格。雖然新的工具不斷地被發(fā)布到開源社區(qū)，但它們通常是一小部分功能的組合。面對這一事實吧：我們啟動的每個項目的前端代碼都正在變得越來越復(fù)雜。我并不是說這是件壞事，只是快速的成長也帶來了更多的問題。就在幾年前，我們還把所有的 CSS 放在一個單一的文件中，并且對每一個樣式使用一長串很復(fù)雜的選擇器，以此來確定頁面中對應(yīng)的元素。如果發(fā)現(xiàn)某一個樣式受到頁面上其他樣式的干擾，就在文件底部寫一個有更長的選擇器的新樣式。與之類似，我們的 JavaScript 文件曾經(jīng)也使用一大堆 JQuery 函數(shù)，以此對頁面中的目標元素應(yīng)用某些功能。每個函數(shù)都包含了完成所需功能的全部邏輯和代碼，如果需要對另外一個元素實現(xiàn)稍微不同的功能，只要簡單地復(fù)制一份代碼，修改一下選擇器，并更新部分邏輯即可。簡而言之，我們過去相當于為每個項目寫一個單獨的 PHP 文件應(yīng)用程序。
之后，正如 PHP 開發(fā)者學著將代碼拆分成可重用的對象，并將代碼組織到不同的文件中一樣，前端項目也逐漸擺脫原先一長串級聯(lián)指令的形態(tài)，開始變得更像一個充滿抽象定義、依賴關(guān)系和接口的復(fù)雜系統(tǒng)。雖然我們很快采用了傳統(tǒng)編程語言中的面向?qū)ο蠛投辔募姆椒?，但是很難做到同步寫出完整的文檔。這么多年來我們一直使用聲明式系統(tǒng)，以至于我們對新系統(tǒng)的理解在頭腦中早已固化了。將頭腦中這些看似常識的信息寫到文檔上并非易事，但我們因為沒有文檔而浪費的時間比寫文檔花費的時間更多。俗話說得好：好記性不如爛筆頭。
網(wǎng)站建設(shè)公司前端設(shè)計師常說的文檔是什么？
文檔是系統(tǒng)設(shè)計的藍圖。沒有文檔，我們將難免重復(fù)解決已經(jīng)解決過的問題，而且花大量時間查看代碼來尋找最簡單的答案。沒有文檔，我們的新員工只能對著系統(tǒng)抓耳撓腮，并懷疑在這種系統(tǒng)中怎么可能完成自己的任務(wù)?；仡櫼幌履壳盀橹刮覀冊O(shè)計過的所有架構(gòu)，如果不花同等的時間來講一下寫文檔的方法，那簡直是一種罪過。寫文檔是開發(fā)工作的一部分，而不是等重要工作完成后才開始的事情。就像需要重構(gòu)的臃腫代碼、需要自動化的低效率流程，或者沒有被測試覆蓋到的函數(shù)一樣，略過文檔也會欠下技術(shù)債。不要以為文檔只是簡單地寫下代碼如何工作。的確，我們需要在開發(fā)流程中預(yù)留出寫文檔的時間，用于記錄我們開發(fā)的代碼是如何工作的，但是寫文檔遠遠不止為每一行代碼寫一段描述。
文檔有多種形式，而其中很多只有在架構(gòu)支持時才能成型。雖然有些文檔只是用于描述每個函數(shù)的普通文本，但這種文檔背后往往有一套基于搜索、導(dǎo)航和視覺呈現(xiàn)的構(gòu)建系統(tǒng)。其他的文檔用于展示系統(tǒng)的資源，由我們所寫的樣式、腳本、模板和模式來驅(qū)動。
網(wǎng)站建設(shè)公司前端設(shè)計師解析什么是靜態(tài)文檔
Hologram是基于 Ruby 的通用文檔工具，你可以在代碼庫中寫小段的注釋，然后通過它來收集這些注釋生成的靜態(tài)頁面。這些 Markdown 格式的文檔塊可以放進你的 Sass、CSS 或者 JavaScript 文件中。這些文檔塊還包括用于描述頁面名稱和導(dǎo)航等相關(guān)信息的元數(shù)據(jù)，并且它的書寫形式完全自由。Hologram 讓你可以將文檔內(nèi)聯(lián)地寫在代碼中，這有助于使文檔保持最新，同時使開發(fā)人員總能看到這些文檔。SassDoc是基于 Node 的系統(tǒng)文檔工具，它宣稱“SassDoc 對于 Sass 的意義，就像 JSDoc 對于 JavaScript 的意義一樣”，而且它的確如此！SassDoc 與 Hologram 有點像，它也依賴于代碼中內(nèi)聯(lián)的注釋來生成最終文檔。然而，Hologram 是通用的、多功能的工具，SaasDoc 卻專注于描述 Sass 變量、函數(shù)、混入（mixin），以及它們是如何相互影響和依賴的。如果你正在構(gòu)建一個大型的 Sass 框架，或者一個復(fù)雜的柵格或顏色系統(tǒng)，SassDoc 正是你想要的工具。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“ 網(wǎng)站建設(shè)公司分享一個經(jīng)過測試的前端框架建設(shè)解決方案”知識就分享到這里。如果您需要尋找網(wǎng)站建設(shè)公司來為您單獨定制網(wǎng)站，請聯(lián)系我們網(wǎng)站客服或者撥打聯(lián)系電話，有專人為您提供詳細的解決方案。
