你应该知道的 Node 基础知识

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行两个多月,大家一起交流学习,共同进步。源码共读学的多数是 Node.js ,今天分享一篇 Node.js 基础知识的文章。

一.  Node执行代码

1.1. JavaScript文件执行

如果我们编写一个js文件,里面存放JavaScript代码,如何来执行它呢?

// 1.直接打印一段文字
console.log("我是一段JavaScript代码");// 2.定义一个函数, 调用这个函数
function sum(num1, num2) {return num1 + num2;
}const result = sum(20, 30);
console.log("计算结果:", result);// 3.执行定时器代码
setTimeout(() => {console.log("2s后执行的代码");
}, 2000);

目前我们知道有两种方式可以执行:

  • 将代码交给浏览器执行;

  • 将代码载入到node环境中执行;

演练一:浏览器执行

如果我们希望把代码交给浏览器执行:

  • 需要通过让浏览器加载、解析html代码,所以我们需要创建一个html文件;

  • 在html中通过script标签,引入js文件;

  • 当浏览器遇到script标签时,就会根据src加载、执行JavaScript代码;

index.html文件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./index.js"></script>
</body>
</html>
14518078bdf1cb117b9ce6ca61f219e3.png
浏览器执行结果

演练二:Node执行

如果我们希望把js文件交给node执行:

  • 首先电脑上需要安装Node.js环境,安装过程中会自动配置环境变量;

  • 可以通过终端命令node js文件的方式来载入和执行对应的js文件;

node index.js
18c91eb55fcc94c53e38a53304f60fed.png
Node执行结果

1.2. Node的REPL

什么是REPL呢?感觉挺高大上

  • REPLRead-Eval-Print Loop的简称,翻译为**“读取-求值-输出”循环**;

  • REPL是一个简单的,交互式的编程环境;

事实上,我们浏览器的console就可以看成一个REPL:

70202485f549dce4c0c906b46e8d2468.png
浏览器控制台

Node也给我们提供了一个REPL环境,我们可以在其中演练简单的代码:

68c2a50ce59690af869514143e1f985a.png
REPL演练

二. Node输入输出

2.1. 给node程序传递参数

正常情况下执行一个node程序,直接跟上我们对应的文件即可:

node index.js

但是,在某些情况下执行node程序的过程中,我们可能希望给node传递一些参数:

node index.js env=development coderwhy

如果我们这样来使用程序,就意味着我们需要在程序中获取到传递的参数:

  • 获取参数其实是在process的内置对象中的;

如果我们直接打印这个内置对象,它里面包含特别的信息:

  • 其他的一些信息,比如版本、操作系统等大家可以自行查看,后面用到一些其他的我们还会提到;

3dcfd83fa498ffb37149a597c1b88387.png
process对象

现在,我们先找到其中的argv属性:

  • 我们发现它是一个数组,里面包含了我们需要的参数;

  • 你可能有个疑问,为什么叫argv呢?

2e263b392a68f8925a343dc2c371ff4b.png
argv属性

在C/C++程序中的main函数中,实际上可以获取到两个参数:

  • argc:argument counter的缩写,传递参数的个数;

  • argv:argument vector的缩写,传入的具体参数。

    • vector翻译过来是矢量的意思,在程序中表示的是一种数据结构。

    • 在C++、Java中都有这种数据结构,是一种数组结构;

    • 在JavaScript中也是一个数组,里面存储一些参数信息;

我们可以在代码中,将这些参数信息遍历出来,使用:

// 获取参数
console.log(process.argv);
process.argv.forEach(item => {console.log(item);
});// 结果如下:
// /usr/local/bin/node
// /Users/coderwhy/Desktop/Node/TestCode/04_learn_node/02_给Node传递参数/index.js
// ENV=dev
// coderwhy

2.2. node程序输出内容

console.log

最常用的输入内容的方式:console.log

console.log("hello coderwhy");

console.clear

清空控制台:console.clear

console.clear

console.trace

打印函数的调用栈:console.trace

function test() {demo();
}function demo() {foo();
}function foo() {console.trace();
}test();
adeb715b7aa854f6b745548a773f7c46.png
console.trace结果

还有一些其他的方法,其他的一些console方法,可以自己在下面学习研究一下。

e7533d859e10df45742c786ae7a35edd.png
image-20201008163045395

三. 常见全局对象

3.1. 常见的全局对象

Node中给我们提供了一些全局对象,方便我们进行一些操作:

  • 这些全局对象,我们并不需要从一开始全部一个个学习;

  • 某些全局对象并不常用,某些全局对象我们会在后续学习中讲到;

  • 比如module、exports、require()会在模块化中讲到;

  • 比如Buffer后续会专门讲到;

0fce10cfd7c085b4013928b122b42416.png
全局对象

