Node.js中怎么引用JavaScript

Node.js中怎么引用JavaScript，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

成都創(chuàng)新互聯(lián)公司致力于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì),成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇成都創(chuàng)新互聯(lián)公司，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

a.js

var express = require('express');
var b = require('./b.js'); 
var app = express();
app.get('/', function (req, res) {
 b = require('./b.js');
 res.send(b.num);
 });
app.listen(3000);

b.js

exports.num = 1024;

兩個(gè) JS 文件寫好之后，從 a.js 啟動(dòng)，刷新頁(yè)面會(huì)輸出 b.js 中的 1024，然后修改 b.js 文件中導(dǎo)出的值，例如修改為 2048。再次刷新頁(yè)面依舊是原本的 1024。

再次執(zhí)行一次 require 并沒(méi)有刷新代碼。require 在執(zhí)行的過(guò)程中加載完代碼之后會(huì)把模塊導(dǎo)出的數(shù)據(jù)放在 require.cache 中。require.cache 是一個(gè) { } 對(duì)象，以模塊的絕對(duì)路徑為 key，該模塊的詳細(xì)數(shù)據(jù)為 value。于是便開(kāi)始做如下嘗試：

a.js

var path = require('path');
var express = require('express');
var b = require('./b.js'); 
var app = express();
app.get('/', function (req, res) {
 if (true) { // 檢查文件是否修改
 flush();
 }
 res.send(b.num);
 });
function flush() {
 delete require.cache[path.join(__dirname, './b.js')];
 b = require('./b.js');
 }
app.listen(3000);

再次 require 之前，將 require 之上關(guān)于該模塊的 cache 清理掉后，用之前的方法再次測(cè)試。結(jié)果發(fā)現(xiàn)，可以成功的刷新 b.js 的代碼，輸出新修改的值。

了解到這個(gè)點(diǎn)后，就想通過(guò)該原理實(shí)現(xiàn)一個(gè)無(wú)重啟熱更新版本的 node-supervisor。在封裝模塊的過(guò)程中，出于情懷的原因，考慮提供一個(gè)類似 PHP 中 include 的函數(shù)來(lái)代替 require 去引入一個(gè)模塊。實(shí)際內(nèi)部依舊是使用 require 去加載。以b.js為例，原本的寫法改為 var b = include(‘./b')，在文件 b.js 更新之后 include 內(nèi)部可以自動(dòng)刷新，讓外面拿到最新的代碼。

但是實(shí)際的開(kāi)發(fā)過(guò)程中，這樣很快就碰到了問(wèn)題。我們希望的代碼可能是這樣：

web.js

var include = require('./include');
var express = require('express');
var b = include('./b.js');
var app = express(); 
app.get('/', function (req, res) {
 res.send(b.num);
 });
app.listen(3000);

但按照這個(gè)目標(biāo)封裝include的時(shí)候，我們發(fā)現(xiàn)了問(wèn)題。無(wú)論我們?cè)趇nclude.js內(nèi)部中如何實(shí)現(xiàn)，都不能像開(kāi)始那樣拿到新的 b.num。

對(duì)比開(kāi)始的代碼，我們發(fā)現(xiàn)問(wèn)題出在少了 b = xx。也就是說(shuō)這樣寫才可以：

web.js

var include = require('./include');
var express = require('express');
var app = express(); 
app.get('/', function (req, res) {
 var b = include('./b.js');
 res.send(b.num);
 });
app.listen(3000);

修改成這樣，就可以保證每次能可以正確的刷新到最新的代碼，并且不用重啟實(shí)例了。讀者有興趣的可以研究這個(gè)include是怎么實(shí)現(xiàn)的，本文就不深入討論了，因?yàn)檫@個(gè)技巧使用度不高，寫起起來(lái)不是很優(yōu)雅[1]，反而這其中有一個(gè)更重要的問(wèn)題——JavaScript的引用。

JavaScript 的引用與傳統(tǒng)引用的區(qū)別

要討論這個(gè)問(wèn)題，我們首先要了解 JavaScript 的引用于其他語(yǔ)言中的一個(gè)區(qū)別，在 C++ 中引用可以直接修改外部的值：

#include 
using namespace std;
void test(int &p) // 引用傳遞 {
 p = 2048;
 }
