10 天開發前臺系統技術系列

在確定了前臺系統的詳細規劃和整體功能以後，花費時間更多的其實是對技術細節的打磨。本篇文章是一個對前臺開發技術進行概要整理，也會對其他的分主題進行一些引導。

本文來源：魚立說。本文連結：https://www.yulisay.com/d/frontskill.html，支援微信瀏覽器開啟。

更多精彩文章，請移步 魚立說個人網站 翻看。歡迎欣賞，吐槽不足之處。

---

本主題借鑑我開發個人網站 魚立說 的經驗，整理了在開發前臺系統過程可能會遇到的各種技術要點。整個系列由以下幾個文章部分組成：

• 前臺開發技術小結

• 動起來的網站元素

而且，涉及到的程式碼已經整理到 https://github.com/yulis-say/web-full-stack 中的 front-skills 目錄，若覺得有用，請分享並 star 。

前臺開發小結

下面對前臺系統的開發技術要點依次進行概括，包括必要的說明和資源引導。

CSS 使用技巧

• :root 是一個偽類，表示文件根元素。在 :root 中宣告相當於全域性屬性，只要當前頁面引用了 :root 所在檔案，都可以使用 var() 來引用。

• 要除去多餘的 CSS 樣式，有一個叫 CSS remove and combine 的 Chrome 外掛可以參考，可以生成未使用的選擇器分析報告。下載地址：http://www.cnplugins.com/devtool/css-remove-and-combine/。

• 推薦一個叫 Autosize 的 JavaScript 外掛，它是一個小型的、獨立的指令碼，可以自動調整 textarea 標籤的文字高度以適應文字，且取消右邊滾動條。Github 地址：https://github.com/jackmoore/autosize。

JavaScript 使用技巧

• 設定的 Cookie 無法取到？這是因為新增 Cookie 的時候沒有指定 path。在新增 Cookie 時，應該指定其 path 為唯一絕對路徑，方便獲取或操作同一網站中的 Cookie。

• QRCode.js ：一個用於生成二維碼的 JavaScript 庫，主要是通過獲取 DOM 的標籤，再通過 HTML5 Canvas 繪製而成，不依賴任何庫。Github 地址：https://github.com/davidshimjs/qrcodejs。

• social-share.js ：實現網站一鍵分享到 QQ、微信、微博、豆瓣、Facebook、Twitter、Linkedin、Google+等，不過專案現在已經不再維護了。Github 地址：https://github.com/davidshimjs/qrcodejs。

動起來的網站元素

有時候，動起來的網站元素能給使用者帶來更好的體驗，從而吸引更多的人們訪問你的網站。當然，缺陷是會給網頁帶來一些額外的資源消耗。效果如圖：

圖：動起來的網站元素

一些有趣的網站功能

Gravatar 隨機頭像

它是 Gravatar 推出的一項服務，意為“全球通用頭像”。只要提供一個雜湊值，就能夠顯示出 Gravatar 頭像來。如果這個雜湊值是由註冊的 email 地址生成的，那麼就會顯示你在 Gravatar 上傳的頭像；如果是未註冊的隨便生成的雜湊值，那麼就會隨機生成一個虛假頭像。

並且，使用 Gravatar 能夠生成多種型別的頭像，例如神祕人、隨機圖案、怪物、卡通頭像、畫素圖片、機器人等。文件地址：http://en.gravatar.com/site/implement/images/。效果如圖：

圖：Gravatar 隨機頭像

新浪微博表情

網站的評論或聊天功能中，通常需要支援各種表情，這時就可以參考使用新浪微博表情，官方文件：https://open.weibo.com/wiki/2/emotions。效果如圖：

圖：新浪微博表情

向瀏覽器控制檯輸出資訊

有時候可以使用 Console 物件，向瀏覽器控制檯輸出一些特殊的網站資訊，比如網站介紹、業務支援、招攬人才等。例如我的網站中輸出的資訊，如圖：

圖：向瀏覽器控制檯輸出資訊

更多有用的網站

• MDN Web 文件 ：提供有關開放網路技術的資訊，包括 HTML、CSS 和全球資訊網及 HTML5 應用的 API。網址：https://developer.mozilla.org。

• Font Awesome 字型圖示 ：提供可縮放向量圖示，可以被定製大小、顏色、陰影以及任何可以用 CSS 的樣式。網址：https://fontawesome.com/。

參考連結

① Gravatar - Globally Recognized Avatars

② console.log - Web API 介面參考 | MDN