JS 模塊化 - 02 Common JS 模塊化規範

来源:https://www.cnblogs.com/youyacoder/archive/2022/09/22/16720208.html
-Advertisement-
Play Games

Common JS 是模塊化規範之一。每個文件都是一個作用域,文件裡面定義的變數/函數都是私有的,對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。 ...


1 Common JS 介紹

Common JS 是模塊化規範之一。每個文件都是一個作用域,文件裡面定義的變數/函數都是私有的,對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。

1.1 暴露模塊

暴露模塊有兩種方式:module.exportexports ,兩種方式均可以暴露一個函數或對象。兩種方式本質上是一樣的,Common JS 在每個模塊中隱式將 module.exports 指向(賦值)給 exports 語法格式如下:

// 暴露函數
module.exports = function () {}

// 暴露對象
module.exports = {
  xxx: () => {}
}

exports.xxx = {}

exports.xxx = function() {}

1.2 載入模塊

載入模塊使用 require() 函數。格式如下:

const xxx = require('xxxx')

載入模塊是同步操作,按照在代碼中出現的順序進行載入。

可以在代碼中多次使用 require 載入模塊,但只會在首次載入時真正去載入,載入後就會將該模塊緩存。

2 Common JS 規範的 Node 實現

Node.js 實現了 Common JS 規範,所以在 Node 環境下可以直接使用 Common JS 規範,無須引入其他包。

2.1 創建模塊

創建 modules 目錄,在該目錄下創建四個文件:module1.jsmodule2.jsmodule3.jsmodule4.js 分別代表 4 個模塊。

module1.js 使用 module.exports 暴露一個匿名對象:

const msg = 'this is module1'

console.log(msg)

module.exports = {
  testFun: () => {
    console.log('in module1 test function.')
  }
}

module2.js 使用 module.exports 暴露一個函數:

const msg = 'this is module2'

console.log(msg)

const testFun = () => {
  console.log('in module2 test function.')
}

module.exports = testFun

module3.js 使用 exports 暴露一個函數:

const msg = 'this is module3'

console.log(msg)

exports.testFun = () => {
  console.log('in module3 test function.')
}

module4.js 使用 exports 暴露對象:

const msg = 'this is module4'

console.log(msg)

exports.demo = {
  testFun: () => {
    console.log('in module4 test function.')
  }
}

2.2 使用模塊

module 目錄同級創建入口 JS 文件 index.js,在該文件中載入並使用上面 4 個模塊:

console.log('---- 載入模塊 ----')

const demo1 = require('./modules/module1')
const demo2 = require('./modules/module2')
const demo3 = require('./modules/module3')
const demo4 = require('./modules/module4')

console.log('---- 使用模塊 ----')

demo1.testFun()
demo2()
demo3.testFun()
demo4.demo.testFun()

需要註意:使用模塊時,要與暴露模塊對應起來。

2.3 運行程式

在 Node 環境下運行 index.js

在控制臺中輸入如下命令:

node ./index.js

控制台輸出:

image-20220921165714482

3 Common JS 規範的瀏覽器實現

3.1 創建 HTML

module 目錄同級創建入口 HTML 文件:index.html,在該文件中通過 script 標簽引入上面編寫的 index.js 文件:

<script src="./index.js"></script>

在瀏覽器中訪問 index.html ,會發現瀏覽器的 console 中提示如下錯誤:

image-20220921170915055

這是因為瀏覽器不認識 require ,所以需要使用工具將 Common JS 規範的代碼編譯為瀏覽器識別的 JS 語法。這裡咱們使用 browserify

3.2 browserify

browserify 可以支持咱使用 Common JS 模塊化規範來組織瀏覽器端的 Javascript 代碼。

全局安裝 browserify

npm install -g browserify

查看 browserify 版本號:

browserify --version

使用 browserify 編譯 Common JS 規範的代碼:

browserify ./index.js -o ./bundle.js

執行該命令後,會在當前目錄下生成 bundle.js 文件。

index.html 文件中引入 bundle.js

<script src="./bundle.js"></script>

3.3 運行HTML

再次在瀏覽器中訪問 index.html,此時在瀏覽器控制臺中會輸出正確的結果:

image-20220921173826385

4 總結

Common JS 規範的語法:

  • 暴露模塊:module.exportsexports
  • 載入模塊: require()

Common JS 規範的使用:

  • Node:Node JS 支持 Common JS 規範;
  • 瀏覽器:需要使用 browserify 編譯。

感謝你閱讀本文,如果本文給了你一點點幫助或者啟發,還請三連支持一下,點贊、關註、收藏,作者會持續與大家分享更多乾貨


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Hadoop的第一個產品是HDFS,可以說分散式文件存儲是分散式計算的基礎,也可見分散式文件存儲的重要性。如果我們將大數據計算比作烹飪,那麼數據就是食材,而Hadoop分散式文件系統HDFS就是燒菜的那口大鍋。這些年來,各種計算框架、各種演算法、各種應用場景不斷推陳出新,讓人眼花繚亂,但是大數據存儲的 ...
  • 前記 (可跳過這段來自本up的羅里吧嗦。。。) 在做上一個項目的時候,需要用到本地資料庫,以前做公司項目用的是輕量級資料庫Realm,做自己小項目用的是greenDAO,大學學的是SQL server,但是在flutter中,相關插件用的資料庫是SQLite(sqflite插件),但本人還沒接觸過S ...
  • 7月28日,在袋鼠雲2022產品發佈會上,袋鼠雲技術負責人思樞正式宣佈旗下產品「大數據基礎平臺EasyMR」發佈。 EasyMR是袋鼠雲自研的大數據基礎平臺,提供Hadoop、Hive、Spark、Trino、HBase、Kafka等組件,完全相容Apache開源生態;支持企業級安全管控,一鍵開啟L ...
  • 日常開發我們對一條DML語句較為熟悉,很多開發人員都瞭解sql的執行過程,比較熟悉,但是DDL是如何執行的呢,大部分開發人員可能不太關心,也認為沒必要瞭解,都交給DBA吧。 其實不然,瞭解一些能儘量避開一些ddl的坑,那麼下麵帶大家一起瞭解一下DDL執行的方式,。 ...
  • 2022-09-22 (4)set操作 ①添加操作(sadd): 例: sadd student A B ②查看操作(smembers):例: smembers student ③移除操作(srem):例: srem student A (5)zset(有序集合而且裡面的元素是不能重覆的)操作 ①添 ...
  • 最新版Other問題,請查看我最近的一片文章 我主要開發小型應用,周期較短,提審較頻,使用帳號也多,正常申請的三方購買的都有使用。提審時經常會遇到這樣那樣的問題,單獨說other-other,也曾遇到過不下10次,我將會導致出現這個問題的原因分為幾類: 1、帳號問題: 大概半年前的那段時間蘋果對帳號 ...
  • AU上傳ipa出現下圖紅框提示說明成功上傳,如果App Store後臺沒有出現構建版本, 請登錄 apple賬號對應的郵箱查看反饋,特別留意垃圾郵箱,無論成功還是失敗,apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 async await 語法是 ES7出現的,是基於ES6的 promise和generator實現的 generator函數 在之前我專門講個generator的使用與原理實現,大家沒瞭解過的可以先看那個手寫generator核心 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...