int main() {
 int a = 1024;
 int &p = a; // 設(shè)置引用p指向a
 test(p); // 調(diào)用函數(shù)
 cout << "p: " << p << endl; // 2048
 cout << "a: " << a << endl; // 2048
 return 0;
 }

而在 JavaScript 中：

var obj = { name: 'Alan' };
function test1(obj) {
 obj = { hello: 'world' }; // 試圖修改外部obj
 }
test1(obj);
 console.log(obj); // { name: 'Alan' } // 并沒(méi)有修改①
function test2(obj) {
 obj.name = 'world'; // 根據(jù)該對(duì)象修改其上的屬性
 }
test2(obj);
 console.log(obj); // { name: 'world' } // 修改成功②

我們發(fā)現(xiàn)與 C++ 不同，根據(jù)上面代碼 ① 可知 JavaScript 中并沒(méi)有傳遞一個(gè)引用，而是拷貝了一個(gè)新的變量，即值傳遞。根據(jù) ② 可知拷貝的這個(gè)變量是一個(gè)可以訪問(wèn)到對(duì)象屬性的“引用”（與傳統(tǒng)的 C++ 的引用不同，下文中提到的 JavaScript 的引用都是這種特別的引用）。這里需要總結(jié)一個(gè)繞口的結(jié)論：Javascript 中均是值傳遞，對(duì)象在傳遞的過(guò)程中是拷貝了一份新的引用。

為了理解這個(gè)比較拗口的結(jié)論，讓我們來(lái)看一段代碼：

var obj = { name: 'Alan' };
function test1(obj) {
 obj = { hello: 'world' }; // 試圖修改外部obj
 }
test1(obj);
 console.log(obj); // { name: 'Alan' } // 并沒(méi)有修改①
function test2(obj) {
 obj.name = 'world'; // 根據(jù)該對(duì)象修改其上的屬性
 }
test2(obj);
 console.log(obj); // { name: 'world' } // 修改成功②

通過(guò)這個(gè)例子我們可以看到，data 雖然像一個(gè)引用一樣指向了 obj.data，并且通過(guò) data 可以訪問(wèn)到 obj.data 上的屬性。但是由于 JavaScript 值傳遞的特性直接修改 data = xxx 并不會(huì)使得 obj.data = xxx。

打個(gè)比方最初設(shè)置 var data = obj.data 的時(shí)候，內(nèi)存中的情況大概是：

|   Addr   |  內(nèi)容  | |----------|-------- | obj.data |  內(nèi)存1 |
| data | 內(nèi)存1 |

所以通過(guò) data.xx 可以修改 obj.data 的內(nèi)存1。

然后設(shè)置 data = xxx，由于 data 是拷貝的一個(gè)新的值，只是這個(gè)值是一個(gè)引用（指向內(nèi)存1）罷了。讓它等于另外一個(gè)對(duì)象就好比：

|   Addr   |  內(nèi)容  | |----------|-------- | obj.data |  內(nèi)存1 |
| data | 內(nèi)存2 |

讓 data 指向了新的一塊內(nèi)存2。

如果是傳統(tǒng)的引用（如上文中提到的 C++ 的引用），那么 obj.data 本身會(huì)變成新的內(nèi)存2，但 JavaScript 中均是值傳遞，對(duì)象在傳遞的過(guò)程中拷貝了一份新的引用。所以這個(gè)新拷貝的變量被改變并不影響原本的對(duì)象。

Node.js 中的 module.exports 與 exports

上述例子中的 obj.data 與 data 的關(guān)系，就是 Node.js 中的 module.exports 與 exports 之間的關(guān)系。讓我們來(lái)看看 Node.js 中 require 一個(gè)文件時(shí)的實(shí)際結(jié)構(gòu)：

function require(...) {
 var module = { exports: {} };
 ((module, exports) => { // Node.js 中文件外部其實(shí)被包了一層自執(zhí)行的函數(shù)
 // 這中間是你模塊內(nèi)部的代碼.
 function some_func() {};
 exports = some_func;
 // 這樣賦值,exports便不再指向module.exports
 // 而module.exports依舊是{} 
 module.exports = some_func;
 // 這樣設(shè)置才能修改到原本的exports
 })(module, module.exports);
 return module.exports;
 }

所以很自然的：

console.log(module.exports === exports); // true
// 所以 exports 所操作的就是 module.exports

