[JavaScript知识库]静态资源和动态资源 + 路由 + 同步/异步API + defer和async --暑假Day12

静态资源和动态资源

静态资源：服务器端不需要处理，可以直接响应给客户端的资源就是静态资源，例如css，js，html文件

动态资源：相同的请求地址不同的响应资源

静态文件访问的代码

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');// 根据当前的请求路径分析出资源类型，将类型通过返回值的方式返回去
const app = http.createServer();

app.on('request', (req, res) => {
    let pathname = url.parse(req.url).pathname;//此时得到的就是纯粹的请求路径

    pathname = pathname =='/' ? '/index1.html' : pathname; 

    let realPath = path.join(__dirname, 'public' + pathname);//__dirname就是请求绝对路径

    let type = mime.getType(realPath);

    fs.readFile(realPath, (error, result) => {//如果文件读取成功，error是空，result是文件内容，如果文件读取失败，error返回一个失败的对象，result是空
        if (error != null) {
            res.writeHead(404, {
                'content-type' : 'text/html;charset=utf-8'
            })
            res.end('文件读取失败');
            return;
        }

        res.writeHead(200, {
            'content-type' : type
        })
        res.end(result);
    })
})

app.listen(3000);
console.log('服务器启动成功');

路由

路由指客户端请求地址与服务器端程序代码的对应关系，就是请求什么响应什么
代码实现

const http = require('http');
const url = require('url');
const app = http.createServer();

app.on('request', (req, res) => {
    const method = req.method.toLowerCase();
    const pathname = url.parse(req.url).pathname;//获取用户的请求路径
    
    res.writeHead(200, {
        'content-type' : 'text/html;charset=utf-8'
    })

    if (method == 'get') {
        if (pathname == '/' || pathname == '/index') {
            res.end('欢迎来到首页')
        }else if (pathname == '/list') {
            res.end('欢迎来到列表页')
        }else{
            res.end('您访问的页面不存在')
        }
    }else if (method == 'post') {
        
    }
})

app.listen(3000);
console.log('服务器启动成功');

同步API，异步API

同步API:只有当前API执行完成后，才能继续执行下一个API
异步API:当前API的执行不会阻塞后续代码的执行

同步API可以从返回值中拿到API执行的结果但是异步API不可以

执行顺序和前面的宏队列微队列里面的一样

因为node.js和js的语法都是遵循ECMAscript，所以基本使用都是可以用的

defer 和 async

defer：script标签如果设置，浏览器会异步下载该文件且不影响后续DOM的渲染，在defer执行结束之后DOMcontentLoaded事件才会开始执行
多个defer会按顺序执行，defer是在所有脚本下载结束之后才进行执行（对页面中的DOM元素依赖，建议使用defer）

async：会使script标签异步加载并在允许的情况下执行，多个async是谁先加载完就执行谁，不按照顺序，DOMcontentLoaded事件可以在async执行之前执行，async是脚本一结束就执行（不依赖于页面中的DOM元素，建议使用async）

defer比async稳定