2024年Nodejs学习item 1 -- 入门手上_ item&lt；1-&gt；，一起学前端

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

好啦，从现在开始逐行分析我们的HelloWorld。

引入模块

var http = require("http");

require方法用来引入一个模块，参数是模块的名字。比如File System模块，可以这么引入：

var fs = require("fs");

我们可以把require()方法当做全局方法使用，但实际上它更像属于某个模块的本地方法，它的文档参考这里：https://nodejs.org/api/globals.html。

require方法返回某个模块的实例，比如require(“http”)就返回一个HTTP实例。HTTP实例的参考文档在这里：https://nodejs.org/api/http.html。

我们看到，HTTP模块有一个方法createServer()，就牵涉到我们的第二行代码了。

创建服务器

HTTP模块的createServer()方法，接受一个方法作为参数，原型为：

http.createServer([requestListener])

requestListener是一个方法，会与http.Server类的request事件关联起来。这样当客户端请求到达时，requestListener就会被调用。

requestListener有两个参数，函数原型如下：

function (request, response) { }

第一个参数request的类型是http.IncomingMessage，实现了Readable Stream接口。
第二个参数的类型是http.ServerResponse，实现了Writeable Stream接口。

Stream的API在这里：https://nodejs.org/api/stream.html。同时，request和response还是EventEmitter，可以发射特定的事件。

EventEmitter的API在这里：https://nodejs.org/api/events.html#events_class_events_eventemitter，后面我们会讲如何使用EventEmitter来发射事件、处理事件。

再回顾一下我们创建server的代码：

http.createServer(
    function(request, response) { 
        response.writeHead(200, {"Content-Type": "text/plain"}); 
        response.write("Hello World!"); 
        response.end(); 
    }
).listen(8000); 

http.createServer返回一个http.Server实例，http.Server的listen方法可以让服务器监听在某个端口上，示例中是8000。

如你所见，我们提供了一个匿名函数给createServer方法。在这个方法中，我们通过response参数向客户端回写了“Hello World!”消息。

分析客户端请求

前面我们分析了http.createServer方法，它的参数是一个带两个参数的方法，一个代表了客户端发过来的请求，一个代表了要回写给客户端的响应。我们来看看request参数。

request是http.IncomingMessage的实例，通过这个实例，我们可以拿到请求参数，比如HTTP方法、HTTP版本、url、头部等，具体的API在这里：https://nodejs.org/api/http.html#http_http_incomingmessage。

我们通过修改HelloWorld.js来看看（另存为HelloWorld2.js）。代码如下：

// 引入http模块
var http = require("http"); 

// 创建server，指定处理客户端请求的函数
http.createServer(
    function(request, response) { 
        console.log("method - " + request.method);
        console.log("version - " + request.httpVersion);
        console.log("url - " + request.url);
        response.writeHead(200, {"Content-Type": "text/plain"}); 
        response.write("Hello World!"); 
        response.end(); 
    }
).listen(8000); 

console.log("Hello World start listen on port 8000");

如你所见，我使用console这个对象来输出了一些调试信息，打印了HTTP方法、版本、url等信息。可以执行node HelloWorld2.js，浏览器访问http://localhost:8000，然后跑到命令行看看输出了什么信息，我这里是这样的：

我们简简单单的HelloWorld已经可以发送一些响应数据给客户端，你在浏览器里能看到“Hello World!”字样。这个响应是通过http.ServerResponse的实例response发送给客户端的。

http.ServerResponse也是一个Stream，还是一个EventEmitter。我们通过它给客户度返回HTTP状态码、数据、HTTP头部等信息。

HTTP模块
在Node.js的HTTP模块，状态行就是通过http.ServerResponse的writeHead方法写给客户端的。writeHead方法原型如下：

response.writeHead(statusCode[, statusMessage][, headers])

这个方法的第一个参数，就是statusCode，也就是200、403之类的数字，剩下的参数是可选的。最后一个参数是headers，你可以在这里使用JSON对象表示法来写一些HTTP头部，比如：{“Content-Type”:”text/plain”,”Content-Length”:11}。第一个可选参数statusMessage用来指定一个状态描述消息，可以不填写。

HTTP头部

头部就是一些key-value对，比如我们在HelloWorld里看到的”Content-Type”，就是用来说明数据类型的头部标签，对应的可能是文本文件、图片、视频、二进制等。类似的还有”Content-Length”，用来指定数据长度。还有很多很多，比如”Date”、”Connection”等。具体还是参考前面的链接吧。

头部还可以使用http.ServerResponse的response.setHeader(name, value)方法来单独设置，一次可以设置一个HTTP头部。

数据

头部之后就是数据了，有些状态码，比如200，后续都会有一些数据。而有些，比如301、404、403、500之类的，多数没有数据。

数据通过http.ServerResponse的write方法来写回给客户端，比如这样：

response.setHeader("Content-Type", "text/html");

这里要提一点，HTTP常见的数据传输编码方式有两种：

• 设置Content-Length，传输固定长度的数据
• 设置Transfer-Encoding头部为chunked，分块传输数据

像我们现在的HelloWorld示例，没有设置Content-Length头部，Node.js的HTTP模块就默认为chunked编码。

我们使用Chrome浏览器的开发者工具来查看网络数据，可以很明确的看到。如下图所示：

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
…
[外链图片转存中…(img-Bg5UkM5I-1714817754845)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666