commonjs

来源:https://www.cnblogs.com/jiangyun/p/18141885
-Advertisement-
Play Games

Commonjs 什麼是 CommonJs CommonJs 是 js 模塊化的社區規範 模塊化產生的原因 隨著前端頁面複雜度的提升,依賴的第三方庫的增加,導致的 js 依賴混亂,全局變數的污染,和命名衝突 單個 js 文件內容太多,導致了維護困難,拆分成為多個文件又會發生第一點描述的問題 v8 引 ...


Commonjs

什麼是 CommonJs

  1. CommonJs 是 js 模塊化的社區規範

模塊化產生的原因

  1. 隨著前端頁面複雜度的提升,依賴的第三方庫的增加,導致的 js 依賴混亂,全局變數的污染,和命名衝突
  2. 單個 js 文件內容太多,導致了維護困難,拆分成為多個文件又會發生第一點描述的問題
  3. v8 引擎的出現,讓 js 有了媲美編譯型語言的運行速度,大大激勵了前端開發者

CommonJS 的使用環境

  1. nodejs 實現了 CommonJS 模塊化規範

CommonJs 有哪些規定

  1. 每一個文件就是一個模塊
  2. 模塊中的變數和函數不會污染全局(解決了全局污染和命名衝突)
  3. 提供給外部使用的內容需要導出
  4. 使用其他模塊的內容需要導入 (模塊的導入和導出共同解決了 js 依賴混亂的問題)
  5. 模塊不會重覆載入,模塊第一次導入後會將第一次導入的結果緩存,下次導入時,直接使用緩存的結構
  6. 省略一些細碎的內容在下麵代碼中提及.....

commonJS 語法

  1. 導入
//這是導入一個模塊,module.js;commonjs中規定require導入模塊時可以省略.js尾碼
const module1 = require("./module1");
//如果沒有尋找到dir.js文件,而發現了dir路徑,則尋找dir路徑下package.json 的main屬性指定的文件
//如果package.json未指定路徑,則觸發預設規則 依次查找查找 index.js index.json
const module2 = require("./dir");
//如果require不是相對路徑,則會去node_module中尋找該模塊,重覆module1 和module2 的步驟
//如果沒有node_modules 或node_modules 中不存在模塊則繼續向上級目錄尋找node_modules,直到根目錄
const module3 = require("module3");
  1. 導出
module.exports = {
  //這裡輸入導出的內容
};

//這也是導出
exports.a = "a";

//註意 module.exports導出和exports[屬性名]導出不可共存
//module.exports會覆蓋掉exports導出的內容

簡易實現類 nodejs 模塊化環境

const fs = require("fs");
const Path = require("path");
const vm = require("vm");
const ModuleStack = [];

function isRootDirectory(path) {
  // Windows 根路徑
  const windowsRootDirectory = /^[a-zA-Z]:\\$/;
  // Unix/Linux 根路徑/
  const unixRootDirectory = /^\//;

  return windowsRootDirectory.test(path) || unixRootDirectory.test(path);
}

function isRelativeDirectory(path) {
  //匹配 ../ 或者 ./開頭的路徑
  const relativeDirectory = /^(\.\.\/|\.\/).+/;
  return relativeDirectory.test(path);
}
// 計算node_modules路徑
let computePaths = (dirname) => {
  let paths = [];
  let path = dirname;
  let node_modules = "./node_modules";
  while (
    !isRootDirectory(path) ||
    !paths.includes(Path.resolve(path, node_modules))
  ) {
    paths.push(Path.resolve(path, node_modules));
    path = Path.resolve(path, "../");
  }
  return paths;
};

