入門node.js你必須知道的那些事

入門node.js你必須知道的那些事

最基本的一些操做和概念

用node執行一段js代碼

1. 在命令行中用cd切換到桌面

2. 建立一個文件夾和並用cd命令切換到這個文件夾
   mkdir nodeTest && cd nodeTest

3. 建立一個js文件並寫上簡單的js代碼
   touch a.js
   `

   var a = 10;
   console.log(a);
   console.log(a + 10);

   `

4. 在命令行中輸入node a.js
   命令行會輸出 10 20

node引用文件的方式

1. Node.js採用了CommonJS規範,經過require來引入一個js文件

2. 新建文件b.js 並在文件中引入a.js

   • touch b.js

   • require('./a.js')

3. 執行b.js

   • node b.js 命令行會輸出10 20

node中的模塊概念

1. node中一個模塊就是一個js文件，多個模塊組成一個特定功能的一堆文件叫包

2. 一個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 的關係

exports 是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中的npm

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中自帶的那些模塊

http模塊

使用別人的模塊，其實就是使用別人寫好的方法(函數)，只須要搞清楚別人提供的方法是怎麼用的就能夠了，能夠查node.js官網查api或者看看網上寫的教程就好。

下面演示了一個最簡單的http模塊的使用方法，在當前目錄下在命令行中輸入node test.js，http會掛起一個監聽，只須要在瀏覽器中輸入http://localhost:8000，test.js就會跟瀏覽器返回<div>hello world</div>顯示在頁面上：

test.js
var http = require('http')
var callBack = function(req, res) {
    res.write('<div>hello world</div>')
    res.end()
}
http.createServer(callBack).listen(8000)

url模塊

在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('<div>hello world</div>')
   res.end()
}
http.createServer(callBack).listen(8000)

fs模塊

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",<!--koa是用來替代express的框架-->
    "superagent": "^3.8.1"
  }
}

express

express提供了基本的路由和靜態文件訪問的功能，固然還有其它的功能，這裏主要演示它的基本使用
下面1,2,3都是設置public和files目錄下爲靜態文件，能夠直接經過文件路徑訪問，一、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基本的東西仍是有必要的，好比搭建個簡單的服務器，作點基本的邏輯處理和數據處理，作個爬蟲啥的。而這些都很簡單，看兩篇博客作幾個練習就夠了，再深刻就根據實際狀況學習就行了。