前端模塊化的那些事兒

一、什么是模塊？

定義：具有相同屬性和行為的事物的集合

在前端中：將一些屬性比較類似和行為比較類似的內容放在同一個js文件里面，把這個js文件稱為模塊

目的：為了每個js文件只關注與自身有關的事情，讓每個js文件各行其職

二、什么是模塊化？CommonJS是什么？AMD和CMD又是什么？

①模塊化：指的就是遵守commonjs規范，解決不同js模塊之間相互調用問題

②CommonJS：

1. A.js文件中調用另一個B.js文件，一定要在A.js中引入B.js
   require("B.js");
2. 另一個被調用的js，也就是B.js一定要對外提供接口。
   module.exports=B;
   過程如下：
   B.js

   var b = "Hello,I'm module B.";
   module.exports = b;//暴露一個接口，與b對接。這個接口既可以是函數，也可以是對象，甚至是數組。

   A.js

   var _b = require("./B.js");//實際過程中應當是B.js相對于A.js的路徑，這比使用絕對路徑去獲取要規范得多
   //此時_b獲得了B.js的接口，這個接口指向B.js中的變量b
   console.log( _b );//"Hello,I'm module B.";

   這就實現了一個簡單的模塊化工作方式，即：
   模塊間相互調用，協同工作，實現某特定功能。

④AMD規范：Async Module Define 異步模塊聲明

⑤CMD規范：Common Module Define 公共模塊聲明

⑥模塊化的核心價值：模塊化最核心的價值在于解決不同文件之間的分工和調用問題，即依賴關系。

三、模塊化的一些工具

• gulp + browerify

  • 構建步驟：
    1. 安裝gulp
       npm install gulp --save-dev //要安裝全局還是本地依賴根據實際情況來
    2. 安裝browserify --save--dev
       npm install browserify --save--dev
    3. 安裝文件輸出流工具
       npm install vinyl-source-stream --save-dev
    4. 在gulpfile里編寫任務實現模塊化
       gulpfile.js

       //基本模塊引入
       var gulp = require('gulp');
       var brow = require('browerify');
       var source = require('vinyl-source-stream');
       //任務編寫
       gulp.task('bundle', function() {
       //將任務交付給browserify
       //brow讀取入口文件后，能自動查找相互之間有依賴的關系的模塊
       return brow('./entry.js')
       .bundle()//輸出一個文件流變量（gulp的工作機制）
       .pipe(source('bundle.js'))//將文件流變量輸出為文件
       .pipe(gulp.dest('js'));//將文件最終輸出
       }

  </li>

• webpack

  參考 webpack的配置及使用

• requireJS
  • 模塊聲明規范：AMD
  • 聲明模塊
    • 參數1：id 是這個模塊的名稱，它是一個可選參數，默認為require加載此模塊時指定的名稱，若定義這個參數，那么這個模塊名應當為“頂級”的，不允許相對名稱。
    • 參數2：數組，為這個模塊所依賴的其他模塊
    • 匿名函數參數：為依賴模塊在這個模塊中的接口，它們是一一對應的，因此即便不需要某個模塊的接口，但若是需要它后面模塊的接口，那也必須給它增加一個用于占位的參數。

      define( 'id', [ 'module1', 'module2' ], function( m1, m2 ) {
      return {
      arg1: m1,
      arg2: m2
      }
      //返回值即是module3的接口
      });

    </ul> </li>
    • 使用步驟
      1. 下載requireJS
         bower install requirejs//根據個人習慣選擇下載方式，只要保證后續引入的路徑正確
      2. 配置config文件和main.js
         config.js

         require.config( {
         base: '',//引入模塊的起始路徑
         //paths對象為要引入的模塊的名稱及路徑，且不需.js后綴，require默認會為文件添加.js后綴
         paths: {
         'jquery': './jquery-1.11.0'//這就引入了juery作為一個模塊。 PS：jquery自己已經實現了AMD，并且'jquery'是一個頂級模塊名。
         }
         } );

         main.js

         require(['jquery'], function( $ ) {
         $(document).css("background", "#000");//這就實現了引入使用jquery模塊，并用它進行dom操作
         });

      3. 在頁面中引入

         <script data-main="./main.js" src="./bower-components/requirejs/dist/require.js></script>
         //main即是主邏輯入口文件

      </ol> </li> </ul> </li>
      4. SeaJS
         • 模塊聲明規范：CMD
         • 聲明模塊

           define( function( require, exports, module ) {
           var c = require('./Controller.js');
           c();
           })

         • 使用步驟
           1. 下載seajs
              bower install seajs//這里根據個人習慣下載seajs的包，只要引入時路徑正確就行
           2. 配置seajs.config

              seajs.config({
              base: './', //模塊起始路徑
              })
              seajs.use('./main');//使用主邏輯入口文件，相當于requirejs中的data-main文件

           </ol> </li> </ul> </li> </ul>

           **requireJS和SeaJS都是在前端實現模塊化，相當于一個前端的js模塊化加載器，和webpack不一樣，webpack是通過nodejs將文件打包的。

           四、模塊化案例

           前端mvc架構

           • Vue 組件化&模塊化
           • React 組件化&模塊化
           • node.js 每個文件都是模塊

           什么是MVC

           • 后端開發的一種概念

             即view( html + js + css + img ) + controller( 控制層 ) + model( 數據模型 )
             • 前端演變了一套MVC體系：
               • veiw ( html + css + js )
                 寫靜態頁面 css、js、img及效果
               • controller ( 專注于實現服務和邏輯控制的層面叫做控制器 )
                 監聽頁面中請求和事件，處理請求和事件；向model請求數據，得到數據后綁定到頁面
               • model ( 數據變量 || ajax從服務端取回的數據 )
                 對外提供一些數據
               </li> </ul> </li> </ul>

               體現了一種分層的概念，讓每個層面只做自己該做的行為，減少代碼耦合和冗余

               為什么使用MVC？

               • 低耦合：
                 MVC將業務分為三層，減少了數據與業務的耦合性，增強了各層次功能的獨立性，使得在需求改變時可能只需要改變其中一層就能完成服務；
               • 復用性高：
                 三層業務功能分明，耦合度低，使各模塊可以獨立完成自身功能，降低了依賴性，具有很高的復用性。
               • 利于批量生產和擴展：
                 復用性高使得在批量生產的時候可以根據需求進行模塊的重用，加快了生產效率。并且模塊化使得擴展也非常方便，模塊只需根據規范進行編寫，經審核后引入便可以實現擴展。
               • 利于協作開發：
                 擴展性強使協作開發也變得非常方便，每個人根據自己的分工設計自己的模塊，不與他人沖突，引入時也各行其職。
               • 推廣普及度高：
                 由于對協作開發的友好，使得MVC模式大受開發者的歡迎，使用這個模式的產品的推廣和普及變得容易得多。

                

               來自：http://www.jianshu.com/p/9171c5496c8e