前端子產品化開發之CommonJS規範和ES6規範

前端子產品化

前言

在項目開發過程中，随着功能的不斷增強，代碼量，檔案數量也急劇增加，需要把一個大函數拆成小函數，把一個大檔案拆成小檔案，把一個大功能拆成若幹個小功能。這裡很自然地就涉及到子產品化的想法：一個複雜的系統分成幾個子系統，展現在幾個小檔案在組成一個大檔案，內建強大的功能。

es5 不支援子產品化：在一個js檔案内，不能引入其他js檔案。不能通過若幹個小檔案去內建一個大檔案。

這樣就會帶來多個問題：

1. 檔案的加載先後順序
2. 不同的檔案内部定義的變量共享
3. 變量命名沖突
4. 檔案依賴複雜度增高
5. 頁面載入過多依賴分不清，不利于維護

子產品化

什麼是子產品化

：

項目中一些程式代碼經常被其他業務場景使用，為了避免重複開發，就把這些代碼設定為共享模式，共享模式就是子產品化。像jquery、axios、vue等等都是子產品化的展現，需要的時候直接拿過來用即可 。

一個js檔案中可以引入其他的js檔案，能使用引入js檔案中的變量、資料，這種特性就稱為子產品化。使用子產品化開發可以很好的解決變量、函數名沖突問題，也能靈活的解決檔案依賴問題。

子產品化技術有哪些

：

CommonJs、ES6、AMD、CMD子產品化介紹

1. es5 不支援子產品化。為了支援子產品化，一般會借用第三方庫來實作：
   • sea.js
   • require.js
2. es6 原生文法支援子產品化。
   • ES6 子產品化 是2015年官方正式出品的，已經被納入到JavaScript标準裡邊，也是js未來的标準。由于各種原因 nodejs和浏覽器中現在還不能直接使用ES6子產品化，要相信未來可以。
3. Nodejs 内部支援CommonJS子產品化。
   • CommonJS子產品化 是2009年釋出的，是民間出品的，相對不正規，可以在nodejs中應用

     // 導出
     module.exports = 對象
     // 或者
     exports = 對象
     
     // 導入
     var obj = require(子產品檔案)
                

4. AMD
   • Asynchronous Module Definition 異步子產品定義
   • 2009年誕生，可以實作浏覽器中應用子產品化技術。
5. CMD
   • Common Module Definition 通用子產品定義
   • 2011年誕生，阿裡公司出品，可以實作浏覽器中應用子產品化技術。

各個子產品化應用場景

：

1. commonjs子產品化可以應用在nodejs中，浏覽器中不可以。
2. es6子產品化暫時還不能在nodejs 和 浏覽器 中使用，要相信未來可以。
3. 浏覽器中可以運作的子產品化名稱為 AMD 和 CMD。

CommonJS 子產品化規範

在node中，一個js檔案就是一個子產品。每一個js檔案中的js代碼都獨立運作在一個函數中，而不是全局作用域，是以一個子產品中的變量和函數在其他子產品内無法被通路，是以要向外部暴露變量和方法。

• 通過 module.exports 或 exports 對外暴露接口
  • node 為了簡化操作，專門提供了一個變量：

    exports

    等于

    module.exports

    ，相當于在子產品中有這麼一句代碼

    var exports = module.exports

• 通過 require (“路徑”)函數導入子產品。
  • 相對路徑必須以

    ./

    或者

    ../

    開頭。
  • 使用require()引入子產品後，會傳回一個對象，這個對象代表的就是這個子產品。

// utils/m1.js
module.exports.sum = function (n) {
  let total = 0
  for(let i = 0; i<=n; i++) {
    total += i
  }
  return total
}

exports.x = 'nihao'
           

// pages/module/module.js
const m1 = require('../../utils/m1.js')

const ret = m1.sum(100)
const x = m1.x
           

ES6 子產品化規範

預設導出和導入

在一個js檔案中，通過一個對象把全部資料導出去，就是預設導出。

// 導出：
export default  {對象}    

// 一個子產品中預設導出隻能進行一次
// 預設必須導出一個對象{}
           

對預設導出的成員進行接收就是預設導入。

// 導入：
import 名稱  from  子產品檔案名字
           

子產品

：

一個js檔案就是一個子產品，前提是該檔案要有做導出export動作。

注意

：

1. es6子產品化現在隻可以在VueCli項目中使用。

示意案例

：

// utils.js檔案對外部導出内容，以便被使用
// 預設導出：通過一個對象把所有的資訊都導出出去
// CommonJS: module.exports = {}

export default {
  name:'kitty',
  age:4,
  walk:function(){
    console.log('走直線')
  }
}
           

main.js導入

// import 名稱 from '子產品js檔案路徑名'
import cat from './modules/utils.js'
console.log(cat)
           

按需導出和導入

一個js子產品中，定義了N多的成員資訊，根據需要，用哪個就導出哪個，這就是按需導出。

哪些成員可以做按需導出導入處理：

常量、對象 、函數 三種資訊可以做子產品化應用 (var、let等變量，用于子產品化沒有意義)

導出文法

：

export const  a = 10		   // 常量
export function ab(){}         // 函數
export const cat = {name:'kitty',age:5} // 對象
           

導入文法

：

// xx,yy,zz代表被導入的成員名稱，要與導出的名稱一緻
// 成員不用全部都導入，根據需要，導入1個或多個或全部都可以
import {xx,yy,zz} from 子產品檔案

// 如果導入進來的成員名稱與目前環境名稱有沖突，根據需要可以使用as設定别名
import {xx as XX,yy as YY,zz as ZZ} from 子產品檔案    
           

案例

：

按需導出：

// CommonJs :  (module.exports.xx = yy)

export const city = 'beijing'

export function getApple(){
  return '國光蘋果'  
}

export const tiger = {color:'yellow and black'}
           

按需導入：

import {city as ct,getApple,tiger} from './modules/export.js'

console.log(ct)
getApple()
console.log(tiger)
           

預設和按需同時導出和導入

實際開發中，在一個子產品中 預設導出 和 按需導出會同時存在

導出文法

：

export const  a = 10        // 按需導出
export function ab(){}      // 按需導出

export default  {對象}       // 預設導出
           

注意

：

1. 一個子產品隻能預設導出一次，按需導出可以設定多次。
2. 預設導出的語句沒有擺放位置要求。

導入文法

：

// 分别導入
import  名稱  from  子產品          // 預設導入
import  {xx,yy}  from  子產品      // 按需導入

// 一并導入必須是 預設在"前"，按需在"後"
import 名稱,{xx,yy} from 子產品