前端面试基础题：node.js内置模块、Webpack热更新原理…

// 导入http模块
const http = require('http');
​
// 创建web服务器实例
const server = http.createServer();
​
// 为服务器绑定request事件，监听客户端发送的网络请求
server.on('request', (req, res) => {
    console.log('Someone visit our web server');
    const str = `Your request url is ${req.url}, and request method is ${req.method}`;
    console.log(str);
    // 防止中文显示乱码
    res.setHeader('content-Type', 'text/html;charset=utf-8');
    // 向客户端发送指定内容，并结束这次请求的处理过程
    res.end(str);
})
​
// 启动当前web服务器实例
server.listen(80, () => {
    console.log('http server running at http://127.0.0.1')
})

// 简单用法
const express = require('express');
const app = express();

app.get('/user/:id', (req, res) => {
	// req.params存放着通过动态匹配到的参数值id
	// req.query 查询字符串
	res.send('Hello World');  // 发送给客户端的内容
});
app.post('/', (req, res) => {
	res.send('Post Request');
});

app.listen(80, () => {
	console.log('express server running at http://127.0.0.1')
});

// 模块化路由
var express = require('express'); 
var router = express.Router();  // 创建路由对象
router.get('user/list', (req, res) => {
	res.send('Get user list');
});
router.post('user/add', (req, res) => {
    res.send('Add new user');
});
module.exports = router;

const mysql = require('mysql');
const db = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
    password: 'admin123',
    database: 'my_db_01'
});

// sqlStr是要执行的sql语句，其中可以用英文？作占位符
// []中存放对应占位符的数据
db.query(sqlStr, [], (err, results) => {
    if (err) return console.log(err.message);
    if (results.affectedRows === 1) {}
});

ajax('aaa', () => {
    // callback函数体
    ajax('bbb', () => {
        // callback函数体
        ajax('ccc', () => {
            // callback函数体
        })
    })
})

ajax('aaa').then(res => {
    return ajax('bbb')
}).then(res => {
    return ajax('ccc')
})

const promise = new Promise(function (resolve, reject) {
    if (异步操作成功) {
        resolve(value);
    } else {
        reject(error);
    }
});

promise.then(function (value) {}, function (error) {});
promise.then()  // 成功时执行的回调函数
    .catch()  // 指定发生错误时的回调函数
    .finally()  // 不管Promise对象最后状态如何，都会执行的方法

let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb');
let p3 = Promise.resolve('ccc');
let p4 = Promise.reject('ddd');
Promise.all([p1, p2, p3]).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})  // [ 'aaa', 'bbb', 'ccc' ]


Promise.all([p1, p2, p3, p4]).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})  // ddd


Promise.race([p1, p2, p3, p4]).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})  // aaa

class MyPromise {
    constructor(executor) {
        let resolve = () => {};  // 成功
        let reject = () => {};  // 失败
        executor(resolve, reject);  // 立即执行
    }
}

class MyPromise {
    constructor(executor) {
        this.state = 'pending';  // 初始状态为等待态pending
        this.value = undefined;  // 成功的值
        this.reason = undefined;  // 失败的原因

        let resolve = (value) => {  // 成功
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
            }
        };
        let reject = () => {  // 失败
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
            }
        };

        // 若是exector函数报错，直接执行reject
        try {
            exector(resolve, reject);
        } catch (err) {
            return reject(err);
        }
    }
}

class MyPromise {
    constructor (executor) {...},

    then (onFulfilled, onRejected) {
        if (this.state === 'fulfilled') {
            onFulfilled(this.value);
        }
        if (this.state === 'rejected') {
            onRejected(this.reason);
        }
    }
}

class MyPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;

        // 存放成功回调的函数
        this.onResolvedCallbacks = [];
        // 存放失败回调的函数
        this.onRejectedCallbbacks = [];

        let resolve = (value) => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
                // 一旦resolve执行，调用成功回调数组中的函数
                this.onResolvedCallbacks.forEach(fn => fn());
            }
        };
        let reject = (reason) => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
                // 一旦reject执行，调用失败回调数组中的函数
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        };
        
        try {
            exector(resolve, reject);
        } catch (err) {
            reject(err);
        }
    }

    then (onFulfilled, onRejected) {
        if (this.state === 'fulfilled') {
            onFulfilled(this.value);
        }
        if (this.state === 'rejected') {
            onRejected(this.reason);
        }

        // 当状态为pending时
        if (this.state === 'pending') {
            // onFulfilled传到成功回调数组
            this.onResolvedCallbacks.push(() => {
                onFulfilled(this.value);
            });
            // onRejected传到失败回调数组
            this.onRejectedCallbacks.push(() => {
                onRejected(this.reason);
            });
        }
    }
}