3.2. 特殊的全局对象

为什么我称之为特殊的全局对象呢?

  • 这些全局对象可以在模块中任意使用,但是在命令行交互中是不可以使用的;

  • 包括:__dirname、__filename、exports、module、require()

__dirname

获取当前文件所在的路径:

  • 注意:不包括后面的文件名

console.log(__dirname);// /Users/coderwhy/Desktop/Node/TestCode/04_learn_node/03_常见的全局变量

__filename

获取当前文件所在的路径和文件名称:

  • 注意:包括后面的文件名称

console.log(__filename);
// /Users/coderwhy/Desktop/Node/TestCode/04_learn_node/03_常见的全局变量/global对象.js

3.3. 常见的全局对象

process对象

process提供了Node进程中相关的信息:

  • 比如Node的运行环境、参数信息等;

  • 后面在项目中,我也会讲解,如何将一些环境变量读取到 process 的 env 中;

console.log(process);

console对象

提供了简单的调试控制台,在前面讲解输入内容时已经学习过了。

  • 更加详细的查看官网文档:https://nodejs.org/api/console.html

定时器函数

在Node中使用定时器有好几种方式:

  • setTimeout(callback, delay[, ...args])callbackdelay毫秒后执行一次;

  • setInterval(callback, delay[, ...args])callbackdelay毫秒重复执行一次;

  • setImmediate(callback[, ...args])callbackI / O事件后的回调的“立即”执行;

    • 这里先不展开讨论它和setTimeout(callback, 0)之间的区别;

    • 因为它涉及到事件循环的阶段问题,我会在后续详细讲解事件循环相关的知识;

  • process.nextTick(callback[, ...args]):添加到下一次tick队列中;

    • 具体的讲解,也放到事件循环中说明;

代码演练:

  • 暂时不用关心执行顺序问题,在后续事件循环中我会讲到;

setTimeout(() => {console.log("setTimtout");
}, 1000);setInterval(() => {console.log('setInterval');
}, 1000);setImmediate(() => {console.log("setImmediate");
});process.nextTick(() => {console.log("process.nextTick");
});

当然,它们有对应的取消定时器的方法:

  • clearTimeout(timeoutObject);

  • clearInterval(intervalObject);

  • clearImmediate(immediateObject)

global对象

global是一个全局对象,事实上前端我们提到的process、console、setTimeout等都有被放到global中:

console.log(process);
console.log(global.process);

为什么结果是一样的呢?

0ae67dafd5261d60a51c63d7111834d4.png
Node的源码

global中还有哪些属性呢?

e1203ab5463f010c8b968820f8dd8b54.png
global其他属性的查看

window和global的区别是什么?

在浏览器中,全局变量都是在window上的,比如有document、setInterval、setTimeout、alert、console等等

在Node中,我们也有一个global属性,并且看起来它里面有很多其他对象。

但是在浏览器中执行的JavaScript代码,如果我们在顶级范围内通过var定义的一个属性,默认会被添加到window对象上:

var name = 'coderwhy';
console.log(window.name); // coderwhy

但是在node中,我们通过var定义一个变量,它只是在当前模块中有一个变量,不会放到全局中:

var name = 'coderwhy';
console.log(global.name); // undefined

更多的全局对象,我们后面用到的时候再详细讲解。


最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。

推荐阅读

1个月,200+人,一起读了4周源码
我历时3年才写了10余篇源码文章,但收获了100w+阅读

老姚浅谈:怎么学JavaScript?

我在阿里招前端,该怎么帮你(可进面试群)

dac1dcc3de49f9a8af03cf7c220df042.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动

a0e823481487edac0fbc8b07080a200c.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react 引入 mobx @babel/core: 7.2.2

为什么80%的码农都做不了架构师&#xff1f;>>> yarn add babel/plugin-proposal-class-propertiesyarn add babel/plugin-proposal-decorators"babel": {"plugins": [["babel/plugin-proposal-decorators", {"legacy": …

面试官问:怎么自动检测你使用的组件库有更新

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12本文来自V同学投稿的源码共读第六期笔记&#xff0c;写得很有趣。现在已经进行到第十期了。你或许经常看见 npm 更新的提示。npm 更新提示面试官可能也会问你&#xff0c;组件库…

使用Microsoft Web Application Stress Tool对web进行压力测试

你的Web服务器和应用到底能够支持多少并发用户访问&#xff1f;在出现大量并发请求的情况下&#xff0c;软件会出现问题吗&#xff1f;这些问题靠通常的测试手段是无法解答的。本文介绍 了Microsoft为这个目的而提供的免费工具WAS及其用法。另外&#xff0c;本文介绍了一种Web应…

