- 博客(633)
- 资源 (82)
- 收藏
- 关注
原创 更新食谱份数
这里我们还会发现一些问题,就是更新DOM的时候现在是全部更新,但是有时候我们不需要全部更新,比如增加份数,我们只需要更新部分的DOM就好,后面的文章我们来解决这样的问题。没问题,当我们将份量手动改为一般的时候,下面的食材的数量也相应的改变;之后我们来测试一下,当我们的份数减半的时候,份量会不会减半。将份量手动修改成4时。
2025-03-26 14:36:39
163
原创 实现分页功能-第一部分
目前我们已经可以将用户的搜索展现到页面上了,但是由于搜索的结果太多了,所以我们来实现分页功能来提高用户的体验;第一部分暂时就到这里了,后面我们将实现分页按钮,来实现页面的切换;这里的page在state中设置为1;
2025-03-21 11:17:18
333
原创 实现搜索功能:第一部分
第一部分到这里基本上就结束了,第二部分我们会将所有的搜索结果渲染到页面的侧边栏中!从本节开始,我们将实现我们的食谱小应用的搜索功能!
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
原创 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
原创 让我们修复一些糟糕的代码-第一部分
上面的很多修改方法都是按照我们上篇文件来做的,看上去是非常的好的,当然这部分代码虽然看上去比之前好很多了,但是还是有一些问题,在后面的文章中再继续的分享;这段代码实现了一个简单的预算管理系统,可以记录支出并检查是否超出限额,同时提供了对大额支出的统计功能。
2025-01-22 15:35:13
353
原创 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开发
现代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
原创 try...catch的基本用法
try…catch可以捕获异步代码中的异常和错误,可以确保程序不会因为未处理的错误终端运行,同时呢也可以很好的去管理错误逻辑;
2025-01-07 10:46:23
429
原创 构建一个简单的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
LSI 2308 mpt_SAS2_Windows7_Windows_Server_2008_R2_P20.zip
2021-04-19
RCLD-0114 RG-JCOS云管理平台产品日常维护和问题排查(含UDS硬件组件).pptx
2021-04-19
RCLD-0113 RG-JCOS云管理平台产品常用功能配置(含UDS硬件组件).pptx
2021-04-19
RG-AP系列无线接入点AP_RGOS11.1(5)B9版本Web管理手册(V2.0).pdf
2021-04-14
SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训13_系统诊断工具_上网故障排除丢包模块.xls
2021-04-01
CentOs7一直转圈桌面进不去
2023-05-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人