前端開發小技巧（來自知乎）

cangck_X 發布于2019-08-30 13:02 / 1407人閱讀

摘要：原生越來越好了，如果是簡單的頁面，沒必要引入一個龐大的，尤其在手機端，對速度流量敏感的地方，另外最好自己簡單封裝一些常用的函數，比如等。。。這時候它就不知所措了，只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識

1.You Might Not Need jQuery

不用jQuery，原生js如何實現，可以參考這里：You Might Not Need jQuery 。原生js越來越好了，如果是簡單的頁面，沒必要引入一個龐大的jQuery，尤其在手機端，對速度流量敏感的地方，另外最好自己簡單封裝一些常用的函數，比如toggleClass等。。。

2.Firefox查看源代碼功能檢查頁面錯誤

頁面寫完后，記得用Firefox 查看頁面源代碼功能，可以一眼發現未閉合標簽、未轉義的HTML字符，如果不嫌麻煩，可以提交代碼到 http://validator.w3.org/ 驗證HTML、CSS，下面圖片來自CSDN當前首頁源碼，可以看到Firefox紅色高亮了錯誤的HTML代碼，_blank后面多了一個雙引號。

3.少用id

如果不在頁面中用js引用元素，盡可能不要設置元素的id，也盡量不要用#main{}來設置元素css樣式，而是用class方式.main{},因為

可以防止ID重復，造成錯誤

可以方便引入新CSS復寫樣式，另外應當絕對避免行內css樣式.

4.max-device-width

使用 max-device-width檢測而不是max-width來兼容手機、平板等，可以避免桌面瀏覽器因為窗口小，而看到丑陋的手機頁面效果。

@media only screen and (max-device-width:980px){}

5.flex布局

多列布局，不考慮低級瀏覽器可以使用CSS3的flex布局，可以做到比浮動更好控制，如我寫的樣例代碼，垂直、水平居中可以很容易實現：

6.二維碼生成當前網址的插件

裝個二維碼生成當前網址的插件，以方便查看手機實際顯示效果，現在移動端日益重要，作為前端，一定不能忽視移動端的顯示效果，雖然瀏覽器都支持選擇device來測試不同的設備顯示效果，但畢竟和真實設備有差別，尤其在測試微信內的頁面時候，非常方便。

7.讓一個塊級元素在某區域內上下左右居中

效果：

解釋：原理就是讓 box 自己既要往左也要往右，既要往上也要往下。這時候它就不知所措了，只好待在中間。

8.chrome中隱藏元素

在 Chrome 瀏覽器的 Elements 里面選中某個元素，按 h 可以隱藏該元素。

9.適當使用localStorage緩存HTML表單內容.

適當使用localStorage緩存HTML表單內容，防止瀏覽器崩潰、死機造成填寫丟失.
具體事例移步這里cache form.通過‘查看網頁源代碼’可以看到實現的js，我還沒研究明白。。。

10.liveload

使用一些chrome的liveload插件或者grunt、glup這些構建工具的liveload插件，這樣可以邊寫代碼變自動刷新頁面，實時看效果.

未完待續。。。

參考：前端界有哪些越早知道越好的小技巧小知識？

云服務器 GPU云服務器前端開發技巧前端技巧知乎web前端小技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115255.html

前端開發小技巧（來自知乎）

摘要：原生越來越好了，如果是簡單的頁面，沒必要引入一個龐大的，尤其在手機端，對速度流量敏感的地方，另外最好自己簡單封裝一些常用的函數，比如等。。。這時候它就不知所措了，只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識 1.You Might Not Need jQuery 不用jQuery，原生js如何實現，可以參考這里：You Might Not Need jQuery 。原生js...

妤鋒シ 2019-08-02 15:54 評論0 收藏0
前端開發小技巧（來自知乎）

摘要：原生越來越好了，如果是簡單的頁面，沒必要引入一個龐大的，尤其在手機端，對速度流量敏感的地方，另外最好自己簡單封裝一些常用的函數，比如等。。。這時候它就不知所措了，只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識 1.You Might Not Need jQuery 不用jQuery，原生js如何實現，可以參考這里：You Might Not Need jQuery 。原生js...

Freeman 2019-08-19 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

MudOnTire 2019-08-21 18:25 評論0 收藏0