2024年Web前端最全实战：基于Node的控制台记事本开发，【2024前端最新学习路线

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• @param callback

*/

function readLine(query, callback) {

const rl = readline.createInterface({

input: process.stdin,

output: process.stdout

});

rl.question(query, (answer) => {

rl.close();

callback && callback(answer)

});

}

/**

• 基础函数1：生成存储内容字符串

*/

function getSaveContent(callback) {

// 定义存储内容

let content = {

title: null,

content: null,

createTime: null,

}

readLine(‘请输入标题：’, (answer) => {

// 保存标题

content.title = answer;

readLine(‘请输入内容：’, (answer1) => {

// 保存内容

content.content = answer1;

// 获取当前时间戳

content.createTime = new Date().getTime();

// 将JSON转换为字符串并返回

callback && callback(JSON.stringify(content));

})

})

}

/**

• 基础函数2：获取所有文件,执行回调函数

*/

function getAllFiles(callback) {

fs.readdir(__dirname + ‘/source/’, ((err, files) => {

if (err) console.warn(err);

else {

callback && callback(files);

}

}))

}

/**

• 基础函数3：操作完成后，选择后续操作

*/

function choice() {

readLine(‘返回主界面请按x,退出请按e:’, answer => {

if (answer === ‘x’) {

showMenu();

} else if (answer === ‘e’) {

exit();

} else {

console.log(‘输入有误，程序结束’)

exit();

}

})

}

/**

• 记录创建

*/

function createFile() {

getSaveContent((content) => {

// 1. 打开文件

fs.open(filesPath + /${new Date().getTime()}.txt, ‘w’, (err, fd) => {

if (!err) {

// 2. 写入文件

fs.writeFile(fd, content, (err) => {

if (!err) {

console.log(写入文件成功);

} else {

throw err;

}

});

// 3. 关闭文件

fs.close(fd, (err) => {

if (!err) {

console.log(文件已经保存并关闭!);

choice();

} else {

throw err;

}

})

}

});

});

}

/**

• 全体查询

*/

function searchAllFiles() {

getAllFiles(files => {

let length = files.length;

for (let i = length - 1; i >= 0; i–) {

console.log(文件${length - i}：${files[i]})

}

choice();

})

}

/**

• 关键词查询

*/

function searchAllFilesTitle() {

getAllFiles(files => {

let length = files.length;

for (let i = length - 1; i >= 0; i–) {

fs.readFile(filesPath + /${files[i]}, (err, data) => {

if (!err) {

let dataString = data.toString();

let dataJson = JSON.parse(dataString);

console.log(文件${length - i}名称,${files[i]}，标题：${dataJson.title})

}

if (i === 0) {

choice();

}

});

}

})

}

/**

• 根据序号查询记录的详细内容

• @param order 序号

*/

function searchFileContent(order) {

getAllFiles(files => {

let length = files.length;

fs.readFile(filesPath + /${files[length - order]}, (err, data) => {

if (!err) {

let dataString = data.toString();

let dataJson = JSON.parse(dataString);

console.log(文件${length - order}名称,${files[length - order]}，详细内容：${dataJson.content})

choice();

} else {

choice();

}

});

})

}

/**

• 根据序号删除记录

• @param order 序号

*/

function deleteFile(order) {

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

e {

choice();

}

});

})

}

/**

• 根据序号删除记录

• @param order 序号

*/

function deleteFile(order) {

最后

[外链图片转存中…(img-Aao4qxWD-1714847072836)]

[外链图片转存中…(img-2GggLeNX-1714847072837)]

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。