2021前端高频面试题整理,附答案

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12若川视野原意是若川的前端视野。但太长了就留下了四个字&#xff0c;不知道的以为关注的不是技术公众号。今天分享一篇慕课网精英讲师河畔一角的好文章~废话不多说&#xff0c;…

OO第二单元作业小结

总结性博客作业 第一次作业 (1)从多线程的协同和同步控制方面&#xff0c;分析和总结自己三次作业的设计策略。 第一次作业为单电梯傻瓜调度&#xff0c;可以采用生产者——消费者模型&#xff0c;是一个有一个生产者&#xff08;标准输入电梯请求&#xff09;&#xff0c;一个…

dribbble加速vpn_关于Dribbble设计的几点思考

dribbble加速vpn重点 (Top highlight)I’d like to start with the following quote from Paul Adam’s “The Dribbbilisation of Design,” a powerful read that examines the superficiality of modern product design portfolios, often containing Dribbble posts that l…

尤雨溪推荐神器 ni ,能替代 npm/yarn/pnpm ?简单好用!源码揭秘!

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12想学源码&#xff0c;极力推荐之前我写的《学习源码整体架构系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

如何了解自己的认知偏差_了解吸引力偏差

如何了解自己的认知偏差Let me introduce you the attractiveness bias theory known as cognitive bias.让我向您介绍称为认知偏差的吸引力偏差理论。 Think about a person with outstanding fashion. It will draw our attention, and maybe encourage us to interact with…

隐马尔可夫模型(HMM)及Viterbi算法

HMM简介 对于算法爱好者来说&#xff0c;隐马尔可夫模型的大名那是如雷贯耳。那么&#xff0c;这个模型到底长什么样&#xff1f;具体的原理又是什么呢&#xff1f;有什么具体的应用场景呢&#xff1f;本文将会解答这些疑惑。  本文将通过具体形象的例子来引入该模型&#xf…

尤大直播分享:vue3生态进展和展望

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12前言10月23日&#xff0c;参加了前端早早聊组织的【vue生态专场】&#xff0c;准备写一波分享方便大家学习。早上有4个话题&#xff1a;volar开发&#xff0c;搭建平台组件开发…

利用Python查看微信共同好友

思路 首先通过itchat这个微信个人号接口扫码登录个人微信网页版&#xff0c;获取可以识别好友身份的数据。这里是需要分别登录两人微信的&#xff0c;拿到两人各自的好友信息存到列表中。 这样一来&#xff0c;查共同好友就转化成了查两个列表中相同元素的问题。获取到共同好友…

女生适合学ux吗_UX设计色彩心理学,理论与可访问性

女生适合学ux吗Colour is an interesting topic, which I feel is often overlooked and sometimes under-appreciated. One of the first things I was taught was the power of colour, how it can have an impact on human emotion, and that there should be purpose behin…

初学者也能看懂的 Vue2 源码中那些实用的基础工具函数

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12想学源码&#xff0c;极力推荐之前我写的《学习源码整体架构系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、…

视觉测试_视觉设计流行测验

视觉测试重点 (Top highlight)I often discuss the topic of improving visual design skills with junior and mid-level designers. While there are a number of design principles the designers should learn and practice, one important skill that is not often consid…

如何给开源项目提过 PR 呢?其实很简单

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12源码共读群里有小伙伴聊到如何给开源项目提PR&#xff0c;所以今天分享这篇文章。你有给开源的库或者框架提过 PR 吗&#xff1f;如果没有&#xff0c;那么今天的文章会教你怎么…

一次回母校教前端的经历

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12已进行了三个月&#xff0c;很多小伙伴都表示收获颇丰。分享一篇武大毕业的耀耀大佬的文章。有些时候会受限于环境影响&#xff0c;特别是在校大学生。所以要融入到积极上进的环…

设计插画工具_5个强大的设计师插画工具

设计插画工具As Product Designers, most likely, we have come across illustrative work. Visual design is one important element in enhancing the user experience. As many gravitate toward attractive looking products, designers are also adapting to the changing…

figma下载_切换到Figma并在其中工作不必是火箭科学,这就是为什么

figma下载We have seen Elon Musk and SpaceX making Rocket Science look like a child’s play. In the same spirit, should design tools be rocket science that is too hard to master? Not at all.我们已经看到埃隆马斯克(Elon Musk)和SpaceX使Rocket Science看起来像是…

npm、yarn、cnpm、pnpm 使用操作都在这了

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12有时候想查个命令&#xff0c;或者换个镜像找了几篇文章才找到&#xff0c;最近闲着没事干&#xff0c;干脆整理一篇文档&#xff0c;以后就不用在网上瞎搜有的还写不全。Usage…

每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器,100行源码揭秘!

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12 参与&#xff0c;已进行三个月了&#xff0c;大家一起交流学习&#xff0c;共同进步。想学源码&#xff0c;极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、…