前端模塊化的那些事兒

1、什麼是模塊？

定義：具備相同屬性和行爲的事物的集合
在前端中：將一些屬性比較相似和行爲比較相似的內容放在同一個js文件裏面，把這個js文件稱爲模塊
目的：爲了每一個js文件只關注與自身有關的事情，讓每一個js文件各行其職

2、什麼是模塊化？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 公共模塊聲明

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

3、模塊化的一些工具

• gulp + browerify

  • 構建步驟：

  • 1. 安裝gulp

       ``npm install gulp --save-dev //要安裝全局仍是本地依賴根據實際狀況來``

    2. 安裝browserify --save--dev
       npm install browserify --save--dev

  1. 安裝文件輸出流工具
     npm install vinyl-source-stream --save-dev

  2. 在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'));//將文件最終輸出
}

• webpack
  參考webpack的配置及使用

• requireJS

  • 模塊聲明規範：AMD

  • 聲明模塊

    • 參數1：id 是這個模塊的名稱，它是一個可選參數，默認爲require加載此模塊時指定的名稱，若定義這個參數，那麼這個模塊名應當爲「頂級」的，不容許相對名稱。

    • 參數2：數組，爲這個模塊所依賴的其餘模塊

    • 匿名函數參數：爲依賴模塊在這個模塊中的接口，它們是一一對應的，所以即使不須要某個模塊的接口，但如果須要它後面模塊的接口，那也必須給它增長一個用於佔位的參數。

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

• 使用步驟

  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操做
});

1. 在頁面中引入

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

• 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文件

requireJS和SeaJS都是在前端實現模塊化，至關於一個前端的js模塊化加載器，和webpack不同，webpack是經過nodejs將文件打包的。

4、模塊化案例

前端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從服務端取回的數據 )
      對外提供一些數據

體現了一種分層的概念，讓每一個層面只作本身該作的行爲，減小代碼耦合和冗餘

爲何使用MVC？

• 低耦合：
  MVC將業務分爲三層，減小了數據與業務的耦合性，加強了各層次功能的獨立性，使得在需求改變時可能只須要改變其中一層就能完成服務；

• 複用性高：
  三層業務功能分明，耦合度低，使各模塊能夠獨立完成自身功能，下降了依賴性，具備很高的複用性。

• 利於批量生產和擴展：
  複用性高使得在批量生產的時候能夠根據需求進行模塊的重用，加快了生產效率。而且模塊化使得擴展也很是方便，模塊只需根據規範進行編寫，經審覈後引入即可以實現擴展。

• 利於協做開發：
  擴展性強使協做開發也變得很是方便，每一個人根據本身的分工設計本身的模塊，不與他人衝突，引入時也各行其職。

• 推廣普及度高：因爲對協做開發的友好，使得MVC模式大受開發者的歡迎，使用這個模式的產品的推廣和普及變得容易得多。