摘要:入門你必須知道的那些事最基本的一些操作和概念用執行一段代碼在命令行中用切換到桌面創建一個文件夾和并用命令切換到這個文件夾創建一個文件并寫上簡單的代碼在命令行中輸入命令行會輸出引用文件的方式采用了規范通過來引入一個文件新建文件并在文件中引入執
入門node.js你必須知道的那些事 最基本的一些操作和概念 用node執行一段js代碼
在命令行中用cd切換到桌面
創建一個文件夾和并用cd命令切換到這個文件夾
mkdir nodeTest && cd nodeTest
創建一個js文件并寫上簡單的js代碼
touch a.js
`
var a = 10; console.log(a); console.log(a + 10);
`
在命令行中輸入node a.js
命令行會輸出 10 20
Node.js采用了CommonJS規范,通過require來引入一個js文件
新建文件b.js 并在文件中引入a.js
touch b.js
require("./a.js")
執行b.js
node b.js 命令行會輸出10 20
node中的模塊概念node中一個模塊就是一個js文件,多個模塊組成一個特定功能的一堆文件叫包
一個js文件可以定義它自己暴露給外部的變量(意思就是另一個文件通過require引用它后需要怎么使用它),node中提供共了exports和module.exports兩個變量來實現它
a.js
function func1() { console.log("aaa") } function func2() { console.log("bbb") } exports.a = func1 exports.b = func2
b.js
var a = require("./a.js") a.a() //會打印出aaa a.b() //會打印出bbb
c.js
//es6 模式匹配寫法 var {fun1,fun2} = require("./a.js")//fun1和fun2必須跟a.js中的變量名相同,這里是固定的 fun1() //會打印出aaa fun2() //會打印出bbb
a.js
//類的寫法 function Test() { this.func1 = function() { console.log("aaa") } this.func2 = function() { console.log("bbb") } } module.exports = Hello
b.js
var Test = require("./a.js") var test = new Test() test.func1() test.func2()exports 和 module.exports 的關系
node中的npmexports 是module.exports的一個引用,意思就是指向同一塊內存地址,node中真正生效的是module.exports,修改exports本質上也是修改module.exports的值,
比如exports.a = 3,實際上module.exports.a也是等于3的
又比如exports = {},這樣exports就和module.exports的指向的對象就不一樣了,后面再怎么修改exports也不會影響到module.exports的值,也不會影響到文件輸出的變量
再比如module.exports={},這樣造成的效果和上面exports={}的效果是一樣的這里表達有問題,雖然module.exports={}和exports={}都是讓exports與module.exports的引用指向不同了,但是最后的效果實際上是不一樣的,具體用法參考評論區。感謝@琪琪好笨笨 指出的錯誤
建議:如果你還傻傻分不清楚它們的區別,以后在不是必須用到module.exports的時候只用exports,如果導出一個類這樣的必須用到module.exports就不要使用exports了,不要混在一起用就不會出錯了
node.js中自帶的那些模塊 http模塊node中默認自帶了npm,npm是一個包管理器,上面說到包就是一個個模塊(js文件)組成的一個具有特定功能的一堆js文件,通過npm我們可以引入這些包(如果不理解,把包理解成一個個插件也沒有錯)來輕松實現一些功能
安裝一個模塊你只需要npm install xxx 就可以安裝了,然后在你自己的js中用var xxx = require("./xxx")就可以使用了
通過npm install xxx 安裝完xxx模塊后,你會發現當前目錄下多了一個node_modules文件夾,打開node_modules文件夾你會發現里面有一個xxx文件夾。你在執行npm install xxx的時候,實際上npm也只是幫你把xxx這個包下載下來了而已,僅此而已
當你通過npm安裝了十來個或者更多的包的時候你可能自己早就不知道自己安裝了哪些包了,因為很多包依賴了其它的包(一個包用到另一個包提供的功能是非常正常的行為,就像我們在用別人包里的功能一樣),所以npm提供了package.json這個文件來管理包
package.json 是一個文件,里面可以定義很多鍵值對,其中有幾個字段非常重要,dependencies表示上線運行時依賴的包,devDependencies表示開發時依賴的包,scripts可以定義自己的腳本,main表示所有的包你都會通過這個文件引入
當你在dependencies和devDependencies定義好依賴,然后在命令行中輸入npm install,npm就會幫你自動安裝好這些包;反過來你在命令行中輸入npm install xxx --save后npm就會在package.json中的dependencies自動加上xxx,如果執行的是npm install xxx --save-dev 就會在devDependencies中自動加上xxx。
而在scripts中定義的腳本就直接可以在命令行中運行了,如果還弄不懂,可以看一下我的另一篇文章,如何制作自己的npm包
使用別人的模塊,其實就是使用別人寫好的方法(函數),只需要搞清楚別人提供的方法是怎么用的就可以了,可以查node.js官網查api或者看看網上寫的教程就好。
下面演示了一個最簡單的http模塊的使用方法,在當前目錄下在命令行中輸入node test.js,http會掛起一個監聽,只需要在瀏覽器中輸入http://localhost:8000,test.js就會跟瀏覽器返回
hello world顯示在頁面上:
test.js var http = require("http") var callBack = function(req, res) { res.write("url模塊hello world") res.end() } http.createServer(callBack).listen(8000)
在http模塊的例子中傳入了一個回調函數,兩個參數分別是request和response,前者是瀏覽器傳給我們的對象,后者是我們傳給瀏覽器的對象。
其中req中包含了url這個屬性,可以在回調函數中把它打印出來console.log(req.url),加入你在瀏覽器中輸入的是:http://localhost:8000/aaa/bbb?abc=3,那么打印出來的值是:/aaa/bbb?abc=3
在這里我們需要使用到的是/aaa/bbb和abc=3分開來的結果,node給我們提供了一個處理url的模塊,就叫做url模塊.當然如果你自己想處理這個url也是完全可以的,用正則表達式就可以,但是已經有現成的為啥不用呢
下面簡單演示一下用法,在瀏覽器輸入:http://localhost:8000/aaa/bbb?abc=3
test.js var http = require("http") var url = require("url") var callBack = function(req, res) { var urlString = url.parse(req.url) var path = urlString.pathname var query = urlString.query console.log(path,query)//打印出/aaa/bbb abc=3 res.write("fs模塊hello world") res.end() } http.createServer(callBack).listen(8000)
fs是一個提供文件操作功能的模塊,可以對文件進行讀寫存刪等操作,下面演示向瀏覽器返回本js的內容:
test.js var http = require("http") var fs = require("fs") var callBack = function(req, res) { fs.readFile("./test.js", "utf-8", function(err, data) { res.write(data) res.end() }) } http.createServer(callBack).listen(8000)用http模塊、url模塊、http模塊搭建一個靜態服務器
var http = require("http") var url = require("url") var fs = require("fs") var callBack = function(req, res) { var pathname = url.parse(req.url).pathname if (pathname == "/") { pathname = "/index.html" } fs.readFile("." + pathname, "utf-8", function(err, data) { if (err) { res.write("Error 404") } else { res.write(data) } res.end() } )} http.createServer(callBack).listen(8000)使用外部模塊 簡單說明
外部模塊都是第三方提供的模塊,node.js默認是不提供的,所以需要用npm安裝,這里提供package.json文件,只需要執行npm install 安裝就行了,另外是管理MongoDB數據庫的一個包,所以本地需要把MongoDB多帶帶安裝一下。
package.json { "dependencies": { "cheerio": "^1.0.0-rc.2", "eventproxy": "^1.0.0", "express": "^4.16.2", "koa": "^2.4.1", "superagent": "^3.8.1" } }express
express提供了基本的路由和靜態文件訪問的功能,當然還有其它的功能,這里主要演示它的基本使用
下面1,2,3都是設置public和files目錄下為靜態文件,可以直接通過文件路徑訪問,1、2可以同時存在,即可以指定幾個目錄均為靜態文件目錄,在指定目錄為靜態文件后,訪問靜態文件需要省略這個目錄,比如訪問public目錄下的css/index.css:localhost:8000/css/index.css,直接省略了public,
可以通過3來指定替換目錄名稱的路徑,通過3設置后,要訪問public下的css/index.css:localhost:8000/public/css/index.css
var express = require("express") var app = express() 1. app.use(express.static("public")) 2. app.use(express.static("files")) 3. app.use("/static",express.static(public)) app.get("/", function (req, res) { res.send("Hello World");//一個回調方法對應一個路徑 }) app.get("/user", function (req, res) { res.send("user"); }) app.listen(8000, function () { console.log("app is listening at port 3000"); })superagent、cheerio模塊
superagent是一個可以發http請求的模塊,回調函數中的res就是請求到的內容
cheerio是在服務器端類式jquery的框架,看代碼應該能看出來
下面演示的是抓取糯米網的餐品列表鏈接
var superagent = require("superagent")
var cheerio = require("cheerio") var spideUrl = "https://t10.nuomi.com/pc/t10/index" superagent.get(spideUrl) .end(function(err, res) { if (err) { return console.error(err); } var foodUrls = []; var $ = cheerio.load(res.text) // 獲取首頁所有的鏈接 $(".j-item a").each(function(idx, element) { var $element = $(element) foodUrls.push($element.attr("href")) }) console.log(topicUrls) })eventproxy
在爬取一堆類式的鏈接的時候,一個個鏈接寫挺麻煩的,eventproxy提供了監聽,然后觸發回調的方式來處理這類問題,下面是我拷貝的一段代碼,應該挺容易看懂的
//得到一個 eventproxy 的實例 var ep = new eventproxy() // 命令 ep 重復監聽 urls.length 次(在這里也就是 10 次) ep.after("topic_html", urls.length, function (topics) { topics = topics.map(function(page) { var $ = cheerio.load(page) var userId = $(".runUserName a font").eq(0).text() return userId }); console.log(topics); }) urls.forEach(function(item) { superagent.get(item) .end(function (err, res) { ep.emit("topic_html", res.text) }) })總結
大部分學習前端其實是沒必要深入學習node.js的,一方面沒那個精力,然后也沒那么必要,但是一些基本的東西還是有必要好好學學的
大多數前端同學之所以覺得應該學前端,其實是平時接觸到的npm、require模塊、es6的語法等問題覺得比較棘手,以為是自己不懂node.js,其實這些和node.js并無太大關系,這些已經影響到學習前端其它內容的地方還是需要好好學習的
學習node.js基本的東西還是有必要的,比如搭建個簡單的服務器,做點基本的邏輯處理和數據處理,做個爬蟲啥的。而這些都很簡單,看兩篇博客做幾個練習就夠了,再深入就根據實際情況學習就好了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89875.html
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
摘要:我從今年的月份開始在知乎上連續回答前端開發相關的問題,至今已有將近三個月,回顧寫過的一百多條回答,不少是給迷茫的前端工作者的建議。今天我把我的思考提煉整理成文,希望能給予在迷茫中前行中的前端學習工作者一些有用的建議。 本文首發于知乎專欄——前端指南作者:Mark MFS老師轉載請注明來源。 我從今年的2月份開始在知乎上連續回答前端開發相關的問題,至今已有將近三個月,回顧寫過的一百多條回...
摘要:面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為,有哪些一般人我都告訴他,但是他都不聽的忠告如何面試前端工程師 更多資源請Star:https://github.com/maidishike... 文章轉自:https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...
摘要:前端日報精選你可能不知道的前端知識點譯在服務端渲染的實現掘金小前端創建或文件并瀏覽器導出下載張鑫旭鑫空間鑫生活代理服務器淺析知乎專欄快速打造簡易高效的配置掘金中文譯組件解耦之道楓上霧棋的日志第期什么樣的工程師才能算老司機 2017-07-05 前端日報 精選 你可能不知道的前端知識點[譯] React 在服務端渲染的實現 - 掘金小tip:JS前端創建html或json文件并瀏覽器導出...
閱讀 1446·2021-11-24 09:39
閱讀 3626·2021-09-29 09:47
閱讀 1571·2021-09-29 09:34
閱讀 3067·2021-09-10 10:51
閱讀 2536·2019-08-30 15:54
閱讀 3216·2019-08-30 15:54
閱讀 869·2019-08-30 11:07
閱讀 1004·2019-08-29 18:36