寫作背景
我從事軟件開發至今接近18年了,在我進入這個行業之前,只有軟件工程師與硬件工程師之分,并沒有什么前端工程師或者后端工程師之說。前端后端都得懂,否則根本找不到工作。當然,現在對于前端工程師與后端工程師的劃分是由于軟件技術發展實在太快了,兩個方向已經發展成各自獨立的體系,前端開發由于技術的革新、移動端的崛起,其地位顯得越來越重要。
我是從jQuery 1.0開始真正地接受前端工程化開發概念的,也是從那時對 JavaScript產生了一發而不可收的興趣。因為前端工程化能使項目的體系結構更加合理,那些在后端實現起來極為繁雜的交互操作以一種最“輕巧”的方式給取代了。當第一次遇到Angular之時我更是興奮不已,它簡直就是為傳統工程師或者說是后端工程師配備的最強大的前端武器!雖然Angular的入門曲線非常陡峭,很多內容都極為晦澀難懂,但它與jQuery一樣,可以算得上是前端架構發展史上的一座豐碑。
軟件領域中后者永遠具有更大的吸引力,在前端開發領域,React可以說是繼Angular之后又一震撼整個前端開發圈子的重磅炸彈。與Angular相比,它大大降低了學習的成本,同時擁有極高效的運行效能,使之一下子蓋過了Angular的風頭。Angular與React兩套前端框架的崛起也掀起了整個前端開發圈的一股革命,實際上我們都清楚這是Google與Facebook之間對開發者的一種爭奪手段。對于一直從事實戰領域應用的開發者而言,雖然有更多的選擇是好事,但“誰更好用?”,“誰更強大?”這類選擇困難癥也將伴隨而來。
Angular與React各有優劣,很難從綜合性上來評判誰比誰更好,加上Angular2的誕生,使得我們更難以從中選擇最合心意的框架了,可能最熟悉的就自然成為最好的了吧。
2016年我和我的團隊所從事的Web項目由于需要有大量界面交互功能,因此我引入了Angular2 + Flask的搭配方式作為項目的基礎語言架構。然而,我的團隊大多數是由從事多年后端開發和系統開發的工程師所組成,他們對當下前沿的前端技術涉獵并不算深入,我只能不斷地進行內部培訓以快速提升團隊的前端開發實力。Angular2一直處于Beta狀態,而且相關的官方開發文檔一直缺失,開發與測試工具的發展也相對滯后,在實際使用過程中,TypeScript這個將弱類型化的JS強制變成強類型語言的怪胎在不斷地給我們制造麻煩,除了讓團隊接受Angular2對Angular的優化模式,還得不斷地在各種大坑中求生存,這毫無疑問對于我和我的團隊是一種極大的挑戰。當時我非常擔心由于選擇了Angular2而導致項目失敗,中途曾想過用React對之加以取代。但從實際出發,這只是一種換湯不換藥的方案而已,直至我們偶然間遇到了Vue,Vue可以說給予我們項目生的希望!選中了Vue是因為我和我的團隊只是付出了極小的代價,甚至可以說是毫無障礙地將Angular2上開發的代碼切換到Vue上面來,Vue的開發工具鏈雖說沒有Angular.js完備,但有vue-cli的輔助,也基本能應付項目開發的需要,架構理論上幾乎就是對Angular.js的簡化。更吸引我們的是,這是一個由我們中國人開發的前端框架!而且適合我們項目使用的社區資源也非常豐富,性能、工具鏈、學習曲線、極小的運行庫這些優點一下就完全彌補了Angular的不足,也成為了我們項目最后能守住的最堅實的防線。
編撰此書出于一次巧合,我們在升級到Vue2之后我一直想找一本能系統化、全面地講述Vue2開發的書籍作為我團隊的培訓教材,但很可惜一直無法找到。出于一時的心血來潮,突然間想將我們在實踐中應用Vue2的一些技巧和方法記錄下來編撰成書,此時也得到了本書的策劃編輯陳曉猛先生給予我的鼓勵與支持才得以成書。
此書從構思到成書用了接近4個月,實際上花在編撰上的時間估計也只是一個月左右,其他的時間都用在了準備素材與寫代碼上。本書中的素材都取自我參與過的項目,在此過程中我對Vue2的實踐應用也有了很大的提高與深化。期望此書能為正在奮斗于前端開發工作的同行們帶來幫助,同時也作為我對Vue團隊的一種支持。Vue是一款能與世界級的Angular與React比肩的前端框架,更重要的是它是由我們中國人“智造”的!
內容介紹
本書以Vue2的理論為中心,以實戰示例為基礎,通過示例應用展開覆蓋Vue的各個理論知識點。本書從實踐應用出發,對Vue官方未曾進行詳盡說明甚至不曾提及的實用內容進行揭秘,試圖使此書能成為你在Vue前端工程化開發實戰中的參考手冊。本書主要從多個示例由淺入深地講述Vue的使用知識,除此之外,還重點介紹了Vue工程化開發中必備的源碼庫、第三方開發工具以及如何對Vue的各種模塊進行全方位的測試。
第1章 從一個經典的“待辦事項”(TODOs)示例入手,從零開始介紹Vue的入門知識,包括插值、數據綁定、屬性與樣式綁定和組件的基本概念與用法。
第2章 講述如何為Vue建立一個真實的工程化開發的環境,以及工程化環境下第三方工具的基本使用與配置,其中包括:vue-cli、webpack、Karma、Phantom、Mocha、Sinon、Chai和Nightwatch。
第3章 介紹Vue的路由機制和Vue生態系統中最重要的一個成員——vue-router 的基本使用方法。
第4章 通過手機書店示例來介紹組件化理論與Vue組件的設計與實現的具體方法,包括抽象組件的基本方法,如何用Vue對組件進行封裝,如何從界面中提取公共的數據接口,如何在沒有實現服務端的情況下運行Vue程序以及怎樣創建復雜的復合型組件。
第5章 全方位地講述Vue的測試與調試過程中使用到技術與工具,包括Mocha的使用方法,如何為組件編寫單元測試,如何在運行期和單元測試中進行調試,如何進行端對端測試。
第6章 通過一個非常普遍且實用的圖書管理示例講述Vue在實現一個具有復雜操作的界面時所采用的技術知識點,以及Vue組件的高級用法。例如視圖的排序、分頁、查找,多行刪除的設計與實現,通過表單處理圖書數據的添加、編輯和數據驗證,如何用組件化的設計方法封裝Vue組件以實現最大限度的組件重用。
第7章 介紹Vue生態結構中針對規模龐大的前端程序進行狀態管理的利器Vuex,通過實例對Vuex的應用原則和結構組成進行一一剖析,講述如何將各種本來混亂的組件狀態通過Vuex來將其進行分離,每個部分應該如何設計與編碼,如何進行測試,最終使Vue前端工程架構變得更為合理。
致謝
首先,感謝電子工業出版社博文視點公司的陳曉猛編輯,是您鼓勵我將本書付諸成冊,并在我寫作過程中審閱了大量稿件,給予我很多指導和幫助。感謝工作在幕后的電子工業出版社評審團隊對于本書在校對、排版、審核、封面設計、錯誤改進方面所給予的幫助,使本書得以順利出版發行。其次,感謝在我十幾年求學生涯中教育過我的所有老師,是你們將知識和學習方法傳遞給了我。感謝我曾經工作過的公司和單位,感謝和我一起共事過的同事和戰友,你們的優秀一直是我追逐的目標,你們所給予的壓力正是我不斷改進自己的動力。
感謝我的父母和兒子。由于撰寫本書,犧牲了很多陪伴家人的時間。感謝你們對我工作的理解和支持。
2017年2月16日梁睿坤于廣州