前言

好的開發方式在專案中會起到事半功倍的效果，並且可以保證開發過程中程式碼的結構清晰，可維護性好。良好的命名規範和規整的格式會讓程式碼看起來很清爽，同時也可以體現出開發者良好的開發習慣和職業素養。

程式碼檔案的組織結構

下面貼一張我一般會使用的一個簡單的程式碼組織結構

其實現在有很多的框架的腳手架裡面都會有一種固定的檔案組織結構，但是你無論看什麼框架的腳手架，大體上的東西都是這樣的。多的都是一些擴充套件，是一些框架本身的東西，這種檔案組織結構已經形成了一種約定。這樣有利於我們開發者之間的溝通。

程式碼重構

程式碼重構是業內經常討論的一個熱門話題。程式碼重構是為了使我們的程式碼效能和可維護性變得更好。主要分為精簡程式碼、程式碼規範化、整理基礎類庫、程式碼模組化、載入效能優化幾個步驟。

• 精簡程式碼主要是css和javascript檔案中，其中包括一些不起作用的程式碼。這是一個非常麻煩的過程需要非常謹慎的處理上下文的關係。主要是寫法的優化和實現方式上的優化，儘可能的使我們程式碼的執行效能高效。

• 程式碼規範化主要就是結構和樣式相分離以及javascript中變數的定義以及作用域的區分。HTML更改標準已不推薦的標籤，使用語義化標籤。CSS從HTML中分離出來，統一命名規則。Javascript中集中定義區域性變數，並把部分全域性變數轉為區域性變數。

• 整理基礎類庫 是檢視由於前期為了開發進度而引入的多個框架中存在很多重複的功能，以及專案中很多相同的功能使用不同的類庫實現。重構的內容就是同意ui組建庫的使用，同意基礎方法的使用。

• 程式碼模組化主要是根據功能來存放檔案。比如實現一個列表頁面，我們可以建立list.html、list.css、list.js 這樣的檔案結構。同時將javascript的公共方法歸類到獨立的檔案中，使用面向物件的思想來進行程式碼重構，進一步明確共有介面和私有介面。

• 載入效能主要就是說頁面的響應速度，即頁面內容的呈現時間。我們可以將不影響首頁展示的一個javascript程式碼延遲載入，刪除頁面中初始隱藏的部分，改為通過javascript 按需動態插入。圖片延遲載入；css和javascript的引入順序；給靜態檔案設定快取；使用雪碧圖（sprite）；合併並壓縮css和javascript程式碼檔案

框架的使用

我們在開發過程中免不了是需要使用一些前端的框架的，因為框架可以大大提高我們的開發效率。

如何選取合適的框架

• 專案需求。專案需求是選擇框架的最主要因素之一。我們要了解專案的基本需求，比如模組化、資料格式、瀏覽器支援、移動端還是PC端等。

• 專案特點。比如開發團隊的技術能力、開發的週期、是否需要長期維護。作為開發人員我們不可能每個框架都會，學習一個新的框架是需要成本和時間的。所以我們要根據專案的特點來選取一些合適的框架

• 框架特點。當我們把專案的需求和特點弄清楚之後就要開始選擇框架了。但是框架並不是為某一個專案單獨定製的。所以我們要考慮一些框架本身的東西，比如是否滿足需求、效能如何、文件和demo、技術支援、版權問題、社群環境等多方面因素。

測試

我們任何人都不能保證自己寫的程式碼是百分之百沒有問題的。這就需要我們來對對我們的程式碼進行測試了。

• 瀏覽器的相容問題是首要的，但也是很頭疼的。雖然現在IE6基本已經退出了舞臺，但是IE7、8的市場佔有率還是很高的。其表現和標準還是有一定的差距的。一定要多多測試。

• HTML5的相容性。雖然HTML5的標準已經提出一段時間了。雖然各大主流瀏覽器也加快了對新標準支援的腳步，但步調並不一致。所以在開發過程中一定要注意使用HTML5新特性時的瀏覽器相容問題，做好平穩降級。

整合開發環境

工欲善其事必先利其器。高效的開發怎麼能缺少強大的整合開發環境（IDE）呢。推薦一些強大的IDE給你們。

• webstorm 前端開發老大哥級別的IDE 。不解釋！

• vsCode 輕量、高效。雖然沒有webstorm功能那麼強大，不過畢竟人家的免費的，並且外掛也很豐富，能很好的滿足我們的開發需求。

• sublime 在我的印象中，一般都是大佬或者是前後端都擼的人使用的一款編輯器。外掛庫非常多。個人感覺還好。(可能是我沒有完全研究出使用方法)

• Hbuilder 這個編輯器可以很方便的生成一個專案的型別，比如app或者web 等，也是免費的，並且是國產的喲。喜歡的小夥伴可以去研究下。（聽說也是很強大的，暖色調佈局）

  我有用過的就這些，當然還有很多。大家可以去網上看一下，根據個人喜好來選擇吧。

寫在最後

一不小心又到凌晨了1：27 。發現當你真正做一件事的時候，時間往往會過的非常快。個人比較隨性，部落格不定時更新，希望寫的東西能幫助大家在前端路上走的更輕鬆一些。