commonjs怎麼用,commonjs和requirejs怎麼用

本文目錄一覽：

• 1、用commonjs方式開發前端 怎麼弄
• 2、commonjs 循環引用 怎麼實現
• 3、如何在node.js中使用requirejs
• 4、在node環境下怎麼使用commonjs模塊去使用require方法
• 5、react怎麼使用commonjs
• 6、node.js 基礎操作

用commonjs方式開發前端 怎麼弄

JavaScript是一個強大面向對象語言，它有很多快速高效的解釋器。官方JavaScript標準定義的API是為了構建基於瀏覽器的應用程序。然而，並沒有定於一個用於更廣泛的應用程序的標準庫。

CommonJS API定義很多普通應用程序（主要指非瀏覽器的應用）使用的API，從而填補了這個空白。它的終極目標是提供一個類似Python，Ruby和Java標準庫。這樣的話，開發者可以使用CommonJS API編寫應用程序，然後這些應用可以運行在不同的JavaScript解釋器和不同的主機環境中。在兼容CommonJS的系統中。

commonjs 循環引用 怎麼實現

就在這個周末，npm 超過了 cpan ，成為地球上最大的軟體模塊倉庫。

npm 的模塊都是 JavaScript 語言寫的，但瀏覽器用不了，因為不支持 CommonJS 格式。要想讓瀏覽器用上這些模塊，必須轉換格式。

如何在node.js中使用requirejs

requirejs官方提供了一個可用於node的適配器 r.js 。有兩種方法可以在項目裡面加入此庫。

1. npm

在具體項目目錄下使用如下命令來引入requirejs:

npm install requirejs

windows環境下安裝需要注意不要加上 -g 全局開關，否則不能正常安裝。

安裝完成後，可使用 require(‘requirejs’) 來載入requirejs。

2. 下載r.js

如果不想使用npm，也可以直接下載r.js，並把它放到項目中達到同樣的目的。

點擊下載。

在項目中通過 require(‘/path/to/r.js’) 來載入requirejs。

配置

配置requirejs

var requirejs=require(‘requirejs’);

requirejs.config({

//把node自身的require方法傳遞給requirejs

nodeRequire: require

});

requirejs([“foo”,”bar”],function(foo,bar){});

在需要使用requirejs的地方可以用上面的代碼來配置requirejs。首先載入requirejs模塊，命名為 requirejs （可以為其他命名）。然後對 requirejs 進行配置。配置的方法和參數可以參照瀏覽器版本的requirejs的 配置說明 。不過有一點不同，如代碼所示，我們需要把node的 require 方法引進來。最後一行是簡單地載入模塊的示例，requirejs會嘗試把 foo 和 bar 兩個模塊當成AMD模塊來載入，如果失敗，則會調用node的 requie 方法來把它們當作commonjs模塊載入。為了實現這樣的適應性，所以我們需要配置node的 require方法。但實際測試並不盡如人意，保險起見，還是對AMD模塊使用 requirejs 載入，對commonjs模塊使用 require 載入。

構造AMD格式的node模塊

在node中定義的模塊是commonjs模塊，如果想要構造AMD模塊，我們需要amdefine 這個包。

安裝amdefine

同樣，可以使用npm進行安裝，在項目目錄下執行：

npm install amdefine

在windows下也存在無法全局安裝的問題，需要對項目單獨安裝。

定義define方法

if(typeof define !== ‘function’){

var define=require(‘amdefine’)(module);

}

amdefine提供了包裝AMD模塊的 define 方法。不過上面代碼中對於node中是否包含define方法的檢測判斷請保留，最好原封不動地將這幾行拷貝到自己的項目中。這樣，我們就可以像使用前端requirejs一樣，定義和使用AMD模塊。

在node環境下怎麼使用commonjs模塊去使用require方法

最初的 CommonJS 小組 的參與者們決定弄一份於時下的 JavaScript 編程語言有效，但不必束縛於瀏覽器 JS 環境的限制，的模塊規範。開始的願景是在瀏覽器里使用一些權宜之計， 並希望能藉此影響瀏覽器廠商，促使它們為這種模塊規範的原生支持提供解決方案。權宜之計有：

要麼使用一個服務來轉譯 CJS 模塊成瀏覽器中可用的代碼

要麼使用 XMLHttpRequest（XHR）以文本形式載入模塊，再在瀏覽器中做文本變換、解析的工作

CJS 模塊規範僅允許每文件一個模塊，所以為優化、打包，可使用某種「轉換格式」將多個模塊合併到單個文件。

通過這種方式，CommonJS 小組搞定了依賴引用、如何處理循環依賴，以及如何獲得當前模塊的某些屬性等問題。 但是，他們並沒能接納瀏覽器環境里不可改變、並且仍將影響模塊設計的某些特性：

