構建web應用前端方面的一點點心得

首先作個自我介紹：饅頭。作了大概有3年前端了。 如今一家公司擔任前端負責人。平時喜歡研究一些技術，搞點設計什麼的~

去年。利用業餘時間作了一個HTML5的在線編輯器，就以這個編輯器爲例子，談談對前端構建web應用的一點心得吧~

編輯器大體是這樣的：經過一些拖拽，點擊，完成一個HTML5手機頁面的製做。

這裏談談我大體的製做流程：

一、技術的選型。

相似這種web應用，技術的選型至關重要，關係到後面開發的時間，以及開發的難度。由於技術選型沒選好而夭折的項目太多了。因此必定要慎重。這裏考慮到項目的實際性質。我選擇了jquery，而後就是HTML5，由於作了先後端的分離，至於後臺用什麼技術，我就很少談了。以前有考慮angluarjs的，可是考慮到這個編輯器與服務器不是頻繁的交互，用了等於累贅，還得處理其餘隱藏的問題，因而就放棄了，由於JS代碼會比較多，使用模塊化工具是必須的，因此我選擇了seajs。

二、前端開發環境搭建。

選擇好了技術，那麼開發一個自動化的環境是必不可少的，這裏選擇了grunt，由於css不是太多，並且就一個頁面。這裏就沒用sass/less這類了。自動化主要處理一些JS模塊化的合併等等。

三、面向對象的編程思惟構建框架。

一切就緒，該寫代碼了？別急，這是不少程序員的通病 —— 急着寫代碼~ 我們還沒構建項目框架呢，仔細想一想，這個項目裏面能提取的類有哪些？玩過PS的人都知道，其實這個東西和PS有不少共同點，因此我借鑑了PS的一些東西。

類：頁面，單頁面，圖層

屬性：動畫，功能，參數。

關係：頁面包含單頁面，單頁面由多個圖層組成，動畫是圖層的屬性，功能是全部類的屬性，參數是圖層的屬性。

好了，大的關係理清了。小的關係我這裏就很少理了（我很懶）~ 

那就開始寫代碼。新建3個類，一層一層的繼承成下去。由於功能比較特殊，全部類都涉及到功能。這裏要對功能進行分類。

最好寫一個單獨JS來存放配置信息，這樣，咱們在修改參數的時候就不用處處去找。

固然，咱們能夠把一些經常使用的方法封裝成插件，好比：（拖拽方法，滑塊插件，拖動排序，彈窗插件，圖片上傳插件，自定義下拉選擇框等）切記：能封裝成插件的都封裝成插件，這樣在寫代碼的時候，咱們能夠專一在業務邏輯上，不由於那些非邏輯代碼擾亂咱們的思惟~

四、寫代碼：從總體到局部。

寫代碼也是頗有講究的，咱們先把框架的東西寫好，而後把代碼模塊化，細節的東西能夠先不寫，可是命名必定要作好，可是我通常會寫個console.log，若是你有下屬，那麼恭喜你，碼磚的活兒就能夠交給他們了~ 總體就算完成了。

而後就是碼磚，碼磚，碼磚~ 重要的事情說三遍 ~

沒有數據的話，能夠本身造個~ 試着跑跑~ 沒問題後，就和後臺對接數據。先後端分離。這樣效率也會高不少。我和朋友兩我的，他作後臺，我作前端+設計，利用工做的業餘時間，用1個月時間完成了這套系統~ 

五、發佈上線。

最後發佈以前，記得合併JS喲，我一我的寫，因此模塊分的不是太細，大大小小也有30多個JS文件。若是直接用，要向服務器發送30多個請求，考慮到效率問題，用grunt對js進行了模塊化合並，而後壓縮瞬間小了不少。終於完成了，能夠坐下來喝杯咖啡，欣賞本身的做品，一種成就感莫名涌上心頭~

 

（附帶線上的網址：h5ds.com）