class MyPromise {
    constructor (executor) {...},
    then (onFulfilled, onRejected) {
        // 声明返回的promise2
        let promise2 = new Promise((resolve, reject) => {
            if (this.state === 'fulfilled') {
                let x = onFulfilled(this.value);
                resolvePromise(promise2, x, resolve, reject);
            }
            if (this.state === 'rejected') {
                let x = onRejected(this.reason);
                resolvePromise(promise2, x, resolve, reject);
            }
            if (this.state === 'pending') {
                this.onResolvedCallbacks.push(() => {
                    let x = onFulfilled(this.value);
                    resolvePromise(promise2, x, resolve, reject);
                });
                this.onRejectedCallbacks.push(() => {
                    let x = onRejected(this.reason);
                    resolvePromise(promise2, x, resolve, reject);
                });
            }
        });
        // 返回Promise，完成链式
        return promise2;
    }
}

function resolvePromise(promise2, x, resolve, reject) {
    // 循环引用报错
    if (x === promise2) {
        return rejected(new TypeError('Chaining cycle detected for promise'));
    }
    // 防止多次调用
    let called;
    // x不是null，且x是对象或者函数
    if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
        try {
      	    let then = x.then;
      	    // 如果then是函数，就默认是promise了
      	    if (typeof then === 'function') { 
                // 就让then执行 第一个参数是this 后面是成功的回调和失败的回调
                then.call(x, y => {
                    if (called) return;
                    called = true;
                    // resolve的结果依旧是promise,继续解析
                    resolvePromise(promise2, y, resolve, reject);
                }, err => {
                    // 成功和失败只能调用一个
                    if (called) return;
                    called = true;
                    reject(err);
                });
            } else {
                resolve(x);
            }
        } catch (e) {
            if (called) return;
            called = true;
            reject(e); 
        }
    } else {
        resolve(x);
    }
}

then(onFulfilled,onRejected) {
    // onFulfilled如果不是函数，就忽略onFulfilled，直接返回value
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    // onRejected如果不是函数，就忽略onRejected，直接扔出错误
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };

    let promise2 = new Promise((resolve, reject) => {
        if (this.state === 'fulfilled') {
            // 异步
            setTimeout(() => {
                try {
                    let x = onFulfilled(this.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            }, 0);
        }
        if (this.state === 'rejected') {
            // 异步
            setTimeout(() => {
                // 如果报错
                try {
                    let x = onRejected(this.reason);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            }, 0);
        };
        if (this.state === 'pending') {
            this.onResolvedCallbacks.push(() => {
                // 异步
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            });
            this.onRejectedCallbacks.push(() => {
                // 异步
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0)
            });
        };
    });
    // 返回promise，完成链式
    return promise2;
  }

// catch方法
catch(fn){
    return this.then(null, fn);
}

// resolve方法
resolve (val) {
    return new MyPromise((resolve, reject) => {
        resolve(val);
    })
}

// reject方法
reject (val) {
    return new MyPromise((resolve, reject) => {
        reject(val);
    })
}

// race方法
race (promises) {
    return new Promise((resolve, reject) => {
        for (let i=0; i < promises.length; i++) {
            promises[i].then(resolve, reject);
        }
    });
}

// all方法
all (promises) {
    let arr = [];
    let i = 0;
    function processData (index, data) {
        arr[index] = data;
        i++;
        if (i ===promises.length) {
            resolve(arr);
        }
    }
    return new Promise((resolve, reject) => {
        for (let i=0; i < promises.length; i++) {
            promises[i].then(data=>{
                processData(i,data);
            },reject);
        }
    })
}

// 通知模式
function weatherWarning () {
    buildingsite.stopwork();
    ships.mooring();
    tourists.canceltrip();
}

// 发布订阅模式
const EventEmit = function () {
    this.events = {};
    // 绑定事件触发的回调函数
    this.on = function (evtName, callback) {
        const eventHandler = this.events[evtName];
        if (eventHandler) {
            this.events[evtName].push(callback);
        } else {
            this.events[evtName] = [callback];
        }
    };
    // 事件发生时，遍历触发所有回调函数
    this.trigger = function (evtName, ...args) {
        if (this.events[evtName]) {
            this.events[evtName].forEach((eventListener) => {
                eventListener(...args);
            });
        }
    }
}
const weatherEvent = new EventEmit();
weatherEvent.on("warning", function () {
    console.log("buildingsite.stopwork()");
});
weatherEvent.on("warning", function () {
    console.log("ships.mooring()");
});
weatherEvent.on("warning", function () {
    // tourists.canceltrip()
    console.log("tourists.canceltrip()");
});
weatherEvent.trigger("warning");

function* gen(x) {
    const y = yield x + 6;
    return y;
}

function* genOne(x) {
    const y = `这是第一个yield执行：${yield x + 1}`;
    return y;
}

const g = gen(1);
//执行 Generator 会返回一个Object,而不是像普通函数返回return 后面的值

g.next() // { value: 7, done: false }
//调用指针的 next 方法,会从函数的头部或上一次停下来的地方开始执行，直到遇到下一个 yield 表达式或return语句暂停,也就是执行yield 这一行
// 执行完成会返回一个 Object,
// value 就是执行 yield 后面的值,done 表示函数是否执行完毕

g.next() // { value: undefined, done: true }
// 因为最后一行 return y 被执行完成,所以done 为 true

const g2 = genOne(1);
g.next();  // { value: 2, done: false }
g.next();  // { value: '这是第一个yield执行：undefined', done: true }

function* fetch() {
    yield ajax('aaa')
    yield ajax('bbb')
    yield ajax('ccc')
}
let gen = fetch()
let res1 = gen.next() // { value: 'aaa', done: false }
let res2 = gen.next() // { value: 'bbb', done: false }
let res3 = gen.next() // { value: 'ccc', done: false }
let res4 = gen.next() // { value: undefined, done: true } done为true表示执行结束

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

function request(num) {  // 模拟接口请求
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(num * 2);
        }, 1000);
    });
}
async function fn() {
    const res1 = await request(5);
    const res2 = await request(res1);
    console.log(res2);  // 两秒后输出20
}
fn();

