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

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.讓一個塊級元素在某區域內上下左右居中

<div class="container">
    <div class='box'></div>
</div>

<style type="text/css">
      .container{
          border: 1px solid #000;
          width: 300px;
          height: 300px;
          position: relative;
      }
      .box{
          border: 1px solid #000;
          width: 50px;
          height: 50px;
          /*magic blow*/
          position: absolute;
          margin: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
      }
  </style>

效果：

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

8.chrome中隱藏元素

在 Chrome 瀏覽器的 Elements 裏面選中某個元素，按 h 能夠隱藏該元素。

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

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

10.liveload

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

未完待續。。。

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