網路載入

非同步繼承 … 這也同時意味著他們為了實現這個規範，將負擔更多地放到了 Web 開發者身上，而這些權宜之計也使調試變得更麻煩。 調試 eval 的代碼，或者調試多個文件合併之後的單個文件，都有實際使用時的壞處。 這些缺點或許在未來某天會被瀏覽器調試工具解決掉，但結論仍然是：在最普遍的 JS 環境，瀏覽器中，使用 CommonJS 模塊並不是最好的辦法。

react怎麼使用commonjs

Common JS 即 node.js 的模塊組織形式，前端可以用 webpack 或者 browserify 來打包

node.js 基礎操作

require 函數用來在一個模塊中引入另外一個模塊。傳入一個模塊名，返回一個模塊導出對象。用法： let cc = require(“模塊名”) ，其中模塊名可以用絕對路徑也可以用相對路徑,模塊的後綴名.js可以省略。例如：

require()函數用兩個作用：

exports 對象用來導出當前模塊的公共方法或屬性，別的模塊通過 require 函數使用當前模塊時得到的就是當前模塊的 exports 對象。用法： exports.name ,name為導出的對象名。例子：

module.exports 用來導出一個默認對象，沒有指定對象名，常見於修改模塊的原始導出對象。比如原本模塊導出的是一個對象，我們可以通過module.exports修改為導出一個函數。如下：

3.載入第三方包

Node.js中使用 CommonJs 模塊化機制，通過 npm 下載的第三方包，我們在項目中引入第三方包都是： let xx = require(‘第三方包名’) ，究竟 require 方法載入第三方包的原理機制是什麼，今天我們來探討下。

require(‘第三方包名’) 優先在載入該包的模塊的同級目錄 node_modules 中查找第三方包。

找到該第三方包中的 package.json 文件，並且找到裡面的 main 屬性對應的入口模塊，該入口模塊即為載入的第三方模塊。

如果在要載入的第三方包中沒有找到 package.json 文件或者是 package.json 文件中沒有 main 屬性，則默認載入第三方包中的 index.js 文件。

如果在載入第三方模塊的文件的同級目錄沒有找到 node_modules 文件夾，或者以上所有情況都沒有找到，則會向上一級父級目錄下查找 node_modules 文件夾，查找規則如上一致。

如果一直找到該模塊的磁碟根路徑都沒有找到，則會報錯： can not find module xxx 。

4.npm命令

npm 英文全稱： node package manager ，npm 為你和你的團隊打開了連接整個 JavaScript 天才世界的一扇大門。它是世界上最大的軟體註冊表，每星期大約有 30 億次的下載量，包含超過 600000 個 包（package） （即，代碼模塊）。來自各大洲的開源軟體開發者使用 npm 互相分享和借鑒。包的結構使您能夠輕鬆跟蹤依賴項和版本。我們平時開發項目都是需要使用npm下載依賴，常見的npm命令總結如下：

5.文件讀取

var fs = require(‘fs’)

同步：

var content = fs.readFileSync(‘hello.txt’,{flag:’r’,encoding:”utf-8″})

非同步（默認）：

flag：讀取模式

encoding：編碼格式

7.文件寫入

var fs = require(‘fs’)

格式：write=w read=r append =a

非同步：

8.文件刪除

