前端模塊化、工程化

　　先談談前端工程化，web前端愈來愈像「應用程序」，處理的業務繁雜，須要用的html，css，js等文件愈來愈多；所以不得不用工程化的思想去組織管理這些文件；固然關於前端工程化在細節上見仁見智；如下是我的的理解：

　　首先是業務需求文檔的規範化；

　　其次是開發過程當中的管理：版本控制(git/svn)，js模塊化(AMD,CMD,ES6)，MVVM框架(react,vue)等

　　再其次是測試階段：自動化測試js接口函數等(karma,mocha)，數據mooc

　　最後是打包部署：構建工具進行醜化、合併等

 

構建工具grunt && gulp

 　　Grunt 是最早流行起來的前端工程，其核心思想是基於配置的工做流模式，定義一個配置文件，聲明工做流各個環節的相關配置，調用 grunt 就能完成打包編譯；

　　 Gulp 幾乎取締 Grunt ，成爲前端的默認流程工具，其核心思想是基於內存的流的方式，提供高效的性能，極簡的 API，定義不一樣的 task，而後將 task 串聯起來；

　　 Gulp入門教程

 

開發效率

 　　一般的前端開發過程是，修改前端代碼，調用命令編譯代碼，而後瀏覽器 F5 刷新。這個過程能夠作到自動化，經過代碼監控工具，指定要監控的目錄和文件，若是對應文件有改變，調用編譯工具編譯源碼，而後經過 livereload 自動刷新瀏覽器；

 

數據mock

 　　現代化前端項目開發大可能是先後端分離的方式，也就是後端基本是提供 API 服務，在真實開發環境中，一般的問題是，後端 API 極其不穩定或者沒開發，爲了避免阻礙前端的開發，一般的作法是，先後端先約定 API 接口定義，而後前端根據定義 mock 接口。

　　對於大公司來講，可能有 mock 平臺來實現這一功能，但對於小公司小項目來講，可能只能本身實現，咱們能夠利用一些開源的數據 mock 工具來在前端工程中實現；

　　mockjs官網

 

部署需求

 　　一個前端工程一般是多人維護的，因此會用代碼管理工具(默認 git) 來管理源碼，而後將開發流程和部署流程和 git 結合起來。

1. 多人分支協做流程：用 git flow 來管理代碼分支

2. 代碼自動發佈：git hook

 

 

javascript的模塊化歷程 

　　先簡短介紹下js模塊化演進史：

　　　　1.問題困擾：JavaScript語言沒有模塊功能，在業務處理中常常須要模塊化開發，模塊化開發方便管理代碼，能有效組功能；所以開啓了漫長模塊化之路；

　　　　2.使用當即執行函數建立獨立的命名空間；把一個當即執行函數看作一個模塊，函數中的變量、方法是私有的；

　　　　3.nodejs出現，推出commonjs規範了JavaScript在服務器端的模塊化標準；commonjs只能同步加載模塊；

　　　　4.瀏覽器中的js文件須要從服務器端下載，只有異步加載模塊的方式纔不會形成阻塞，顯然commonjs不適合，所以推出AMD規範，requirejs是瀏覽器端異步加載模塊的工具；

　　　　5.至此服務器端、瀏覽器端模塊化規範都已出現；

　　　　6.瀏覽器端因爲AMD規範的requirejs自身問題(加載時須要先規定好依賴順序等)，產生了CMD規範的seajs(能夠按需加載)

　　　　7.ECMA組織推出ES6版本，其中定義了module關鍵字做爲模塊加載工具；

 

　　commonjs && ( AMD && CMD )區別

　　　　AMD寫法：

define(['a.js','b.js','c.js','d.js','e.js'],function(a,b,c,d,e){
    // 缺點：
    // 1.須要事先寫好依賴關係，若是依賴衆多，在樣式上難看
    // 2.定義的時候會預加載依賴，同時執行依賴文件（若是依賴衆多，嚴重影響瀏覽器加載時間，並且有些依賴可能在觸發某些事件後纔會用到）
})

　　　　CMD寫法：

define(function(require,exports,module){
    var a = require('a.js');
    a.hello();

     var b = require('b.js');
     $('').click(function(){ b.hello(); });

     $('').click(function(){
            var c = require.async('c.js');
            c.hello();
      });
     // 1.預先加載require引入的文件，但不執行
     // 2.只有調用依賴中的函數時才執行依賴
     // 3.經過require.async()，能夠作到懶加載，只有觸發事件時纔會加載c.js文件
})

 

 

 

參考：(優質的文檔可以準確，快速地理解掌握知識點；感謝如下文檔)

[1] JavaScript的模塊化歷程

[2] 前端工程化概述