Promise.resolve()  // 表示一个fulfilled状态的Promise实例
Promise.reject()   // 表示一个rejected状态的Promise实例

console.log(100);
setTimeout(() => {
  console.log(200);
})
Promise.resolve().then(() => {
  console.log(300);
})
console.log(400);
// 打印结果：100 400 300 200


Promise.resolve().then(() => {
  console.log(1);
  throw new Error('error1')
}).catch(() => {
  console.log(2);
}).then(() => {
  console.log(3);
})
// 打印结果：1 2 3


async function async1 () {
  console.log('async1 start');
  await async2();  // 执行到await code时，会先执行code，再执行await
  console.log('async1 end');
}
async function async2 () {
  console.log('async2');
}
console.log('script start');
setTimeout(function () {
  console.log('setTimeout');
}, 0)
async1()
new Promise (function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('promise2')
})
console.log('script end')
// 打印结果：script start, async1 start, async2, promise1, script end, async1 end, promise2, setTimeout


setTimeout(() => {
  console.log('0');
}, 0)
new Promise((resolve, reject) => {
  console.log('1');
  resolve();
}).then(() => {
  console.log('2');
  new Promise((resolve, reject) => {
    console.log('3');
    resolve();
  }).then(() => {
    console.log('4');  // 同层级
  }).then(() => {
    console.log('5');
  })
}).then(() => {
  console.log('6');  // 同层级
})
new Promise((resolve, reject) => {
  console.log('7');
  resolve()
}).then(() => {
  console.log('8');
})
// 打印结果：1, 7, 2, 3, 8, 4, 6, 5, 0


Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)
// 输出结果：1


Promise.resolve('1')
    .then(res => {
        console.log(res)
    })
    .finally(() => {
        console.log('finally')
    })
Promise.resolve('2')
    .finally(() => {
        console.log('finally2')
        return '我是finally2返回的值'
    })
    .then(res => {
        console.log('finally2后面的then函数', res)
    })
// 输出结果：
// 1
// finally2
// finally
// finally2后面的then函数 2

// 导入生成预览页面的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',  // 指定要用到的模板文件
    filename: 'index.html'  // 指定生成的文件名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
	mode: 'development'，
	entry: 'path.join(__dirname, './src/index.js')',
	output: {
		path: path.join(__dirname, './dist'),
		filename: 'bundle.js'
	},
    plugins: [ htmlPlugin ]，
    module: {
        rules: [
            // 打包处理css文件
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }，
            // 打包处理less文件
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }，
            // 打包处理scss文件
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }，
            //打包处理样式表中的图片和字体文件
            { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940' },
            // 打包处理js文件中的高级语法
            // exclude为排除项，表示babel-loader不需要处理node_modules中的js文件
            { test: /\.js$/, use: 'babel-loader', exculde: /node_modules/ }
        ]
    }
}

module.exports = {
    presets: [ '@babel/preset-env' ],
    plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}