fs . unlink ( ‘lc.txt’ , function (){

9.buffer緩衝區

1、數組不能進行二進位數據的操作2、js數組不像java、python等語言效率高3、buffer內存空間開闢出固定大小的內存

let buf1 = Buffer.alloc(10)

console.log(buf1)

allocUnsafe（之前的一些內容）（效率高）

10.文件目錄

var fs = require(‘fs’)

fs.readdir(path,callback)

導入 readline 包

let readline = require(‘readline’);

實例化介面對象(process對象，stdout/in輸入輸出)

question方法 提問

close 事件監聽

11.文件流

var fs = require(‘fs’)

語法： fs.createWriteStream(文件路徑，【可選的配置操作】)

let ws = fs.createWriteStream(“hello.txt”,{flags:”w”,encoding:”utf-8″});

let ws = fs.createWriteStream(“hello.txt”,{flags:”w”,encoding:”utf-8″});

實踐

fs.createReadStream(路徑，【可選的配置項】)

文檔

let rs = fs.createReadStream(‘hello.txt’,{flags:’r’,encoding:”utf-8″})

音樂

let rs = fs.createReadStream(‘snake.mp4′,{flags:’r’})

讀取時寫入

let ws = fs.createWriteStream(‘a.txt’,{flags:”w”,encoding:”utf-8″})

createReadStream.pipe(createWriteStream)

鏈式是通過連接輸出流到另外一個流並創建多個流操作鏈的機制。鏈式流一般用於管道操作。

接下來我們就是用管道和鏈式來壓縮和解壓文件。

創建 compress.js 文件, 代碼如下：

代碼執行結果如下：

執行完以上操作後，我們可以看到當前目錄下生成了 input.txt 的壓縮文件 input.txt.gz。

接下來，讓我們來解壓該文件，創建 decompress.js 文件，代碼如下：

12.node事件

Node.js 是單進程單線程應用程序，但是因為 V8 引擎提供的非同步執行回調介面，通過這些介面可以處理大量的並發，所以性能非常高。

Node.js 幾乎每一個 API 都是支持回調函數的。

Node.js 基本上所有的事件機制都是用設計模式中觀察者模式實現。

Node.js 單線程類似進入一個while(true)的事件循環，直到沒有事件觀察者退出，每個非同步事件都生成一個事件觀察者，如果有事件發生就調用該回調函數.

沒有使用 events 包 僅使用JavaScript事件監聽進行事件驅動

Node.js 使用事件驅動模型，當web server接收到請求，就把它關閉然後進行處理，然後去服務下一個web請求。

當這個請求完成，它被放回處理隊列，當到達隊列開頭，這個結果被返回給用戶。

這個模型非常高效可擴展性非常強，因為 webserver 一直接受請求而不等待任何讀寫操作。（這也稱之為非阻塞式IO或者事件驅動IO）

在事件驅動模型中，會生成一個主循環來監聽事件，當檢測到事件時觸發回調函數。

Node.js 有多個內置的事件，我們可以通過引入 events 模塊，並通過實例化 EventEmitter 類來綁定和監聽事件，如下實例：

以下程序綁定事件處理程序：

我們可以通過程序觸發事件：

接下來讓我們執行以上代碼：

在 Node 應用程序中，執行非同步操作的函數將回調函數作為最後一個參數， 回調函數接收錯誤對象作為第一個參數。

接下來讓我們來重新看下前面的實例，創建一個 input.txt ,文件內容如下：

創建 main.js 文件，代碼如下：

以上程序中 fs.readFile() 是非同步函數用於讀取文件。如果在讀取文件過程中發生錯誤，錯誤 err 對象就會輸出錯誤信息。

如果沒發生錯誤，readFile 跳過 err 對象的輸出，文件內容就通過回調函數輸出。

執行以上代碼，執行結果如下：

接下來我們刪除 input.txt 文件，執行結果如下所示：

因為文件 input.txt 不存在，所以輸出了錯誤信息。

Node.js 所有的非同步 I/O 操作在完成時都會發送一個事件到事件隊列。

Node.js 裡面的許多對象都會分發事件：一個 net.Server 對象會在每次有新連接時觸發一個事件， 一個 fs.readStream 對象會在文件被打開的時候觸發一個事件。所有這些產生事件的對象都是 events.EventEmitter 的實例。

events 模塊只提供了一個對象：events.EventEmitter。EventEmitter 的核心就是事件觸發與事件監聽器功能的封裝。

你可以通過require(“events”);來訪問該模塊。

EventEmitter 對象如果在實例化時發生錯誤，會觸發 error 事件。當添加新的監聽器時，newListener 事件會觸發，當監聽器被移除時，removeListener 事件被觸發。

下面我們用一個簡單的例子說明 EventEmitter 的用法：

執行結果如下：

運行這段代碼，1 秒後控制台輸出了 ‘some_event 事件觸發’ 。其原理是 event 對象註冊了事件 some_event 的一個監聽器，然後我們通過 setTimeout 在 1000 毫秒以後向 event 對象發送事件 some_event，此時會調用some_event 的監聽器。

EventEmitter 的每個事件由一個事件名和若干個參數組成，事件名是一個字元串，通常表達一定的語義。對於每個事件，EventEmitter 支持 若干個事件監聽器。

當事件觸發時，註冊到這個事件的事件監聽器被依次調用，事件參數作為回調函數參數傳遞。

讓我們以下面的例子解釋這個過程：

執行以上代碼，運行的結果如下：

以上例子中，emitter 為事件 someEvent 註冊了兩個事件監聽器，然後觸發了 someEvent 事件。

運行結果中可以看到兩個事件監聽器回調函數被先後調用。這就是EventEmitter最簡單的用法。

EventEmitter 提供了多個屬性，如 on 和 emit 。 on 函數用於綁定事件函數， emit 屬性用於觸發一個事件。接下來我們來具體看下 EventEmitter 的屬性介紹。