自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

分享学习网络的点点滴滴

学习分享,提升自己,帮助他人!!!

  • 博客(633)
  • 资源 (82)
  • 收藏
  • 关注

原创 开发DOM更新算法

下面的文章我们就要来实现书签的功能了;

2025-03-27 11:01:55 247

原创 更新食谱份数

这里我们还会发现一些问题,就是更新DOM的时候现在是全部更新,但是有时候我们不需要全部更新,比如增加份数,我们只需要更新部分的DOM就好,后面的文章我们来解决这样的问题。没问题,当我们将份量手动改为一般的时候,下面的食材的数量也相应的改变;之后我们来测试一下,当我们的份数减半的时候,份量会不会减半。将份量手动修改成4时。

2025-03-26 14:36:39 163

原创 实现分页功能-第二部分

{1${${${1${${1${1${说明点击触发的逻辑没有问题;

2025-03-24 08:45:27 320

原创 实现分页功能-第一部分

目前我们已经可以将用户的搜索展现到页面上了,但是由于搜索的结果太多了,所以我们来实现分页功能来提高用户的体验;第一部分暂时就到这里了,后面我们将实现分页按钮,来实现页面的切换;这里的page在state中设置为1;

2025-03-21 11:17:18 333

原创 实现搜索功能:第二部分

搜索功能到这里基本上就结束了,但是面对这么多的数据,我们改如何处置呢?后面的章节将讲解分页的相关知识点;

2025-03-20 14:43:39 305

原创 实现搜索功能:第一部分

第一部分到这里基本上就结束了,第二部分我们会将所有的搜索结果渲染到页面的侧边栏中!从本节开始,我们将实现我们的食谱小应用的搜索功能!

2025-03-19 23:00:52 457

原创 实施错误信息和成功信息

就目前我们的错误处理策略的话,就是简单的讲错误打印在控制台中;当然这样是不正确的,而且错误的显示也并非非发生在正确错误的地方;下面我们讲实施搜索的相关功能!

2025-03-18 11:02:00 269

原创 MVC_Publish-Subscriber 模式中的事件处理程序

程序启动时,controlRecipes将被传入addHandlerRender;addHandlerRender会侦听事件(addEventListener),并使用controlRecipes作为回调;

2025-03-17 15:18:23 417

原创 帮助和配置文件

助手和配置文件是软件开发中的重要组成部分,它们有助于组织代码、管理设置以及简化重复性任务。

2025-03-13 10:41:24 157

原创 重构MVC

上一篇文章简单的介绍了一下关于MVC架构的信息,本篇我们将实际的在我们的项目中实际的应用一下;

2025-02-27 23:08:24 898

原创 MVC架构

就像房子一样,软件也需要一个结构: 这是我们组织代码的方式;项目永远没有终点!我们需要能够在未来轻松地对其进行修改。我们还需要可以轻松的添加新功能。

2025-02-26 21:34:56 450

原创 监听load和hashchange事件

本篇将是这个程序的核心功能,但是我们的代码并不是非常的清晰的书写,这时候就要谈谈我们在流程图里面所说的架构了!所以当我们点击切换菜谱的时候只需要在url后面加上菜谱的hash就可以获取到这个菜谱的,那么应该怎么做呢?上篇文章中,我们已经将菜谱的数据给拿到,并且已经可以渲染到页面上,本篇我们将为程序添加一些事件;我们通过之前的API也已经发现了,菜谱的获取是通过URL加上菜谱的hash值也获取到的。外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传。这里我们简单的做一个的返回即可。

2025-02-25 22:59:02 386

原创 使用获取数据渲染食谱

上篇文章我们已经成功请求了API,并且从API中成功了获取了好看的数据,本节我们将获取的数据渲染到用户界面上;注:本项目来自于Jonas Schmedtmann创建,文章仅仅作为学习作用!

2025-02-10 11:04:29 541 1

原创 从API中加载食谱

注:本项目来自于Jonas Schmedtmann创建,文章仅仅作为学习作用!现在食谱已经可以被获取了,下篇文章我们就来将数据渲染到用户界面上!本次项目的初始代码放在了如下的链接,可以自行下载获取;拿到初始代码之后,我们先初始化一下。

2025-02-08 14:30:10 330

原创 项目概述与规划 (I)

JavaScript的学习已经接近尾声了,最后我们将通过一个项目来讲我们在JavaScript中学习到的所有都在这个项目中展现出来,这个项目的DEMO来自于Udemy中的课程,作者是Jonas Schmedtmann;

2025-01-26 21:23:14 401

原创 让我们修复一些糟糕的代码-第二部分

这里我们的修复就算完全解决,和之前的代码相比,我们先是通过一般规则的修复,然后再通过比较现代的函数式的编程方式进行修复;但是请记住,这只是一种规则,并不是一种强制性要求,现实代码中可能并不能实现完全的无副作用的编码方式,我们只是需要利用这些规则来规范的我们写代码的风格,避免出现问题的概率;我们仔细的看一下这个函数,这个函数就不是一个纯函数,它会带来副作用,因为它改变了对象内部的数据。本次就上次的代码进行修复,根据我们上篇文章介绍的函数编程那样;我们可以使用第三方库来实现深度冻结,但这里不再演示;

2025-01-24 13:59:12 265

原创 声明式和函数式 JavaScript 原则

这是两种不同的编写代码的方式,我们也称之为范式;

2025-01-23 10:09:19 404

原创 让我们修复一些糟糕的代码-第一部分

上面的很多修改方法都是按照我们上篇文件来做的,看上去是非常的好的,当然这部分代码虽然看上去比之前好很多了,但是还是有一些问题,在后面的文章中再继续的分享;这段代码实现了一个简单的预算管理系统,可以记录支出并检查是否超出限额,同时提供了对大额支出的统计功能。

2025-01-22 15:35:13 353

原创 编写干净和现代的 JavaScript

编写干净和现代的 JavaScript

2025-01-21 16:25:57 216

原创 Babel 和 Polyfilling

Babel是一个广泛使用的JavaScript编译器,主要用于将最新版本的JavaScript(如ES6、ES7等)转化为向后兼容的版本,以便在旧版浏览器或环境中运行。通过使用Babel,开发者可以利用最新的语言特性,而不必担心兼容性问题。如果使用pracle构建工具,默认就是带Babel的功能;Polyfill是一种代码,通常是JavaScript函数或对象,用于为不支持某些功能的环境提供替代实现。换句话说,polyfill可以让旧环境“补全”新的标准功能。

2025-01-20 10:12:23 335

原创 使用 Parcel 和 NPM 脚本进行打包

Parcel是一个零配置的网页应用程序打包工具,主要用于快速构建现代JavaScript应用。注:在JavaScript中,对象是通过引用传递的。如果您在使用的深度复制方法时,只是复制了对象的引用,之后的修改会影响到原始对象和复制对象。这意味着如果您在热重载时更新了某个模块中的对象,而没有正确处理引用,可能会导致对象内容不断增加。所以如果这不是我们需要的,需要你手动的去初始化对象使用npm脚本启动Parcel是一种常见的做法,可以简化开发和构建过程。然后使用npmstar

2025-01-19 19:49:02 703

原创 NPM简介

NPM(NodePackageManager)是Node.js的包管理工具,用于管理和分享JavaScript代码库。它是世界上最大的开源库生态系统之一。

2025-01-18 21:57:09 640

原创 命令行入门

作为一名Web开发人员,一些打包工具,或者npm这类的工具都需要我们使用命令行,比如一个移动、删除、创建文件夹类的简单的命令一定是要会的;命令还有很多很多,但是目前就介绍这一些常用的,只要你常用这些命令,你就能很快的记住这些命令的;

2025-01-17 19:00:18 201

原创 CommonJS模块

处理原生JavaScript模块和模块模式,还有一些第三方的JavaScript模块,CommonJS 模块是一种用于组织 JavaScript 代码的模块化标准,它的主要目的是在服务器端和客户端 JavaScript 中提供一种统一的模块系统。

2025-01-16 10:31:34 198

原创 module模式

比如使用IIFE创建了一个函数,由于之前使用IIFE本身只会在模块加载时候执行一次;但是模块中的导出可以被多次调用,反映了模块的可重用性;

2025-01-15 22:12:30 326

原创 顶层await写法(ES2022)

在ES2022中,JavaScript引入了顶层await的功能,这个功能可以在模块的顶层使用await关键字,而不要在函数内部中使用;这种方式可以简化代码,不需要将异步操作封装在async中;所以我们如果希望被导出的模块延迟的被获取到,可以使用顶级await的方式延迟被拿到的模块;可以阻塞模块的加载,直到所等待的 Promise 被解决或拒绝。的模块中,所有的导入操作(即其他模块的加载)都会被延迟,直到当前模块中所有的顶层。

2025-01-14 20:18:36 267

原创 在ES6模块中导入和导出

这个例子也验证了一点,导入导出并不是创建副本的形式,他们是有实时联系的;所以这里查询的并不是原始的空数组;注:这个输出说明了,导入模块会在所有执行代码之前;

2025-01-13 11:35:41 459

原创 JavaScript模块概述

解析index.js。执行index.js。

2025-01-12 08:38:18 245

原创 现代JavaScript开发

现代JavaScript开发开发代码的模块化,方便维护和复用。这些模块化可能是我们自己使用的模块也有可能第三方包;第三方包有都可以从npm中下载到(包含开源包,以便我们自己的代码中包含第三方代码,比如react、jQuery,leaflet等等,也包含帮助我们构建应用程序的开发工具,例如实时服务器、Parcel、Babel、vite等等);构建过程通过构建工具将所有的依赖整合成一个捆绑包,也就是合并成一个文件,这个过程也可以去除或者忽略一些你没有被使用的代码,以便于浏览器加载;这类的工具有

2025-01-11 17:56:01 528

原创 Promise最后的小挑战

编写一个异步函数loadNPause,使用配合来重新实现编码挑战 #2 的功能(只需要实现比较两种版本,思考它们之间的主要区别,并看看你更喜欢哪种方式。记得测试错误处理程序,并在开发工具的网络选项卡中将网络速度设置为 “Fast 3G”。

2025-01-10 09:41:16 202

原创 其他 Promise 组合器:race、allSettled 和 any

Promise.race是一个用于处理多个异步操作的静态方法,它只会返回首先完成的结果,无论这个结果是resolved或者rejected,其他的未完成的就会被忽略;多刷新几次可能会出现不通的结果;

2025-01-09 14:05:12 298

原创 并行运行Promise

举个例子,如果现在我们想要获取三个国家的基本信息,但是这个顺序是无所谓的;

2025-01-08 21:07:38 236

原创 try...catch的基本用法

try…catch可以捕获异步代码中的异常和错误,可以确保程序不会因为未处理的错误终端运行,同时呢也可以很好的去管理错误逻辑;

2025-01-07 10:46:23 429

原创 用 async/await 消费 Promise

{

2025-01-06 09:25:57 212

原创 Promise编码小挑战

我们将实现一个函数,该函数返回一个 Promise,用于处理图片加载的异步操作。此外,还会实现暂停执行的wait函数。

2025-01-05 20:42:09 301

原创 将 Geolocation API 转换为 Promise

【代码】将 Geolocation API 转换为 Promise。

2025-01-04 09:25:31 132

原创 构建一个简单的Promise

我们以之前举例的彩票为例,构建一个Promise当然,我们这里是是一个随机数,多刷新几次也就会成功这个示例就是一个简单把异步行为都变成了Promise。

2025-01-03 14:43:13 286

原创 实践:事件循环

1和4肯定优先输出,因为他们会立即方式堆栈的执行上下文中执行,3这个then回调函数会被放入微队列中优先处理,而计时器会放入回调队列中等待微队列执行完毕后再放入调用堆栈中执行。所有回调队列中的代码是无法保证执行效率的,我们可以在用一个Promise来执行一个长时间的一个微队列。上述的代码的输出结果是什么。

2025-01-02 21:10:55 260

原创 异步背后的奥秘:事件循环

经过上述的讲解,就能明白JavaScript这种多线程的模型,可以实现异步代码不阻塞主线程的执行;在我们编程中,一切外部资源的等待,完全交给浏览器和运行时的环境,这样可以有效的节省CPU和内存的资源;利用这种异步操作,也使得JavaScript对于用户交互更加的灵活,也可以更快的响应用户的操作;事件循环和任务队列也可以不创建多个线程的情况下,处理大量的并发请求;

2025-01-01 15:13:43 750

原创 关于Promise的小测验

/ 编码挑战 #1/*在这个挑战中,你将构建一个函数 ‘whereAmI’,该函数仅基于 GPS 坐标显示国家信息。为此,你将使用第二个 API 来对坐标进行地理编码。以下是你的任务:第一部分创建一个函数 ‘whereAmI’,该函数接收纬度值(lat)和经度值(lng)作为输入(这些是 GPS 坐标,示例如下)。对提供的坐标进行“逆地理编码”。逆地理编码的意思是将坐标转换为有意义的位置,比如城市和国家名称。使用这个 API 进行逆地理编码:https://geocode.xyz/api。

2024-12-29 14:32:27 472

思科、华为、H3C命令对照表和IEEE802详解.xls

思科、华为、H3C命令对照表以及IEEE802详解

2021-05-10

MyPower S3120系列交换机配置手册V5.0.chm

MyPower S3120系列交换机配置手册V5.0

2021-05-09

MyPower S3120系列交换机命令手册V5.0.chm

MyPower S3120系列交换机命令手册V5.0

2021-05-09

PDF转换工具PDF转换工具.zip

PDF转换工具PDF转换工具

2021-04-25

VMS3000控制软件.zip

多屏拼接控制器软件

2021-04-24

批量配置脚本命令软件.zip

适合网络工程师批量生产交换机命令

2021-04-23

文本比较工具TextDiff.zip

文本比较工具TextDiff

2021-04-22

长截图工具FSCapture.zip

长截图工具FSCapture

2021-04-22

深信服自检工具.zip

深信服设备自检工具

2021-04-20

深信服升级工具.zip

深信服设备升级工具

2021-04-20

adt-bundle-windows-x86_64-20140321.zip

安卓文档,内含eclipse,sdk等

2021-04-19

haxm-windows.zip

haxm-windows

2021-04-19

锐捷网络光模块参数.xlsx

锐捷光模块参数大全,超级详细

2021-04-19

【锐捷交换机】VSU功能应用部署指导手册8-1.chm

【锐捷交换机】VSU功能应用部署指导手册8-1

2021-04-19

云课堂解决方案产品一本通(V5.4).chm

锐捷云课堂解决方案产品一本通

2021-04-19

云办公融合版解决方案实施一本通(V3.0).chm

锐捷云办公融合版解决方案实施一本通

2021-04-19

锐捷智慧云课堂实施部署一本通(V1.01).chm

锐捷智慧云课堂实施部署一本通

2021-04-19

QS-3108-R6-PD32_Driver_Windows_6.708.07.00.zip

锐捷服务器Raid卡(LSI 2308和3108)驱动windows

2021-04-19

LSI 2308 mpt_SAS2_Windows7_Windows_Server_2008_R2_P20.zip

锐捷服务器Raid卡(LSI 2308和3108)驱动windows

2021-04-19

RG-UDS1022和2000系列服务器用户手册V1.0.pdf

锐捷RG-UDS1022和2000系列服务器用户手册V1.0

2021-04-19

RCLD-0114 RG-JCOS云管理平台产品日常维护和问题排查(含UDS硬件组件).pptx

锐捷云管理平台RCLD-0114 RG-JCOS云管理平台产品日常维护和问题排查(含UDS硬件组件)

2021-04-19

RCLD-0113 RG-JCOS云管理平台产品常用功能配置(含UDS硬件组件).pptx

锐捷云管理平台RCLD-0113 RG-JCOS云管理平台产品常用功能配置(含UDS硬件组件)

2021-04-19

RCLD-0111 RG-JCOS云管理平台产品介绍(含UDS硬件组件).pptx

锐捷云管理平台RCLD-0111 RG-JCOS云管理平台产品介绍(含UDS硬件组件)

2021-04-19

锐捷云课堂解决方案部署运维文档集锦.chm

锐捷云课堂解决方案部署运维文档集锦

2021-04-15

锐捷WLAN产品初阶培训(V3.0).pdf

锐捷WLAN产品初阶培训(V3.0)

2021-04-14

【必读】CHM文件打开显示空白处理办法.docx

CHM文件打开显示空白处理办法

2021-04-14

RG-WLAN产品一本通V5.0.chm

锐捷无线RG-WLAN产品一本通V5.0

2021-04-14

RG-AP系列无线接入点AP_RGOS11.1(5)B9版本Web管理手册(V2.0).pdf

锐捷无线RG-AP系列无线接入点AP_RGOS11.1(5)B9版本Web管理手册(V2.0)

2021-04-14

锐捷RSR系列路由器产品一本通(V5.3).chm

锐捷RSR系列路由器产品一本通(V5.3)

2021-04-12

SANGFOR_WOC_v9.1_2015年度渠道初级认证培训06_PACC操作指南.ppt

深信服WOC_PACC操作指南

2021-04-02

SANGFOR_AC_v11.0_2016年度渠道初级认证培训03_安装部署.ppt

介绍深信服AC设备的安装部署配置

2021-04-02

SANGFOR_AC_v11.0_2016年度渠道初级认证培训02_基础知识_升级客户端6.0使用手册.pdf.pdf

介绍深信服AC升级客户端的步骤和方法

2021-04-02

SANGFOR_AC_v11.0_2016年度渠道初级认证培训02_基础知识.ppt

深信服AC设备基础知识,包括设备初始的一些配置

2021-04-02

SANGFOR_AC_v11.0_2016年度渠道初级认证培训01_基本功能介绍.ppt

介绍深信服AC基本功能

2021-04-02

SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训14_测试工作指引_测试前期_远程硬件测试.pdf

深信服渠道远程硬件测试说明文档

2021-04-02

SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训14_测试工作指引_测试前期_设备健康状态.xls

深信服AC SG设备健康状态检查表

2021-04-02

SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训14_测试工作指引_测试前期_环境确认表.x.xls

深信服AC SG测试实施环境确认表

2021-04-02

SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训14_测试工作指引_测试后期_扫尾工作.xls.xls

介绍了深信服AC的扫尾工作的步骤和方法

2021-04-02

SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训14_测试工作指引.ppt

描述了深信服AC测试工作以及外置数据中心的部署

2021-04-02

SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训13_系统诊断工具_上网故障排除丢包模块.xls

介绍深信服AC中通过系统诊断工具的丢包信息对应的丢包模块以及丢包的原因

2021-04-01

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除