function myRequire(path) {
  let truelyPath;
  if (isRelativeDirectory(path)) {
    // 獲取真實路徑
    truelyPath = Path.resolve(__dirname, path);
  } else {
    //獲取可能的node_modules路徑
    let paths = computePaths(__dirname);
    for (const item of paths) {
      truelyPath = Path.resolve(item, path);
      if (fs.existsSync(truelyPath)) {
        break;
      }
    }
    if (!truelyPath) {
      throw new Error("Can't find module " + path);
    }
  }
  // 如果緩存中有,直接返回
  if (myRequire.cache[truelyPath]) {
    return myRequire.cache[truelyPath].exports;
  }
  // 讀取文件內容
  const content = fs.readFileSync(path, "utf-8");
  // 包裝代碼
  const wrapper = [
    "(function (exports, require, module, __filename, __dirname) { \n",
    "\n})",
  ];
  // 拼接代碼
  const wrapperContent = wrapper[0] + content + wrapper[1];

  // 獲取文件路徑和文件名
  let dirname = Path.dirname(truelyPath);
  let filename = truelyPath;
  let parentModule =
    ModuleStack.length > 0 ? ModuleStack[ModuleStack.length - 1] : null;
  // 模塊對象
  const Module = {
    id: Object.keys(myRequire.cache).length > 0 ? filename : ".",
    path: dirname,
    exports: {},
    parent: parentModule,
    filename: filename,
    loaded: false,
    children: [],
    paths: computePaths(dirname),
  };
  if (parentModule) {
    parentModule.children.push(Module);
  }
  //模塊入棧
  ModuleStack.push(Module);
  // 需要運行的函數
  const moduleScope = vm.runInThisContext(wrapperContent);
  // 運行代碼
  moduleScope.call(
    Module.exports,
    Module.exports,
    myRequire,
    Module,
    filename,
    dirname
  );
  // 標記模塊已載入
  Module.loaded = true;
  //模塊出棧
  ModuleStack.pop();
  // 緩存模塊
  myRequire.cache[truelyPath] = Module;
  return Module.exports;
}

myRequire.cache = Object.create(null);

模塊化的意義

  1. 解決在模塊化出現之前的js依賴混亂,全局污染命名衝突的問題
  2. 模塊化的出現讓js代碼可以拆分為多個模塊共同協作,單個js文件過長的問題,降低了維護難度。
  3. 模塊化的出現讓js開發大型項目出現了可能

ps:當前內容為學習commonjs理解,內容正確性請謹慎甄別。


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

-Advertisement-
Play Games
更多相關文章
  • 介紹 本示例主要介紹在TaskPool子線程中使用 dlopen 預載入 so 庫並使用句柄調用庫函數的方法,以及在Native中使用 pread 系統函數讀取Rawfile文件的部分文本內容,並添加 HiLog 日誌。 效果圖預覽 使用說明 rawfile路徑下存在一個有內容的文本文件rawfil ...
  • 介紹 MpChart是一個包含各種類型圖表的圖表庫,主要用於業務數據彙總,例如銷售數據走勢圖,股價走勢圖等場景中使用,方便開發者快速實現圖表UI。本示例主要介紹如何使用三方庫MpChart實現柱狀圖UI效果。如堆疊數據類型顯示,Y軸是否顯示,左Y軸位置,右Y軸位置,是否顯示X軸,是否繪製背景色,是否 ...
  • 條件語句用於基於不同的條件來執行不同的動作。 TypeScript 條件語句是通過一條或多條語句的執行結果(True 或 False)來決定執行的代碼塊。 可以通過下圖來簡單瞭解條件語句的執行過程: 條件語句 通常在寫代碼時,您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該 ...
  • 一、Image 在HarmonyOS中,Image組件是用於顯示圖像文件的UI組件。它可以顯示本地圖像文件或遠程URL地址的圖像文件。Image組件的實現方式比較簡單,只需提供圖像文件路徑或URL地址即可。 Image通過調用介面來創建,介面調用形式如下: Image(src: string | ...
  • 介紹 本示例介紹用過使用ListItem組件屬性swipeAction實現列表左滑編輯效果的功能。 該場景多用於待辦事項管理、文件管理、備忘錄的記錄管理等。 效果圖預覽 使用說明: 點擊添加按鈕,選擇需要添加的待辦事項。 長按待辦事項,點擊刪除後,被勾選待辦事項被刪除。 左滑單個待辦事項,點擊刪除按 ...
  • 前言 最近有粉絲找到我,說被面試官給問懵了。 粉絲:面試官上來就問“一個vue文件是如何渲染成瀏覽器上面的真實DOM?”,當時還挺竊喜這題真簡單。就簡單說了一下先是編譯成render函數、然後根據render函數生成虛擬DOM,最後就是根據虛擬DOM生成真實DOM。按照正常套路面試官接著會問vue響 ...
  • 最近,群里聊到了一個很有意思的佈局效果。大致效果如下所示,希望使用 CSS 實現如下所示的佈局效果: 正常而言,我們的 HTML 結構大致是如下所示: <div class="g-container"> <div class="g-nav"> <ul> <li>Tab 1</li> <li>Tab ...
  • 一、前期轉杯 確保電腦上已安裝 node.js。 可通過命令 npm --version進行查詢,如果展示了版本號,則說明已安裝,若提示 npm 不是有內部或外部命令,也不是可運行的程式,則說明未安裝,可進入官網下載併進行安裝。 確保已安裝 Vue CLI。 可通過命令 vue --V 查看版本號, ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...