頁面仔初窺"前端工程化"

時間 2019-11-11

標籤頁面前端工程简体版

原文原文鏈接

今天看了幾篇前端界的一位大牛--張雲龍的文章，其中一篇在本身的理解範圍內看得懂一些，有所收穫，說的是前端工程化的事，看完算是對前端工程造成了一個模糊的概念。javascript

如今我所接觸到的前端開發，仍是張雲龍大神所說的「茹毛飲血」的前端時代，可是關於前端工程的概念，在我瞭解前端的過程當中卻不絕於耳。如今我所作的項目，應該還算不上覆雜的工程，技術選型方面，可能還停留在選哪一個UI框架上。目前所使用的最高級的工具，也只是avalon，甚至連avalon的組件化都使用甚少，只是作了一個通用的下拉選擇組件。但這與文章中言明的前端工程還相差甚遠，接下來我說下本身看完文章後，對前端發展爲一個工程的理解。css

從jQuery加Bootstrap提及

jQuery加Bootstrap，須要哪裏搭哪裏，複用極低，資源的依賴關係基本靠開發人員腦力記憶，這是最初級的前端開發方案，也是我如今比較熟練的方案。JS的複用，是一個public.js文件，裏面是我寫的一個_public模塊，模塊在匿名函數空間內運行，向外暴露出一個_public對象做爲接口，避免污染全局的運行空間，裏面是一些本身寫的好用的函數和一些兼容低版本瀏覽器的polyfill。CSS的複用是一個public.css文件，裏面根據不一樣的做用對象，定義了不一樣class，用於各個頁面去複用這些樣式。另外引入的各類插件的依賴關係和引入順序，主要由人工記憶。這種方式下，我本身能夠明顯感受到的缺點是：1.複用性過低，能複用的除了一些功能函數和簡單的樣式，沒有可複用的組件，好比一個日期選擇的組件都沒有，因而每次須要一個功能，就要手寫一個功能，最多從別處粘貼一下代碼完成"複用"……2.資源的引入很複雜，不能一個import搞定一個資源，引用路徑和依賴關係每次都很麻煩。好比引用一個jQuery的插件，必定要先引入JQuery，再引入插件，且有些插件會要引入多個文件，加上寫這些插件的路徑，事情就變得一點也不"智能"了。html

avalon-我本身邁出的第一步

由於React,Angular,Vue的流行，我也接觸到了這些看起來更高級一些的框架，因爲Vue的文檔被你們所推崇，而且仍是國人尤雨溪大神的做品，因此我選擇從Vue開始學起，第一次看文檔是比較痛苦的，文檔中說到的不少概念都沒有，反反覆覆看了一遍又一遍，結合一些實例，總算理解了組件，父子組件的通訊，組件的生命週期，路由，狀態管理這些是什麼，這個過程是有點痛苦的，由於從沒接觸過webpack, npm這些，爲了能知道本身粘貼的命令行是在幹什麼，本身粘貼的這個webpack.config.js是在幹什麼，經歷了一個這樣的過程：前端

Vue裏的這些都是個啥？-->無論了，弄個例子下來看看-->github上弄下來，發現不知道怎麼運行起來-->原來須要用webpack啊-->原來還要npm install各類依賴包啊。這些東西一次性忽然蹦出來的時候，其實我是凌亂的，以前連Node是什麼都不知道啊……在這期間，發現了一篇好文章，照着作了一遍之後，頗有收穫，也理解了這些是在幹什麼了。推薦若是一樣不懂這些的前端同窗也能夠看一看。java

Vue懂了是什麼，該怎麼用，怎麼學之後，我就躍躍欲試打算用在公司的項目中了。但是後來得知了一個噩耗，由於咱們服務的客戶主要仍是原始人類（僅本人觀點，與公司無關，客戶你要懟就懟我吧），用的機器和系統所限，咱們必需要兼容IE8，我瞭解到的Vue應該是基於getter, setter的，這些特性IE9才支持，換句話說，使用Vue是不可能了。不過我依然賊心不死，想找找有沒有兼容IE8的MVVM框架，這一找還真找到了，是司徒正美大神寫的avalon，看了下大神處理issue的速度，驚爲天人，因而就決定使用avalon了。說實話，avalon的文檔的確對新手很不友好……多是由於版本更新飛快吧……不過大神寫的教程可比文檔要好，由於還帶着版本更新日誌，看完之後總算能開始作事了。其實這也是我第一次瞭解到設計模式，用了avalon之後，好比想寫一個面板切換，是這樣的：jquery

main.html:webpack

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>test</title>
  <script type="text/javascript" src="avalon.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <div ms-controller="app" class="ms-controller">
    <button type="button" ms-click="@panel = 'panel1'">面板1</button>
    <button type="button" ms-click="@panel = 'panel2'">面板2</button>
    <button type="button" ms-click="@panel = 'panel3'">面板3</button>
    <div ms-visible="@panel === 'panel1'"></div>
    <div ms-visible="@panel === 'panel2'"></div>
    <div ms-visible="@panel === 'panel3'"></div>
  </div>
</body>
</html>

main.js:git

var appVm = avalon.define({
  $id: 'app',
  panel: 'panel1'
})

ms-click是綁定click事件，ms-visible將根據它的表達式的值，控制它所在的元素的顯示隱藏，這樣就很容易看懂了。這麼作有一個好處，咱們能夠將注意力更多地關注在虛擬模型"appVm"上，控制它的內容的值就能夠了，avalon將自動爲咱們完成從虛擬視圖到視圖的渲染。avalon還有一個組件的模塊，能夠生成自定義的組件，不過這個組件沒有那麼多指令能夠用，也沒有那麼靈活，可是有生命週期，因此仍是能夠提升一些代碼的複用性的。我也是剛學習MVVM框架，我相信用先進的設計模式，可以作的事情確定不止這點，用得好將會很是厲害！github

回到前端工程化 - 壓縮和資源合併

如下的內容都是我還不瞭解，正在或者將要學習的，更可能是記錄和摘要。
當技術選型完成之後，除了開發，代碼的運行效率也成了前端須要關注的點，因而就引出了代碼的壓縮，校驗，和資源合併的問題。我所理解的代碼壓縮可讓文件變得更小，用於開發的日誌功能和debug功能都會被壓縮掉，這樣才能夠剛纔地用於生產環境。代碼校驗其實我是不懂的，在未來接觸到以前，我暫時把它理解成每一個資源都有本身的版本，對應有簽名標識和完整性問題，因而就須要對資源進行校驗才能更好地構建和進行資源的整合。資源合併之後，最起碼的，發送的請求的次數就減小了。作完這一步，代碼的運行效率就提高了。這件事人力完成壓縮在合併顯然是不可能的，這樣改一次源碼就要手動更新一次用於生產環境的壓縮後的代碼，還要整合在一塊兒，因此這些必須藉助工具自動完成，這樣前端工程自動化的道路纔開始了。web

模塊化開發

這是一個我以爲頗有意思的部分，模塊化開發，像大神所說的，模塊化開發的最大價值應該是分治。那麼一個大的系統被拆成了一個個小系統，再被拆成一個個組件，這樣不管是對於不一樣人員進行並行開發，維護，仍是複用性，都是有大好處的。須要哪一個JS模塊或者CSS模塊就直接引入，想一想都以爲會減小不少重複性工做的時間。

組件化開發和資源管理

以上兩點已經超出了目前個人能力範圍了，以前的我還能想想也許怎樣就能實現，但這裏的內容我暫時是想不到怎麼實現的，因此只得先在此留坑，等我走到這一步的時候再回來填坑啦！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。