Node.js 中的 exports 就是拷貝的一份 module.exports 的引用。通過(guò) exports 可以修改Node.js 當(dāng)前文件導(dǎo)出的屬性，但是不能修改當(dāng)前模塊本身。通過(guò) module.exports 才可以修改到其本身。表現(xiàn)上來(lái)說(shuō)：

exports = 1; // 無(wú)效
module.exports = 1; // 有效

這是二者表現(xiàn)上的區(qū)別，其他方面用起來(lái)都沒(méi)有差別。所以你現(xiàn)在應(yīng)該知道寫module.exports.xx = xxx; 的人其實(shí)是多寫了一個(gè)module.。

更復(fù)雜的例子

為了再練習(xí)一下，我們?cè)趤?lái)看一個(gè)比較復(fù)雜的例子：

var a = {n: 1}; 
var b = a; 
a.x = a = {n: 2}; 
console.log(a.x);
console.log(b.x);

按照開(kāi)始的結(jié)論我們可以一步步的來(lái)看這個(gè)問(wèn)題：

var a = {n: 1};  // 引用a指向內(nèi)存1{n:1}
var b = a; // 引用b => a => { n:1 }

內(nèi)部結(jié)構(gòu):

|   Addr  |     內(nèi)容     | |---------|-------------|
| a | 內(nèi)存1 {n:1} | | b | 內(nèi)存1 |

繼續(xù)往下看:

a.x = a = {n: 2}; // (內(nèi)存1 而不是 a ).x = 引用 a = 內(nèi)存2 {n:2}

a 雖然是引用，但是 JavaScript 是值傳的這個(gè)引用，所以被修改不影響原本的地方。

| Addr | 內(nèi)容 | |-----------|-----------------------|
| 1) a | 內(nèi)存2({n:2}) | | 2) 內(nèi)存1.x | 內(nèi)存2({n:2}) |
| 3) b | 內(nèi)存1({n:1, x:內(nèi)存2}) |

所以最后的結(jié)果

a.x 即(內(nèi)存2).x ==> {n: 2}.x ==> undefined
b.x 即(內(nèi)存1).x ==> 內(nèi)存2 ==> {n: 2}

總結(jié)

JavaScrip t中沒(méi)有引用傳遞，只有值傳遞。對(duì)象（引用類型）的傳遞只是拷貝一個(gè)新的引用，這個(gè)新的引用可以訪問(wèn)原本對(duì)象上的屬性，但是這個(gè)新的引用本身是放在另外一個(gè)格子上的值，直接往這個(gè)格子賦新的值，并不會(huì)影響原本的對(duì)象。本文開(kāi)頭所討論的 Node.js 熱更新時(shí)碰到的也是這個(gè)問(wèn)題，區(qū)別是對(duì)象本身改變了，而原本拷貝出來(lái)的引用還指向舊的內(nèi)存，所以通過(guò)舊的引用調(diào)用不到新的方法。

Node.js 并沒(méi)有對(duì) JavaScript 施加黑魔法，其中的引用問(wèn)題依舊是 JavaScript 的內(nèi)容。如 module.exports 與 exports 這樣隱藏了一些細(xì)節(jié)容易使人誤會(huì)，本質(zhì)還是 JavaScript 的問(wèn)題。

注[1]：

老實(shí)說(shuō)，模塊在函數(shù)內(nèi)聲明有點(diǎn)譚浩強(qiáng)的感覺(jué)。

把 b = include(xxx) 寫在調(diào)用內(nèi)部，還可以通過(guò)設(shè)置成中間件綁定在公共地方來(lái)寫。

除了寫在調(diào)用內(nèi)部，也可以導(dǎo)出一個(gè)工廠函數(shù)，每次使用時(shí) b().num 一下調(diào)用也可以。

還可以通過(guò)中間件的形式綁定在框架的公用對(duì)象上（如：ctx.b = include(xxx)）。

要實(shí)現(xiàn)這樣的熱更新必須在架構(gòu)上就要嚴(yán)格避免舊代碼被引用的可能性，否則很容易寫出內(nèi)存泄漏的代碼。

關(guān)于Node.js中怎么引用JavaScript問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享名稱：Node.js中怎么引用JavaScript
瀏覽路徑：http://bm7419.com/article28/ijpijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

營(yíng)銷型網(wǎng)站建設(shè)