node初體驗

時間 2019-11-08

標籤 node 體驗简体版

原文原文鏈接

前言

在學習webpack和vue的過程當中常常會遇到關於node的知識，CommonJS規範等，因此對於前端來講學習node是很是有必要的，因此就有了這一篇node初體驗的文章。javascript

node安裝

這個很少說，在node官網下載安裝包直接安裝就能夠，node預設了npm，npm是一個用javascript寫的包管理器，用於管理模塊，想了解更多能夠到https://www.npmjs.com/上去看，上面有很是多的模塊，下面直接進入正文。html

正文

用node直接擼了一個處理post請求，主要的知識點有函數式編程、路由、阻塞與非阻塞、回調、事件輪詢、內部和外部模塊等等。前端

index.js

var server = require('./server.js'),
    router = require('./router.js'),
    requestHandle = require("./requestHandlers.js"),
    handle = {};

handle['/'] = requestHandle.start;
handle['/upload'] = requestHandle.upload;
handle['/start'] = requestHandle.start;
server.start(router.route,handle);

複製代碼

server.js

function start(route,handle){

    var http = require("http");
    var url = require("url");
    // 請求
    function onRequest(request,respone) {
        var pathname=url.parse(request.url).pathname,
            postData="";
      
        request.setEncoding('utf8');
        request.addListener('data',function(postDatachunk) {
            postData += postDatachunk;
        });
        request.addListener('end',function() {
            route(pathname,handle,respone,postData);
        });
    }

    http.createServer(onRequest).listen(8888);
    console.log("server is start");
}
//導出函數
exports.start = start;
複製代碼

router.js

function route(pathname,handle,respone,postData) {
    console.log('請求來自'+pathname);
    if(typeof(handle[pathname]) === 'function')
    {
        handle[pathname](respone,postData);
    }else{
        console.log("404 not found");
        respone.writeHead(200,{"Content-Type":"text/plain"});
        respone.write("404 not found!");
        respone.end();
    }
}

exports.route = route;
複製代碼

requestHandlers.js

var querystring = require('querystring');
function upload(respone,postData) {
    console.log("這個是upload路由");
    respone.writeHead(200,{"Content-Type":"text/plain"});
    respone.write(querystring.parse(postData).txt);
    respone.end();
};
function start(respone) {
    console.log("這個是start路由");
    var body =  '<html>'+
                '<head>'+
                '<meta charset="UTF-8">'+
                '<style>'+
                '#txt{float:left;width: 250px;height: 50px;border-right:none;border-top-left-radius: 3px;border-bottom-left:3px;}'+
                '#submit{float:left;border-sizing:border-box;width: 100px;height: 50px;background:skyblue;color: #fff;font-size: 18px;}'+
                '</style>'+
                '</head>'+
                '<body>'+
                '<form action="/upload" method="post">'+
                '<input type="text" id="txt" name="txt" />'+
                '<input type="submit" value="提交" id="submit" name="submit"/>'+
                '</form>'+
                '</body>'+
                '</html>';
    respone.writeHead(200,{"Content-Type":"text/html"});
    respone.write(body);
    respone.end();
};

exports.upload = upload;
exports.start = start;
複製代碼

總結

事件輪詢（event loop）

JavaScript是一門單線程語言，也就是說若是遇到大量的任務或者耗時任務，線程就會被堵塞，須要等待其執行完畢，這就會形成頁面假死等狀態，爲了解決這個問題，就須要有eventloop線程，簡單來講咱們能夠新建一個eventloop線程負責主線程與其它進程的通訊，這樣在有大量任務和耗時任務時咱們就交給eventloop線程去處理，通常是各類io操做，處理完畢後返回給主線程並執行預先設置的回調函數，這個模式咱們就叫作非阻塞模式或者異步模式。在此次node初體驗中，我使用了child_process模塊來實現了一個非阻塞操做代碼以下vue

var exex = require("child_process").exec;
function test(respone) {
    exec("find /",{ timeout : 10000, maxBuffer : 200*1024},function(error,stdout,stderr) {
        respone.writeHead(200,{"Content-Type":"text/plain"});
        respone.write(stdout);
        respone.end();
    });
    // 阻塞操做
    // var time = new Date().getTime();
    // while(new Date().getTime()<time + 30000);
    // console.log("xxxxxxxxxxxxxxxxxxxxxxxxxx");
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。