摘要:今天的內容涉及的原理運行機制和的內容,會有點沉悶,也會有點困難,建議像我一樣做一些筆記。這個變量就是這個模塊與外界的一個出口。中,變量就是在中暴露的函數。具體原因同樣涉及到的內部處理。有興趣的同學可以參考上面的那篇文章。
今天的內容涉及Node的原理、運行機制和CommonJS的內容,會有點沉悶,也會有點困難,建議像我一樣做一些筆記。模塊
在開發大型應用的時候,我們常常會用到全局變量,例如:var s="Hello"。但是,當我們的應用越來越大時,我們可能會不小心重復用了幾個相同的變量或者函數名,這就會給我們的應用造成麻煩。為了解決這個困難,于是提出了模塊的概念。模塊是一種代碼的組織形式,就是把實現不同功能的JS代碼分開來寫,把相同名字的函數或變量存在不同的模塊中,這樣就可以避免相同名的函數或變量發生沖突了。
同時,模塊還可以提高代碼的可維護性。因為你只要關心寫好當前的模塊,而不必擔心會污染或影響到別的模塊,模塊之間都是隔離的。
在上一節的例子中,我們編寫了一個hello.js的代碼。在這里,我們把它修改一下:
"use strict"; var s="Hello"; function greet(name){ console.log(s + "," + name + "!"); } module.exports=greet;
這里,我們用module.exports向外輸出了一個變量。這個變量就是這個模塊與外界的一個出口。這個變量可以是函數、對象、數組。
既然有輸出,就要有接口。我們再創建一個main.js:
"use strict"; //引入hello模塊: var heat=require("./hello"); var s="Michael"; heat(s); //Hello,Michael!
這里,我們用require函數引入了hello模塊。main.js中,變量heat就是在hello.js中暴露的greet函數。接下來heat(s)`就是直接使用它了。
Commonjs規范和Node的內部運行這種模塊加載的方式被稱為Commonjs規范,除了這種規范之外,還有ES6、AMD、CMD,這里不細談,我也還沒學到,這里只談談Commonjs和以前學的閉包知識。
在上文中,我們提到了全局變量的沖突。正如我們在上面的例子中,兩個js文件都聲明了變量s,但是并沒有發生沖突,仍然是按照我們的意愿來執行的,這就是Node實行了模塊的隔離。
隔離的原理Node能夠實現模塊和變量的隔離,是因為閉包。
JS是一種函數式編程語言,它支持閉包,如果我們用函數把某個變量包起來,這個變量就變成了函數內部的局部變量了。而我們知道,閉包中只要這個函數的生命周期沒有結束,這個變量也就可以一直存在,而不會受到其他函數外的其他變量的影響。
我們以上面的例子來解釋,在hello模塊中,s="hello"被保存了起來,只對外開了一個口:module.exports=greet,在函數greet中,包含有變量s,所以”s=hello”能一直被保存起來,直到greet在main模塊中被引用。
這里有一個問題,我們說需要一個函數才能形成閉包,但是我們的代碼并沒有這個函數呀?這就是Node做的工作了,Node幫我們在內部包裝了hello模塊:
(function(){ var s="Hello"; function greet(name){ console.log(s + "," + name + "!"); } })()
因此,s就變成了匿名函數的內部局部變量,后來加載的其他模塊中即使也有s變量,也不會影響到這個s變量。
模塊的輸出在Node中有一個module對象,讓我們來看看模塊的輸出過程:
var module={ id:"hello", exports:{} }; var load=function(module){ //讀取的hello.js代碼 function greet(name){ console.log( "Hello," + name + "!"); } module.exports=greet; //hello.js代碼結束 return module.exports; }; var exported=load(module); //保存module save(module,exported);
在我們的hello模塊中,我們通過module.exports=greet把一個變量傳給了Node,而module實際上是Node準備階段的一個變量,而且也是作為load函數的一個參數被保存了下來。每當我們使用module.exports時,Node就把一條module按模塊分類存了起來,這些module都被保存在了一起。
當我們在main模塊中想要用到hello模塊時,我們又使用require()來讓Node幫我們在找到id為hello的module傳遞給我們。這樣,我們就拿到了hello的模塊輸出。
Node的運行參考了模塊—廖雪峰的官方網站,實在看的我也有點繞,不過Node處理模塊的運行原理我們現在看個大概暫時就夠了,等學完主體內容再來細細分析。兩種輸出方式
我們可以通過兩種方式輸出模塊:
方法一:module.exports={ hello:hello, greet:greet }方法二:
exports.hello=hello; exports.greet=greet;
但是你不能直接對exports賦值:
exports={ hello:hello, greet:greet }
實踐證明,使用module.exports=xxx的方式賦值更好。具體原因同樣涉及到Node的內部處理。有興趣的同學可以參考上面的那篇文章。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/107205.html
摘要:例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一,主要是介紹了的核心概念,是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多,我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號:前端修煉之路,歡迎關注。 最近開始想要維護一個個人的公眾...
摘要:更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的 更多資源請Star:https://github.com/maidishike... 文章轉自:https://github.com/jsfr...
摘要:而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經等不及安裝使用了吧。安裝及使用一般是結合自動化工具使用,如果要單獨使用可以安裝,這里我先對的安裝使用講解下。接下來說點實際的,如何利用結合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉換的工具,這些插件非常強大,強大到無所不能。其中,Autoprefixer就是眾多Post...
摘要:本節將學習是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來強制安裝所有模塊,不管該模塊之前是否安裝過由于國內墻的原因,使用安裝會非常緩慢,慢到想切,不過還好,我們可以使用淘寶提供的國內鏡像進行下載。 本節將學習 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法強大的樣式表Sass Sass 是一種可用于編寫CSS的語言...
摘要:樣式通過標簽包裹,默認是影響全局的,如需定義作用域只在該組件下起作用,需在標簽上加,如要引入外部文件,首先需給項目安裝依賴包,打開,進入項目目錄,輸入回車。 showImg(https://segmentfault.com/img/remote/1460000013235090); (一)安裝node.js 首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/...
閱讀 2655·2021-09-13 10:26
閱讀 1915·2021-09-03 10:28
閱讀 1986·2019-08-30 15:44
閱讀 804·2019-08-29 14:07
閱讀 392·2019-08-29 13:12
閱讀 2150·2019-08-26 11:44
閱讀 2344·2019-08-26 11:36
閱讀 2012·2019-08-26 10:19