JUEJIN小册|node原理讲解实例探究|2案例一： [龟兔赛跑] Node 的语言基础 - JS（ES5[6[7[8）

最新推荐文章于 2024-04-01 00:09:44 发布
最新推荐文章于 2024-04-01 00:09:44 发布
阅读量33 收藏
点赞数
分类专栏： |Hadoop|R语言|操作系统| 数据库|云计算概论|计算机网络 前端八股文 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/135903401
版权
本文介绍了如何使用Node.js和JavaScript（ES5/6/7/8）的基础知识来实现一个命令行龟兔赛跑动画。内容包括名词概念解释，如JS、ECMAScript和它们之间的关系，以及Webpack中用到的语法特性，如解构赋值、Symbol和Promise。此外，文章提供了一个简陋的初始代码示例，展示了如何利用箭头函数、Promise和新语法特性来简化代码。最后，提出了一个思考题，引导读者思考如何使兔子停留在随机位置。
摘要由CSDN通过智能技术生成

[命令行动画龟兔赛跑] Node 的语言基础 - JS（ES5/6/7/8）

在这里插入图片描述
本节目标：【实现一个龟兔赛跑小动画】 - 没有金刚钻，不揽瓷器活，必要的 JS 知识是学习 Node 的第一板斧。

名词概念解释

● JS 对 JavaScript 的简称，实际意义与 JavaScript 相同
● JavasScript 通用叫法，代指实现了 ECMAScript 标准的任何语言版本
● ES 对 ECMAScript 的简称，实际意义与 ECMAScript 相同
● ECMAScript 欧洲计算机制造商协会 对 Javascript 语言制定的工业标准，随着时间推移版本不断更新，如 ES3/4/5
● ES2/3/4/5 是语言标准的版本，ES2015/ES2016 是发布标准的年份称谓，如 ES2015/ES6 意义等同
● ES.Next 代指下一个要推出的语言标准，它永远指向下一个，是动态的
1995 年网景浏览器发布 LiveScript，后来改名 JavaScript，再后来提交 JavaScript 到 ECMA 进行标准化，也就有了官方学名 ECMAScript，只是 ECMAScript 这个名字不怎么讨人喜爱，大家仍然习惯叫 JavaScript。
到如今已过去 20 多年了，按道理说，根据 JavaScript 语言进化的速度，到现在应该有至少十几个 ES 版本出来，然后并没

了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
html2md:helloworld开发者社区开源的一个轻量级，强大的html一键转md工具，支持多平台文章一键转换
03-09
通过利用Vue.js和Node.js最佳实践来构建高性能应用程序 基于Node.js平台，快速，开放，极简的Web开发框架 宇宙第一Vue第三方组件库，有不服？ 一种可在Node环境下模拟浏览器的API的库 使用JavaScript将HTML转换为...
Node.js-使用RSS分类订阅稀土掘金
08-10
标题 "Node.js-使用RSS分类订阅稀土掘金" 指出我们将探讨如何利用Node.js技术来构建一个RSS订阅系统，特别关注于稀土掘金（Juejin）这个平台的特定分类内容。RSS（Really Simple Syndication）是一种内容发布协议，...
juejin-markdown-theme-scrolls-light:掘金markdown主题-滚动光
03-30
**掘金Markdown主题-滚动光** 是一个专为掘金平台设计的自定义Markdown阅读主题，名为"羊皮卷"，它提供了独特的视觉体验，旨在优化用户在掘金上阅读Markdown格式文章时的舒适度。这个主题引入了“滚动光”的概念，即...
nodejs-lessions:一个node学习记录仓库
05-18
Node.js 静态文件服务器实战 https://www.infoq.cn/article/2011/11/tyq-nodejs-static-file-server讲述了不依赖任何外部模块实现一个静态文件服务器，初学者看完这个，再去看其它模块的实现方法，基本上就知道了一...
juejin-markdown-themes：https：juejin.cn的Markdown主题
02-04
掘金Markdown主题使用方法在文章内容前加上格式的元信息： ---theme : juejin # Markdown 主题，默认值：juejinhighlight : juejin # 代码高亮主题，默认值：theme 中指定，没有则默认为 juejin---Markdown主题使用...
前端八股文（3）53-84
VAN
09-12 1522
前端八股文
javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com
最新发布
VAN
04-01 1317
适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。
前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎 和 libuv 库，BFF 中间层，服务端渲染，
VAN
11-05 1169
前端学习
JavaScript教程|导出导入，import*,export default,
VAN
01-07 991
这是我们在本节和前面章节中介绍的所有 export 类型：你可以阅读并回忆它们的含义来进行自查：在声明一个 class/function/… 之前：独立的导出：重新导出：export * from “module”（不会重新导出默认的导出）。export {default [as y]} from “module”（重新导出默认的导出）。
JavaScript教程| 私有的和受保护的属性和方法，内部接口和外部接口受保护的 “waterAmount”
VAN
01-02 970
面向对象编程最重要的原则之一 —— 将内部接口与外部接口分隔开来。在开发比 “hello world” 应用程序更复杂的东西时，这是“必须”遵守的做法。为了理解这一点，让我们脱离开发过程，把目光转向现实世界。通常，我们使用的设备都非常复杂。但是，将内部接口与外部接口分隔开来可以让我们使用它们且没有任何问题。
JavaScript教程|F。prototype,构造器，
VAN
12-29 943
在本章中，我们简要介绍了为通过构造函数创建的对象设置 [[Prototype]] 的方法。稍后我们将看到更多依赖于此的高级编程模式。一切都很简单，只需要记住几条重点就可以清晰地掌握了：F.prototype 属性（不要把它与 [[Prototype]] 弄混了）在 new F 被调用时为新对象的 [[Prototype]] 赋值。F.prototype 的值要么是一个对象，要么就是 null：其他值都不起作用。
JavaScript基础教程| 模块 (Module)模块级作用域import.meta,Async 适用于内联脚本,外部脚本，nomodule,构建工具
VAN
01-06 934
一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。模块可以相互加载，并可以使用特殊的指令 export 和 import 来交换功能，从另一个模块调用一个模块的函数：export 关键字标记了可以从当前模块外部访问的变量和函数。import 关键字允许从其他模块导入功能。例如，我们有一个 sayHi.js 文件导出了一个函数：export标记了可以从当前模块外部访问的变量和函数`);……
JavaScript基础教程|Proxy 和 Reflect，私有字段， 内部插槽包装函数：“apply“，不变量，使用 “set” 捕捉器进行验证
VAN
01-07 896
Proxy 是对象的包装器，将代理上的操作转发到对象，并可以选择捕获其中一些操作。它可以包装任何类型的对象，包括类和函数。……然后，我们应该在所有地方使用 proxy 而不是 target。代理没有自己的属性或方法。如果提供了捕捉器（trap），它将捕获操作，否则会将其转发给 target 对象。我们可以捕获：读取（get），写入（set），删除（deleteProperty）属性（甚至是不存在的属性）。函数调用（apply 捕捉器）。
前端学习-函数，形参和实参，函数声明提升，sort函数，递归，浅克隆，深克隆，全局变量，遮蔽效应，设计模式，css盒子模型，BFC,css解决高度塌陷，
VAN
11-10 884
前端学习
JavaScript基础教程|generator,yield,throw,return,
VAN
01-06 878
generator 是通过 generator 函数 function* f(…) {…} 创建的。在 generator（仅在）内部，存在 yield 操作。外部代码和 generator 可能会通过 next/yield 调用交换结果。在现代 JavaScript 中，generator 很少被使用。但有时它们会派上用场，因为函数在执行过程中与调用代码交换数据的能力是非常独特的。而且，当然，它们非常适合创建可迭代对象。
JavaScript基础教程|BigInt,数字运算符，比较运算符，布尔运算代理对
VAN
01-07 859
最近新增的特性这是一个最近添加到 JavaScript 的特性。你能在 https://caniuse.com/#feat=bigint 找到当前支持状态。BigInt 是一种特殊的数字类型，它提供了对任意长度整数的支持。创建 bigint 的方式有两种：在一个整数字面量后面加 n 或者调用 BigInt 函数，该函数从字符串、数字等中生成 bigint。
JavaScript基础教程|Class 基本语法，类继承extends
VAN
01-02 854
所以，class 到底是什么？正如人们可能认为的那样，这不是一个全新的语言级实体。让我们揭开其神秘面纱，看看类究竟是什么。这将有助于我们理解许多复杂的方面。在 JavaScript 中，类是一种函数。// 佐证：User 是一个函数class User {…} 构造实际上做了如下的事儿：创建一个名为 User 的函数，该函数成为类声明的结果。该函数的代码来自于 constructor 方法（如果我们不编写这种方法，那么它就被假定为空）。
JavaScript基础教程|静态属性和静态方法，类扩展自对象，继承静态属性和方法，
VAN
01-02 854
我们可以把一个方法作为一个整体赋值给类。这样的方法被称为 静态的（static）。在 User.staticMethod() 调用中的 this 的值是类构造器 User 自身（“点符号前面的对象”规则）。通常，静态方法用于实现属于整个类，但不属于该类任何特定对象的函数。例如，我们有对象 Article，并且需要一个方法来比较它们。这里 Article.compare 方法代表“上面的”文章，意思是比较它们。它不是文章的方法，而是整个 class 的方法。另一个例子是所谓的“工厂”方法。
JavaScript教程|promise.all,allettled,polyfill,race,any,resolve,reject,promisification.
VAN
01-05 846
在 Promise 类中，有 6 种静态方法。我们在这里简单介绍下它们的使用场景。
目标：从零封装简易低代码组件库 ● 思考&分析如何实现一个低代码库 ● 开发Container, Panel, Table低代码组件（可拖拽可视化编辑） ● 可以基于Element-ui以及antd等框架 ● 参考https://juejin.cn/post/7100717291897094157#heading-0 使用技术：vue3、TypeScript、Element-Plus、vite 写出实现Container, Panel, Table低代码组件（可拖拽可视化编辑）的整个实现过程，将这个项目的实现步骤以及按步骤的代码详细写出来
07-20
实现一个低代码组件库的过程可以分为以下几个步骤： 步骤1：初始化项目 1. 创建一个新的vue3 + TypeScript项目，可以使用vite进行快速初始化。 2. 安装Element-Plus库，用于构建组件样式。 3. 配置基本的项目结构和依赖。 步骤2：创建可视化编辑器 1. 创建一个可视化编辑器的组件，用于拖拽和编辑组件。 2. 组件中通过监听mouse事件实现拖拽功能。 3. 通过组件的props传递组件数据，用于显示和编辑组件的属性。 步骤3：实现Container容器组件 1. 创建一个Container组件，用于容纳其他子组件。 2. 在Container组件中，通过插槽(slot)来动态渲染子组件。 3. 使用可视化编辑器将其他组件拖拽到Container中，并实现布局功能。 步骤4：实现Panel面板组件 1. 创建一个Panel组件，用于展示其他组件的属性和配置。 2. 在Panel中，使用表单元素或者其他控件来展示和编辑组件的属性。 3. 通过双向绑定(v-model)来实现属性的修改和同步。 步骤5：实现Table表格组件 1. 创建一个Table组件，用于展示数据表格。 2. 在Table组件中，通过props接收数据和配置。 3. 使用Element-Plus的Table组件来展示数据表格。 步骤6：使用组件库 1. 在主应用中引入自己开发的组件库。 2. 使用可视化编辑器，拖拽和配置各个组件。 3. 在页面中使用Container容器组件来布局其他组件。 4. 使用Panel面板组件来编辑和配置其他组件的属性。 5. 使用Table表格组件展示数据表格。 以上是一个实现低代码组件库的大致步骤，具体的代码实现过程和细节可以参考参考文章中的示例代码。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值