隨着一些大公司如Walmart,PayPal等開始採用Node.js,在過去的幾年裏,Node.js有了快速的增加。愈來愈多的人開始選擇Node併發布modules到NPM,其發展的速度遠超其它開發語言。不過對於Node的理念你可能須要一些時間去適應,尤爲是那些剛從其它編程語言轉型過來的開發人員。javascript
在本文中我將談一談Node開發者們最常範的一些錯誤以及如何來避免這些錯誤。有關示例的源代碼,你能夠從github上獲取到。html
與其它編程語言如PHP或Ruby不一樣,當你修改了源代碼後,Node須要從新啓動才能使修改生效。在建立Web應用程序時還有一件事會使你放慢腳步,那就是當修改靜態資源時刷新瀏覽器頁面。固然你能夠不厭其煩地手動來作這些事情,不過這裏會有一些更好的解決辦法。前端
咱們中的大部分人可能都是這樣編寫和調試代碼的,在編輯器中保存代碼,而後在控制檯按CTRL+C鍵中止應用,隨後經過向上鍵找到以前執行過的啓動命令,按回車來從新啓動應用。不過,經過使用下面這些工具能夠自動完成應用的重啓並簡化開發流程:html5
這些工具能夠監視代碼文件的修改並自動重啓服務。下面以nodemon爲例來講說如何使用這些工具。首先經過npm進行全局安裝:java
npm i nodemon -g
而後,在終端經過nodemon代替node命令來啓動應用:node
# node server.js $ nodemon server.js 14 Nov 21:23:23 - [nodemon] v1.2.1 14 Nov 21:23:23 - [nodemon] to restart at any time, enter `rs` 14 Nov 21:23:23 - [nodemon] watching: *.* 14 Nov 21:23:23 - [nodemon] starting `node server.js` 14 Nov 21:24:14 - [nodemon] restarting due to changes... 14 Nov 21:24:14 - [nodemon] starting `node server.js`
對nodemon或node-supervisor來講,在全部已有的選項中,最牛逼的莫過於能夠指定忽略的文件或文件夾。git
除了上面介紹的自動重啓工具外,還有其它的工具能夠幫助你加快web應用程序的開發。livereload工具容許瀏覽器在監測到程序變更後自動刷新頁面,而不用手動進行刷新。github
其工做的基本原理和上面介紹的類似,只是它監測特定文件夾內的修改而後自動刷新瀏覽器,而不是重啓整個服務。自動刷新須要依賴於在頁面中注入腳本或者經過瀏覽器插件來實現。web
這裏我不去介紹如何使用livereload,相反,我將介紹如何經過Node來建立一個類似的工具,它將具備下面這些功能:ajax
首先咱們須要經過NPM來安裝項目須要的全部依賴項:
接下來我將建立一個簡單的Express server在前端頁面中渲染home視圖:
var express = require('express'); var app = express(); var ejs = require('ejs'); var path = require('path'); var PORT = process.env.PORT || 1337; // view engine setup app.engine('html', ejs.renderFile); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'html'); // serve an empty page that just loads the browserify bundle app.get('/', function(req, res) { res.render('home'); }); app.listen(PORT); console.log('server started on port %s', PORT);
由於使用的是Express,因此咱們能夠將瀏覽器自動刷新工具作成一個Express的中間件。這個中間件會attach到SSE endpoint,並會在客戶端腳本中建立一個view helper。中間件function的參數是Express的app,以及須要被監視的文件夾。因而,咱們將下面的代碼加到server.js中,放到view setup以前:
var reloadify = require('./lib/reloadify'); reloadify(app, __dirname + '/views');
如今/views文件夾中的文件被監視。整個中間件看起來像下面這樣:
var sendevent = require('sendevent'); var watch = require('watch'); var uglify = require('uglify-js'); var fs = require('fs'); var ENV = process.env.NODE_ENV || 'development'; // create && minify static JS code to be included in the page var polyfill = fs.readFileSync(__dirname + '/assets/eventsource-polyfill.js', 'utf8'); var clientScript = fs.readFileSync(__dirname + '/assets/client-script.js', 'utf8'); var script = uglify.minify(polyfill + clientScript, { fromString: true }).code; function reloadify(app, dir) { if (ENV !== 'development') { app.locals.watchScript = ''; return; } // create a middlware that handles requests to `/eventstream` var events = sendevent('/eventstream'); app.use(events); watch.watchTree(dir, function (f, curr, prev) { events.broadcast({ msg: 'reload' }); }); // assign the script to a local var so it's accessible in the view app.locals.watchScript = '<script>' + script + '</script>'; } module.exports = reloadify;
你也許已經注意到了,若是運行環境沒有被設置成'development',那麼這個中間件什麼也不會作。這意味着咱們不得不在產品環境中將該代碼刪掉。
前端JS腳本文件很是簡單,它只負責監聽SSE的消息並在須要的時候從新加載頁面:
(function() { function subscribe(url, callback) { var source = new window.EventSource(url); source.onmessage = function(e) { callback(e.data); }; source.onerror = function(e) { if (source.readyState == window.EventSource.CLOSED) return; console.log('sse error', e); }; return source.close.bind(source); }; subscribe('/eventstream', function(data) { if (data && /reload/.test(data)) { window.location.reload(); } }); }());
文件eventsourfe-polyfill.js能夠從Remy Sharp's polyfill for SSE找到。最後很是重要的一點是將生成的腳本經過下面的方式添加到前端頁面/views/homt.html中:
... <%- watchScript %> ...
如今,當你每次對home.html頁面作修改時,瀏覽器都將從服務器從新加載該頁面(http://localhost:1337/)。
因爲Node.js是單線程運行的,全部對event loop的阻塞都將使整個程序被阻塞。這意味着若是你有一個上千個客戶端訪問的web server,而且程序發生了event loop阻塞,那麼全部的客戶端都將處於等待狀態而沒法得到服務器應答。
這裏有一些例子,你可能會在不經意中使用它們而產生event loop阻塞:
問題是你會不經意中作了上述的事情,畢竟將一個擁有15Mb左右大小的內容輸出並不會常常發生,對嗎?這足以讓攻擊者發現並最終使你的整個服務器受到DDOS攻擊而崩潰掉。
幸運的是你能夠經過監視event loop的延遲來檢測異常。咱們能夠經過一些特定的解決方案例如StrongOps來實現,或者也能夠經過一些開源的modules來實現,如blocked。
這些工具的工做原理是精確地跟蹤每次interval之間所花費的時間而後報告。時間差是經過這樣的方式來計算的:先記錄下interval過程當中A點和B點的準確時間,而後用B點的時間減去A點的時間,再減去interval運行間隔的時間。
下面的例子充分說明了如何來實現這一點,它是這麼作的:
下面是上述示例的源代碼:
var getHrDiffTime = function(time) { // ts = [seconds, nanoseconds] var ts = process.hrtime(time); // convert seconds to miliseconds and nanoseconds to miliseconds as well return (ts[0] * 1000) + (ts[1] / 1000000); }; var outputDelay = function(interval, maxDelay) { maxDelay = maxDelay || 100; var before = process.hrtime(); setTimeout(function() { var delay = getHrDiffTime(before) - interval; if (delay < maxDelay) { console.log('delay is %s', chalk.green(delay)); } else { console.log('delay is %s', chalk.red(delay)); } outputDelay(interval, maxDelay); }, interval); }; outputDelay(300); // heavy stuff happening every 2 seconds here setInterval(function compute() { var sum = 0; for (var i = 0; i <= 999999999; i++) { sum += i * 2 - (i + 1); } }, 2000);
運行上面的代碼須要安裝chalk。運行以後你應該會在終端看到以下圖所示的結果:
前面已經說過,開源modules也使用了類似的方式來實現對應的功能,所以能夠放心使用它們:
經過使用這種技術進行性能分析,你能夠精確地找出代碼中的哪部分會致使延遲。
不少時候當你保存文件而後從新啓動Node web app時它就很快地崩掉了。最有可能出現的緣由就是調用了兩次回調函數,這意味着你極可能在第一次調用以後忘記return了。
咱們建立一個例子來重現一下這種狀況。我將建立一個簡單的包含基本驗證功能的代理server。要使用它你須要安裝request這個依賴包,運行程序而後訪問(如http://localhost:1337/?url=http://www.google.com/)。下面是這個例子的源代碼:
var request = require('request'); var http = require('http'); var url = require('url'); var PORT = process.env.PORT || 1337; var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi; var isUrl = new RegExp(expression); var respond = function(err, params) { var res = params.res; var body = params.body; var proxyUrl = params.proxyUrl; res.setHeader('Content-type', 'text/html; charset=utf-8'); if (err) { console.error(err); res.end('An error occured. Please make sure the domain exists.'); } else { res.end(body); } }; http.createServer(function(req, res) { var queryParams = url.parse(req.url, true).query; var proxyUrl = queryParams.url; if (!proxyUrl || (!isUrl.test(proxyUrl))) { res.writeHead(200, { 'Content-Type': 'text/html' }); res.write("Please provide a correct URL param. For ex: "); res.end("<a href='http://localhost:1337/?url=http://www.google.com/'>http://localhost:1337/?url=http://www.google.com/</a>"); } else { // ------------------------ // Proxying happens here // TO BE CONTINUED // ------------------------ } }).listen(PORT);
除代理自己外,上面的代碼幾乎包含了全部須要的部分。再仔細看看下面的內容:
request(proxyUrl, function(err, r, body) { if (err) { respond(err, { res: res, proxyUrl: proxyUrl }); } respond(null, { res: res, body: body, proxyUrl: proxyUrl }); });
在回調函數中,咱們有錯誤處理的邏輯,可是在調用respond函數後忘記中止整個運行流程了。這意味着若是咱們訪問一個沒法host的站點,respond函數將會被調用兩次,咱們會在終端收到下面的錯誤信息:
Error: Can't set headers after they are sent. at ServerResponse.OutgoingMessage.setHeader (http.js:691:11) at respond (/Users/alexandruvladutu/www/airpair-2/3-multi-callback/proxy-server.js:18:7) This can be avoided either by using the `return` statement or by wrapping the 'success' callback in the `else` statement:
request(.., function(..params) { if (err) { return respond(err, ..); } respond(..); }); // OR: request(.., function(..params) { if (err) { respond(err, ..); } else { respond(..); } });
有些人老是拿地獄般的回調參數來抨擊Node,認爲在Node中回調嵌套是沒法避免的。但其實並不是如此。這裏有許多解決方法,可使你的代碼看起來很是規整:
咱們來建立一個例子,而後重構它以使用async模塊。這個app是一個簡單的前端資源分析工具,它完成下面這些工做:
除async模塊外,你須要安裝下面這些npm包:
var URL = process.env.URL; var assert = require('assert'); var url = require('url'); var request = require('request'); var cheerio = require('cheerio'); var once = require('once'); var isUrl = new RegExp(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi); assert(isUrl.test(URL), 'must provide a correct URL env variable'); request({ url: URL, gzip: true }, function(err, res, body) { if (err) { throw err; } if (res.statusCode !== 200) { return console.error('Bad server response', res.statusCode); } var $ = cheerio.load(body); var resources = []; $('script').each(function(index, el) { var src = $(this).attr('src'); if (src) { resources.push(src); } }); // ..... // similar code for stylesheets and images // checkout the github repo for the full version var counter = resources.length; var next = once(function(err, result) { if (err) { throw err; } var size = (result.size / 1024 / 1024).toFixed(2); console.log('There are ~ %s resources with a size of %s Mb.', result.length, size); }); var totalSize = 0; resources.forEach(function(relative) { var resourceUrl = url.resolve(URL, relative); request({ url: resourceUrl, gzip: true }, function(err, res, body) { if (err) { return next(err); } if (res.statusCode !== 200) { return next(new Error(resourceUrl + ' responded with a bad code ' + res.statusCode)); } if (res.headers['content-length']) { totalSize += parseInt(res.headers['content-length'], 10); } else { totalSize += Buffer.byteLength(body, 'utf8'); } if (!--counter) { next(null, { length: resources.length, size: totalSize }); } }); }); });
上面的代碼看起來還不是特別糟糕,不過你還能夠嵌套更深的回調函數。從底部的代碼中你應該能識別出什麼是聖誕樹結構了,其代碼的縮進看起來像這個樣子:
if (!--counter) { next(null, { length: resources.length, size: totalSize }); } }); }); });
要運行上面的代碼,在終端輸入下面的命令:
$ URL=https://bbc.co.uk/ node before.js # Sample output: # There are ~ 24 resources with a size of 0.09 Mb.
使用async進行部分重構以後,咱們的代碼看起來像下面這樣:
var async = require('async'); var rootHtml = ''; var resources = []; var totalSize = 0; var handleBadResponse = function(err, url, statusCode, cb) { if (!err && (statusCode !== 200)) { err = new Error(URL + ' responded with a bad code ' + res.statusCode); } if (err) { cb(err); return true; } return false; }; async.series([ function getRootHtml(cb) { request({ url: URL, gzip: true }, function(err, res, body) { if (handleBadResponse(err, URL, res.statusCode, cb)) { return; } rootHtml = body; cb(); }); }, function aggregateResources(cb) { var $ = cheerio.load(rootHtml); $('script').each(function(index, el) { var src = $(this).attr('src'); if (src) { resources.push(src); } }); // similar code for stylesheets && images; check the full source for more setImmediate(cb); }, function calculateSize(cb) { async.each(resources, function(relativeUrl, next) { var resourceUrl = url.resolve(URL, relativeUrl); request({ url: resourceUrl, gzip: true }, function(err, res, body) { if (handleBadResponse(err, resourceUrl, res.statusCode, cb)) { return; } if (res.headers['content-length']) { totalSize += parseInt(res.headers['content-length'], 10); } else { totalSize += Buffer.byteLength(body, 'utf8'); } next(); }); }, cb); } ], function(err) { if (err) { throw err; } var size = (totalSize / 1024 / 1024).toFixed(2); console.log('There are ~ %s resources with a size of %s Mb.', resources.length, size); });
一些初入Node的開發人員每每會將其它語言的一些思惟模式融入進來,從而寫出不一樣風格的代碼。例如將全部的代碼寫到一個文件裏,而不是將它們分散到本身的模塊中再發布到NPM等。
就拿咱們以前的例子來講,咱們將全部的內容都放在一個文件裏,這使得代碼很難被測試和讀懂。不過別擔憂,咱們會重構代碼使其看起來漂亮而且更加模塊化。固然,這也將有效地避免回調地獄。
若是咱們將URL validator,response handler,request功能塊以及resource處理程序抽出來放到它們本身的模塊中,咱們的主程序看起來會像下面這樣:
// ... var handleBadResponse = require('./lib/bad-response-handler'); var isValidUrl = require('./lib/url-validator'); var extractResources = require('./lib/resource-extractor'); var request = require('./lib/requester'); // ... async.series([ function getRootHtml(cb) { request(URL, function(err, data) { if (err) { return cb(err); } rootHtml = data.body; cb(null, 123); }); }, function aggregateResources(cb) { resources = extractResources(rootHtml); setImmediate(cb); }, function calculateSize(cb) { async.each(resources, function(relativeUrl, next) { var resourceUrl = url.resolve(URL, relativeUrl); request(resourceUrl, function(err, data) { if (err) { return next(err); } if (data.res.headers['content-length']) { totalSize += parseInt(data.res.headers['content-length'], 10); } else { totalSize += Buffer.byteLength(data.body, 'utf8'); } next(); }); }, cb); } ], function(err) { if (err) { throw err; } var size = (totalSize / 1024 / 1024).toFixed(2); console.log('\nThere are ~ %s resources with a size of %s Mb.', resources.length, size); });
而request功能塊則看起來像這樣:
var handleBadResponse = require('./bad-response-handler'); var request = require('request'); module.exports = function getSiteData(url, callback) { request({ url: url, gzip: true, // lying a bit headers: { 'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36' } }, function(err, res, body) { if (handleBadResponse(err, url, res && res.statusCode, callback)) { return; } callback(null, { body: body, res: res }); }); };
完整的例子能夠從github repo中找到。
如今就簡單了,代碼更加易讀,咱們也能夠開始爲咱們的app添加測試用例了。固然,咱們還能夠繼續重構代碼將獲取response長度的功能單獨分離出來放到本身的模塊中。
好的一點是Node鼓勵你們編寫小的模塊併發布到NPM。在NPM中你能夠找到各類各樣的模塊小到如在interval間生成隨機數的模塊。你應當努力使你的Node應用程序模塊化,功能越簡單越好。
不少Node教程都會展現示例代碼,並在其中不一樣的地方包含console.log,這給許多Node開發人員留下了一個印象,即console.log就是在Node代碼中實現日誌功能。
在編寫Node apps代碼時你應當使用一些比console.log更好的工具來實現日誌功能,由於這些工具:
這些功能均可以避免費使用,你能夠在生產環境中使用日誌模塊如bunyan。若是將模塊安裝到全局,你還能夠獲得一個便利的CLI開發工具。
讓咱們來看看它的示例程序以瞭解如何使用它:
var http = require('http'); var bunyan = require('bunyan'); var log = bunyan.createLogger({ name: 'myserver', serializers: { req: bunyan.stdSerializers.req, res: bunyan.stdSerializers.res } }); var server = http.createServer(function (req, res) { log.info({ req: req }, 'start request'); // <-- this is the guy we're testing res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n'); log.info({ res: res }, 'done response'); // <-- this is the guy we're testing }); server.listen(1337, '127.0.0.1', function() { log.info('server listening'); var options = { port: 1337, hostname: '127.0.0.1', path: '/path?q=1#anchor', headers: { 'X-Hi': 'Mom' } }; var req = http.request(options, function(res) { res.resume(); res.on('end', function() { process.exit(); }) }); req.write('hi from the client'); req.end(); });
在終端運行,你會看到下面的輸出內容:
$ node server.js {"name":"myserver","hostname":"MBP.local","pid":14304,"level":30,"msg":"server listening","time":"2014-11-16T11:30:13.263Z","v":0} {"name":"myserver","hostname":"MBP.local","pid":14304,"level":30,"req":{"method":"GET","url":"/path?q=1#anchor","headers":{"x-hi":"Mom","host":"127.0.0.1:1337","connection":"keep-alive"},"remoteAddress":"127.0.0.1","remotePort":61580},"msg":"start request","time":"2014-11-16T11:30:13.271Z","v":0} {"name":"myserver","hostname":"MBP.local","pid":14304,"level":30,"res":{"statusCode":200,"header":"HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\nDate: Sun, 16 Nov 2014 11:30:13 GMT\r\nConnection: keep-alive\r\nTransfer-Encoding: chunked\r\n\r\n"},"msg":"done response","time":"2014-11-16T11:30:13.273Z","v":0}
開發過程當中可將它做爲一個CLI工具來使用:
正如你所看到的,bunyan給你提供了有關當前進程的許多有用的信息,這些信息在產品環境中都十分重要。另一個便利的功能是你能夠將日誌輸出到一個或多個流中。
沒有提供測試的程序不是一個完整的程序。已經有這麼多的工具能夠幫助咱們來進行測試,實在沒有任何理由不編寫測試用例了:
做爲NPM模塊的約定,你須要在package.json中指定測試命令,如:
{ "name": "express", ... "scripts": { "test": "mocha --require test/support/env --reporter spec --bail --check-leaks test/ test/acceptance/", ... }
而後經過npm test來啓動測試,你根本不用去管如何來調用測試框架。
另一個你須要考慮的是在提交代碼以前務必使全部的測試用例都經過,這隻須要經過一行簡單的命令就能夠作到:
npm i pre-commit --save-dev
固然你也能夠強制執行某個特定的code coverage級別的測試而拒絕提交那些不遵照該級別的代碼。pre-commit模塊做爲一個pre-commit的hook程序能夠自動地運行npm test。
若是你不肯定如何來編寫測試,能夠經過一些在線教程或者在Github中看看那些流行的Node項目它們是如何作的:
爲了避免在生產環境中才發現問題,最好的辦法是在開發過程當中使用靜態分析工具當即就發現這些問題。
例如,ESLint工具能夠幫助咱們解決許多問題:
有關ESLint更多的完整規則能夠查看官方文檔。若是想在實際項目中使用ESLint,你還應該看看它的配置文檔。
有關如何配置ESLint,這裏能夠找到一些例子。
若是你想解析AST(抽象源樹或抽象語法樹)並本身建立靜態分析工具,能夠參考Esprima或Acorn。
若是Node應用程序沒有監視與性能分析,你將對其運行狀況一無所知。一些很重要的東西如event loop延遲,CPU負載,系統負載或內存使用量等你將沒法得知。
這裏有一些特定的服務能夠幫助到你,能夠從New Relic, StrongLoop以及Concurix, AppDynamics等了解到。
你也能夠經過開源模塊如look或結合不一樣的NPM包本身來實現。無論選擇哪一種方式,你都要確保始終都能監測到你的程序的運行狀態,不然你可能會在半夜收到各類詭異的電話告訴你程序又出現這樣或那樣的問題。
一旦程序出現錯誤,你能夠簡單地在代碼中插入console.log來進行debug。問題解決以後刪除console.log調試語句再繼續。
問題是其餘的開發人員(甚至是你本身)可能還會遇到同樣的問題而再重複上面的操做。這就是爲何調試模塊如debug存在的緣由。你能夠在代碼中使用debug function來代替console.log語句,並且在調試完以後不用刪除它們。
其餘開發人員若是遇到問題須要調試代碼,只須要經過DEBUG環境變量來啓動程序便可。
這個小的module具備如下優勢:
來看看官方給出的示例:
// app.js var debug = require('debug')('http') , http = require('http') , name = 'My App'; // fake app debug('booting %s', name); http.createServer(function(req, res){ debug(req.method + ' ' + req.url); res.end('hello\n'); }).listen(3000, function(){ debug('listening'); }); // fake worker of some kind require('./worker'); <!--code lang=javascript linenums=true--> // worker.js var debug = require('debug')('worker'); setInterval(function(){ debug('doing some work'); }, 1000);
若是以node app.js來啓動程序,不會輸出任何內容。可是若是啓動的時候帶着DEBUG標記,那麼:
除了在應用程序中使用它們,你還能夠在一些小的modules中使用它併發布到NPM。與其它一些複雜的logger不一樣,它只負責debugging並且還很好使。
原文地址:https://www.airpair.com/node.js/posts/top-10-mistakes-node-developers-make