成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

模塊化的學(xué)習(xí)和理解

draveness / 2267人閱讀

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

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

模塊化概念

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

nodejs一個應(yīng)用于服務(wù)器端編程被提出時，Javascript模塊化也因此誕生，CommonJS模塊規(guī)范被提出。在es6模塊之前，CommonJS統(tǒng)一了模塊化編程。

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

同步加載 CommonJS

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

后來我得到的答案：

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

module.exports和exports 模塊導(dǎo)出 
let num = 0
function add (a, b) {
  return a + b
}
module.exports = {
  num: num,
  add: add
}

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

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

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

第二種寫法：

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

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

require 模塊導(dǎo)入 
let math = require("./math")
異步加載

AMD/RequireJS 異步加載 依賴前置、提前執(zhí)行

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

ES6 Module import 導(dǎo)入 常見用法： 
// 全部加載
import * as util from "xxx"
import AA from "yyy"
// 按需加載
import { A, B } from "xxx"

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

import 在編輯時就執(zhí)行的，所以：

foo()
import { foo } from "xxx"

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

import()

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

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

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

import("xxx").then(module => {
    ...
})
export 暴露模塊

export 規(guī)定的時對外的接口，必須模塊內(nèi)部的變量建立一一對應(yīng)關(guān)系。看到阮一峰大佬的內(nèi)容里有這么一段：

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

CommonJS和ES6 Module的區(qū)別

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109618.html

相關(guān)文章

  • 我是如何學(xué)習(xí)游戲引擎的？

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

    未東興 評論0 收藏0

  • [ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO

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

    zhaochunqi 評論0 收藏0

  • [ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO

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

    learn_shifeng 評論0 收藏0

  • 從圖像到知識：深度神經(jīng)網(wǎng)絡(luò)實現(xiàn)圖像理解的原理解析

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

    UnixAgain 評論0 收藏0

  • 深入理解js

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

    caikeal 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<