Nodejs 入門 筆記整理及心得

第一次看完 Node 入門，心裡只有驚呼!!哇!!但是對整個程式碼，並沒有很清楚，只殘留驚呼。於是，開始動起手來整理整個程式碼。希望能加深自己的印象。

1.第一個程式HelloWorld.js
   檔名：HelloWorld.js
   內容：console.log('Hello World');

2.一個完整的Node.js的Web應用
   目標：
    .用戶可以透過瀏覽器使用我們的應用。
    .當用戶請求http://domain/start時，可以看到一個歡迎頁面，頁面上有一個檔案上傳的表
     單。
    .用戶可以選擇一個圖片並送出表單，隨後檔案將被上傳到      http://domain/upload，該頁
     面完成上傳後會把圖片顯示
   (1)一個基礎的http伺服器腳本
        檔名：server.js
        內容：
        var http = require('http');

        http.createServer(function(request,response){
            console.log('Request received.');
            response.writeHead(200,{'Content-Type':'text/plain'});
            response.write('Hello World');
            response.end();
        }).listen(8888);
     
        console.log('Server has started');
   (2)一個基礎的http伺服器腳本(不同寫法)
        檔名：server.js
        內容：
        var http = require('http');

        function onRequest(request,response) {
              console.log('Request received.');
              response.writeHead(200,{'Content-Type':'text/plain'});
              response.write('Hello World');
              response.end();
        }
       
         http.createServer(onRequest).listen(8888);   
         console.log('Server has started');

     (3)一個基礎的http伺服器腳本放進函數start()，並匯出函數start()
        檔名：server.js
        內容：
        var http = require('http');

       function start() {       
          http.createServer(function(request,response){
            console.log('Request received.');
            response.writeHead(200,{'Content-Type':'text/plain'});
            response.write('Hello World');
            response.end();
          }).listen(8888);
     
        console.log('Server has started');
      }
      exports.start = start;
     
        檔名：index.js
        內容：
        var server = require('./server');     
        server.start();

   (4)一個基礎的http伺服器腳本(不同寫法)放進函數start()，並匯出函數start()
      檔名：server.js
      內容：
       var http = require('http');
     
       function start() {
          function onRequest(request,response) {
                console.log('Request received.');
                response.writeHead(200,{'Content-Type':'text/plain'});
                response.write('Hello World');
                response.end();
          }
       
         http.createServer(onRequest).listen(8888);   
         console.log('Server has started');
      }

      exports.start = start;

        檔名：index.js
        內容：
        var server = require('./server');     
        server.start();

3.路由

   (1)能找出瀏覽器請求的URL路徑的http伺服器腳本，並匯出函數start()，再加入加入路由

      檔名：server.js
      內容：
       var http = require('http');
       var url = require('url');
     
       function start(route) {       
          http.createServer(function(request,response){
            var pathname = url.parse(request.url).pathname;
            console.log('Request received.');
            route(pathname);
            response.writeHead(200,{'Content-Type':'text/plain'});
            response.write('Hello World');
            response.end();
          }).listen(8888);
     
        console.log('Server has started');
      }
      exports.start = start;

        路由擴充到index.js
        檔名：index.js
        內容：
        var server = require('./server');
        var router = require('./router');
   
        server.start(router.route);

        檔名：router.js
        內容：
        function route(pathname) {
             console.log('About to route a request for' + pathname);
        }
        exports.route = route;

  (2)能找出瀏覽器請求的URL路徑的http伺服器腳本(不同寫法)，並匯出函數start()，再加入加入路由。

      檔名：server.js
      內容：
       var http = require('http');
       var url = require('url');
     
       function start(route) {
          function onRequest(request,response) {
                var pathname = url.parse(request.url).pathname;
                console.log('Request received.');
                route(pathname);
                response.writeHead(200,{'Content-Type':'text/plain'});
                response.write('Hello World');
                response.end();
          }
       
         http.createServer(onRequest).listen(8888);   
         console.log('Server has started');
      }

      exports.start = start;

        路由擴充到index.js         
        檔名：index.js
        內容：
        var server = require('./server');
        var router = require('./router');
   
        server.start(router.route);

        檔名：router.js
        內容：
        function route(pathname) {
             console.log('About to route a request for' + pathname);
        }
        exports.route = route;

  (3)新增請求處理程序requestHandlers 模組，並匯出 start()、upload()。
       檔名：requestHandlers.js
       內容：
       function start() {
            console.log("Request handler 'start' was called.");
       }
       function upload() {
             console.log("Request handler 'upload' was called.");
       }
       exports.start = start;
       exports.upload = upload;

  (4)將requestHandlers 模組，引入到 index.js 中：
        檔名：index.js
        內容：
        var server = require('./server');
        var router = require('./router');
        var requestHandlers = require('./requestHandlers');   

        var handle = {}
        handle['/'] = requestHandlers.start;
        handle['/start'] = requestHandlers.start;
        handle['/upload'] = requestHandlers.upload;
        server.start(router.route,handle);

   (5)將requestHandlers 模組，當成參數傳遞給伺服器。
       檔名：server.js
       內容：
       var http = require('http');
       var url = require('url');
     
       function start(route,handle) {       
          http.createServer(function(request,response){
            var pathname = url.parse(request.url).pathname;
            console.log('Request received.');
            route(handle,pathname);
            response.writeHead(200,{'Content-Type':'text/plain'});
            response.write('Hello World');
            response.end();
          }).listen(8888);
     
        console.log('Server has started');
      }
      exports.start = start;

     或者

       檔名：server.js  (不同寫法)

       內容：
       var http = require('http');
       var url = require('url');
     
       function start(route,handle) {
          function onRequest(request,response) {
                var pathname = url.parse(request.url).pathname;
                console.log('Request received.');
                route(handle,pathname);
                response.writeHead(200,{'Content-Type':'text/plain'});
                response.write('Hello World');
                response.end();
          }
       
         http.createServer(onRequest).listen(8888);   
         console.log('Server has started');
      }

      exports.start = start;

  (6)將requestHandlers 模組，當成參數傳遞給路由。
        檔名：router.js
        內容：
        function route(handle,pathname) {
             console.log('About to route a request for' + pathname);
             if (typeof handle[pathname] === 'function') {
                handle[pathname]();
             } else {
                console.log('No request handler found for ' + pathname);
             }
        }
        exports.route = route;

    (7)


另外，阻塞處理與非阻塞處理程式碼範例
檔名：testBlock.js
/*阻塞處理*/
function testok01() {
   var st01 = new Date().getTime();
   while (new Date().getTime() < st01 + 3000); 
}
testok01();
console.log("testok01 finish!!");
console.log("Block !!");

檔名：testNonBlock.js
/*非阻塞處理*/
function testok01(ok) {
     setTimeout(() => {
        ok();
     },3000);
}
testok01(function () {
     console.log("testok01 finish!!");
});
console.log("NonBlock !!");

資料來源：

1.Node 入門
2.<<Node 入門>>學習
3.04★Node.js学习★非阻塞处理好难懂
4.Callback(回調)
5.同步(Synchronous)、異步(Asynchronous)、阻塞(Block)、非阻塞(Non-block)