模塊化的學習和理解

draveness 發布于2019-08-26 13:49 / 2255人閱讀

摘要：看到阮一峰大佬的內容里有這么一段目前還是不很理解為什么或者就可以建立一一對應的關系。和的區別之前一直沒有考慮過他們之前的區別，今天又仔細研讀了一下阮一峰的關于模塊的講解，覺得說的很好。

最近在看vue源碼，然后看到了rollup，然后又看到了模塊化的概念，所以對模塊化的概念進行一個學習和總結。以下就是我的學習成果，如果有什么不對的歡迎指教。

模塊化概念

模塊化存在的意義：開發者希望在開發過程中只需要關注自己的核心業務邏輯，其他的可以直接加載別人寫好的模塊。但是Javascript不是一種模塊化編程語言，在es6以前，它是不支持”類”（class），所以也就沒有”模塊”（module）了（借鑒而來）

nodejs一個應用于服務器端編程被提出時，Javascript模塊化也因此誕生，CommonJS模塊規范被提出。在es6模塊之前，CommonJS統一了模塊化編程。

下面我要簡述一下CommonJS、AMDCMD和ES6 Module

同步加載 CommonJS

在CommonJS中有一個全局的方法require()，可以用于加載模塊。但是這個方法在瀏覽器端具有一定的局限性，因為JavaScript是解釋性語言，從上而下直接執行。此時的困惑是

后來我得到的答案：

最后我的筆記：
CommonJS是一種同步加載的方式，在服務器端模塊是存在本地的，這樣讀取時間很快，需要等待時間很短，可以是同步加載，但是在瀏覽器端，依賴的模塊是存放在服務器端的，讀取的時間依賴網速，如果網速不好的話，需要等待很久。javascript就會報錯了，所以在瀏覽器端需要異步加載的方式

module.exports和exports 模塊導出

let num = 0
function add (a, b) {
  return a + b
}
module.exports = {
  num: num,
  add: add
}

exports 和 module.exports的區別:Node為每一個模塊都提供了一個exports變量，指向module.exports。

以上的寫法module.export嘗試寫成：

// 結果報錯
let num = 0
function add (a, b) {
  return a + b
}
exports = {
  num: num,
  add: add
}

第二種寫法：

// 結果成功
let num = 0
function add (a, b) {
  return a + b
}
exports.num = num
exports.add = add

node中，exports指向module.exports。如果直接將一個對象賦值給exports，那么exports原先指向module.exports會被破壞，這樣這兩種之間就沒有聯系了，就會報錯。如果非要想用exports的話，可以直接給exports添加屬性。

require 模塊導入

let math = require("./math")

異步加載

AMD/RequireJS 異步加載依賴前置、提前執行

CMD/sea.js 異步加載依賴就近、延遲加載

ES6 Module import 導入 常見用法：

// 全部加載
import * as util from "xxx"
import AA from "yyy"
// 按需加載
import { A, B } from "xxx"

import * as aa from "xxx"的語法，會將xxx文件內export的函數整合成一個對象。
import AA from "yyy"，引入的是export default的函數

import 在編輯時就執行的，所以：

foo()
import { foo } from "xxx"

不會報錯，因為import { foo } from "xxx"在編輯時就執行了，foo()是在運行時才執行。

import()

import命令是在編輯時就會執行的，所以無法做到放到if代碼中或者函數中，

if (a) {
    import { foo } from "xxx"
}
// 會報句法錯誤

import export只能在模塊的頂層，不可以在代碼塊中，這樣就無法實現運行時動態加載模塊（條件加載）。 => import()的出現
使用import()可以類似node里的require()，可以動態加載且import()是異步加載。import()加載模塊成功以后，這個模塊會作為一個對象當then方法的參數。

import("xxx").then(module => {
    ...
})

export 暴露模塊

export 規定的時對外的接口，必須模塊內部的變量建立一一對應關系。看到阮一峰大佬的內容里有這么一段：

目前還是不很理解：為什么export var m = 1 或者export function aa (){}就可以建立一一對應的關系。

CommonJS和ES6 Module的區別

之前一直沒有考慮過他們之前的區別，今天又仔細研讀了一下阮一峰的es6關于模塊的講解，覺得說的很好。
ES6的設計思想是盡量的靜態化，在編譯時就可以確定模塊之間的依賴關系，以及輸出和輸入的變量
CommonJS、AMD、CMD只能在運行時才可以確定模塊之間的加載關系。

// CommonJS
let { stat, exists, readFile } = require("fs");
// ES6
import { stat, exists, readFile } from "fs";

第一個和第二的區別：
CommonJS是將fs模塊整體加載出來生成一個對象，然后在這個對象讀取里找stat, exists, readFile方法，這種就是運行時加載
ES6模塊會只在fs中加載stat, exists, readFile這三個方法，不會加載其他方法，這種就是編輯時加載

GPU云服務器云服務器深度學習的理解云計算和大數據的理解深度學習理解如何理解深度學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109618.html

我是如何學習游戲引擎的？

摘要：下面列舉了游戲開發中常見的崗位以及兩條常見的協作開發的流水線其實學習游戲引擎，前期對于任何崗位來說路線都是相似的，基本上就是一個熟悉基本操作理解基本概念拓展專業知識的過程。當然這不是絕對的，任何引擎的開始階段和大成階段都是相似的。這是【游戲開發那些事】第51篇原創前言：游戲引擎，表面...

未東興 2021-09-30 09:48 評論0 收藏0
[ 學習路線 ] 學完這些去阿里！GOGOGO

摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

zhaochunqi 2019-08-28 18:06 評論0 收藏0
[ 學習路線 ] 學完這些去阿里！GOGOGO

摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

learn_shifeng 2019-08-21 10:27 評論0 收藏0
從圖像到知識：深度神經網絡實現圖像理解的原理解析

摘要：本文將詳細解析深度神經網絡識別圖形圖像的基本原理。卷積神經網絡與圖像理解卷積神經網絡通常被用來張量形式的輸入，例如一張彩色圖象對應三個二維矩陣，分別表示在三個顏色通道的像素強度。本文將詳細解析深度神經網絡識別圖形圖像的基本原理。針對卷積神經網絡，本文將詳細探討網絡中每一層在圖像識別中的原理和作用，例如卷積層(convolutional layer)，采樣層(pooling layer)，...

UnixAgain 2019-04-25 18:03 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0