前端进阶（十三）Node.js实战

柔光的暖阳◎ 2022-03-31 02:21 166阅读 0赞

传统意义上的 JavaScript 运行在浏览器上，这是因为浏览器内核实际上分为两个部分:渲染引擎和 JavaScript 引擎。前者负责渲染 HTML + CSS，后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快。

Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎。我们知道 Apache + PHP 以及 Java 的 Servlet 都可以用来开发动态网页，Node.js 的作用与他们类似，只不过是使用 JavaScript 来开发。

从定义上介绍完后，举一个简单的例子，新建一个 app.js 文件并输入以下内容:

var http = require('http');
    http.createServer(function (request, response) {
        response.writeHead(200, {'Content-Type': 'text/plain'}); // HTTP Response 头部
        response.end('Hello World\n'); // 返回数据 “Hello World”
    }).listen(8888); // 监听 8888 端口
    // 终端打印如下信息
    console.log('Server running at http://127.0.0.1:8888/');

这样，一个简单的 HTTP Server 就算是写完了，输入 `node app.js` 即可运行，随后访问 便会看到输出结果。

### 为什么要用Node？ ###

总的来说，Node.js 适合以下场景:

1.  实时性应用，比如在线多人协作工具，网页聊天应用等。
2.  以 I/O 为主的高并发应用，比如为客户端提供 API，读取数据库。
3.  流式应用，比如客户端经常上传文件。
4.  前后端分离。

实际上前两者可以归结为一种，即客户端广泛使用长连接，虽然并发数较高，但其中大部分是空闲连接。

Node.js 也有它的局限性，它并不适合 CPU 密集型的任务，比如人工智能方面的计算，视频、图片的处理等。

以下是Node的几个简单应用，供参考。

（一）爬虫

var https = require('https')
    
    var cheerio = require('cheerio')
    
    var baseUrl = 'https://www.imooc.com/learn/'
    
    var url = 'https://www.imooc.com/learn/348'
    
    var videoIds = [348, 259, 197, 134, 75]
    
    
    
    function filterChapters(html) {
    
        var $ = cheerio.load(html)
    
        var chapters = $('.chapter')
    
        var title = $('hd h2').text()
    
        var number = parseInt($('.js-learn-num').text())
    
        var coursesData = {
    
            title: title,
    
            number: number,
    
            videos: []
    
        }
    
        chapters.each(function (item) {
    
            var chapter = $(this)
    
            var chapterTitle = chapter.find('.chapter-description').text()
    
            var videos = chapter.find('.video').children('li')
    
            var chapterData = {
    
                chapterTitle: chapterTitle,
    
                videos: []
    
            }
    
            videos.each(function (item) {
    
                var video = $(this).find('.J-media-item')
    
                var videoTitle = video.text()
    
                var id = video.attr('href').split('video/')[1]
    
                chapterData.videos.push({
    
                    title: videoTitle,
    
                    id: id
    
                })
    
            })
    
            coursesData.videos.push(chapterData)
    
        })
    
        return coursesData
    
    }
    
    
    
    function printCourseInfo(coursesData) {
    
        coursesData.forEach((courseData) => {
    
            console.log(courseData.number) + '人学过' + courseData.title + '\n'
    
        })
    
    
    
        coursesData.forEach(courseData => {
    
            console.log('###' + courseData.title + '\n')
    
            courseData.videos.forEach((item) => {
    
                var chapterTitle = item.chapterTitle
    
                console.log(chapterTitle + '\n')
    
                item.videos.forEach(video => {
    
                    console.log('【' + video.id + '】' + video.title + '\n')
    
                })
    
            })
    
        });
    
    }
    
    
    
    function getPageAsync(url) {
    
        return new Promise(function (resolve, reject) {
    
            console.log("正在爬取" + url)
    
            https.get(url, function (res) {
    
                var html = ''
    
                res.on('data', function (data) {
    
                    html += data
    
                })
    
                res.on('end', function () {
    
                    resolve(html)
    
                })
    
            }).on('error', function () {
    
                console.log('获取出错')
    
                reject(e)
    
            })
    
        })
    
    }
    
    var fetchCourseArray = []
    
    videoIds.forEach((id) => {
    
        fetchCourseArray.push(getPageAsync(baseUrl + id))
    
    })
    
    
    
    Promise.all(fetchCourseArray).then(function (pages) {
    
        //
    
        var courseData = []
    
        pages.forEach(function (html) {
    
            var courses = filterChapters(html)
    
            courseData.push(courses)
    
        })
    
        courseData.sort((a, b) => {
    
            return a.number < b.number
    
        })
    
        printCourseInfo(courseData)
    
    })

（二）require简易实现

Node中的require是一个常见函数，为此我看了一些资料，了解原理后自己实现了一个简易的require。

'use strict';
    
    function $require(id){
        let fs = require('fs');
        let path = require('path');
    
        let fileName = path.join(__filename, id);
        let pathName = path.basename(fileName);
        $require.cache = $require.cache || {};
        if($require.cache){
            return $require.cache[fileName].module;
        }
        const dirname = path.dirname(filename);  
        let code = fs.readFileSync(__dirname + id, 'utf8');
        
        let module = {id:fileName, exports:{}}
        let exports = module.exports;
        code = `(function($require, module, exports, __dirname, __filename){
            ${code}
        })($require, module, exports, dirname, filename)`
        eval(code)
        $require.cache[filename] = module;
        return module.exports;
    } 
    
    var m1 = $require('./module.js');//要导入的文件模块路径

（三）创建目录实现mkdirs

调用

var mkdirs = require('./module/mkdirs');
    var path = require('path');
    
    mkdirs('./d1/d2/d3/d4/d5', (err) => { console.log(err); });

（四）实现markdown文件监听并转化为html文件

//调用： node 本文件名 要监听的markdown文件
    'use strict'
    
    let fs = require('fs');
    let path = require('path');
    let marked = require('marked');//process markdown...
    const browserSync = require("browser-sync");
    
    // get target markdown file path...
    const target = path.join(__dirname, process.argv[2]);
    
    // after convert to HTML location...
    var filename = target.replace(path.extname(target), '.html');
    
    // get html file name...
    var indexpath = path.basename(filename);
    
    // Start the server
    browserSync({
        notify: false,
        server: path.dirname(target),
        index: indexpath 
    });
    
    fs.watchFile(target, { interval: 200 }, (curr, prev) => {
        if(curr.mtime === prev.mtime){
            return false;
        }
    
        fs.readFile(target, 'utf8', (error, content) => {
            if(error){
                console.log(error)
            }
            var html = marked(content);
            template.replace(`{
       {
       {content}}}`, html);
            fs.writeFile(target.replace(path.extname(target), '.html'), html, 'utf8', (err, css) => {
                html = template.replace('{
       {
       {content}}}', html).replace('{
       {
       {styles}}}', css);
    
                fs.writeFile(filename, html, 'utf8', (err) => {
                    browserSync.reload(indexpath);
                });
            });
        })
    })
    
    let template = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <style>{
       {
       {styles}}}</style>
    </head>
    <body>
      <div class="vs">
        {
       {
       {content}}}
      </div>
    </body>
    </html>
    `;