- 博客(638)
- 资源 (82)
- 收藏
- 关注
RSS订阅原创 上传一个新菜谱-第二部分
本文介绍了菜谱上传功能的开发过程。首先在model层创建了uploadRecipe方法，处理用户上传的菜谱数据。重点解决了食材信息的提取和格式验证：通过过滤ingredient前缀字段，拆分处理重量、单位和描述信息，并加入错误处理逻辑。然后构建完整的recipe对象，包含标题、图片URL、烹饪时间等字段。最后通过辅助函数sendJSON发送POST请求到API，在请求中包含API密钥进行身份验证。整个流程包含了前端数据验证、后端处理和API通信的实现。
2025-06-12 13:43:25
185
原创 上传一个新菜谱-第一部分
本文介绍了如何创建一个上传菜谱功能的第一部分实现。首先创建了AddRecipeView视图类，处理表单窗口的显示/隐藏逻辑，通过toggleWindow方法实现点击按钮和背景关闭窗口的功能。然后使用FormData API获取表单数据，并通过Object.fromEntries将其转换为对象。在控制器中设置了事件监听，最终实现了点击上传按钮获取表单数据的功能。文章还提到ID等额外字段将在第二部分通过model层处理。整个过程体现了MVC架构和发布订阅者模式的应用。
2025-06-11 10:36:27
268
原创 使用 localStorage 存储书签
本文介绍了如何利用 localStorage 实现食谱书签的本地存储功能。主要内容包括：通过 persistBookmarks 方法将书签数据存入 localStorage；编写 addBookmark 和 deleteBookmark 方法实现书签的添加与删除；使用 init 函数初始化时读取本地存储数据；通过 addHandlerRender 方法解决页面刷新时视图更新问题。最终实现了书签数据的持久化存储和页面刷新后自动加载功能，并展示了浏览器中的实际存储效果截图。该方案通过 localStorage
2025-06-10 11:35:49
217
原创 实现书签-第二部分
本文介绍了如何在书签列表中查找收藏的菜谱。首先，将书签功能单独放入一个文件中，并基于ResultsView进行修改。通过更新选择器和错误信息，确保书签视图能够正确显示。接着，在控制器中引入书签视图，并实现添加和删除书签的功能。为了解决视图更新时选中底色的问题，更新了DOM渲染逻辑。为了减少代码重复，将生成标记的代码提取到单独的PreviewView中，并在书签视图中直接渲染。最后，通过控制渲染条件，确保搜索结果和书签视图能够正确显示数据。
2025-05-21 10:56:29
336
原创 实现书签-第一部分
本文介绍了如何实现一个书签功能，允许用户收藏菜谱并在书签栏中查看。首先，修复了搜索时页面不重置的BUG，确保每次搜索都从第一页开始。接着，在状态管理中定义了一个空数组来存储书签，并在模型中添加了添加和删除书签的功能。通过事件委托的方式，监听用户点击书签按钮的操作，并在控制器中调用相应的模型方法。此外，还实现了书签样式的动态更新，确保用户点击后视图能够及时刷新。最后，通过检查当前菜谱是否已被书签，确保状态的一致性。本文是书签功能的核心实现，后续将进一步完善书签栏的展示功能。
2025-05-16 21:07:20
340
原创 更新食谱份数
这里我们还会发现一些问题，就是更新DOM的时候现在是全部更新，但是有时候我们不需要全部更新，比如增加份数，我们只需要更新部分的DOM就好，后面的文章我们来解决这样的问题。没问题，当我们将份量手动改为一般的时候，下面的食材的数量也相应的改变；之后我们来测试一下，当我们的份数减半的时候，份量会不会减半。将份量手动修改成4时。
2025-03-26 14:36:39
184
原创 实现分页功能-第一部分
目前我们已经可以将用户的搜索展现到页面上了，但是由于搜索的结果太多了，所以我们来实现分页功能来提高用户的体验；第一部分暂时就到这里了，后面我们将实现分页按钮，来实现页面的切换；这里的page在state中设置为1；
2025-03-21 11:17:18
354
原创 实现搜索功能：第一部分
第一部分到这里基本上就结束了，第二部分我们会将所有的搜索结果渲染到页面的侧边栏中！从本节开始，我们将实现我们的食谱小应用的搜索功能！
2025-03-19 23:00:52
484
原创 实施错误信息和成功信息
就目前我们的错误处理策略的话，就是简单的讲错误打印在控制台中；当然这样是不正确的，而且错误的显示也并非非发生在正确错误的地方；下面我们讲实施搜索的相关功能！
2025-03-18 11:02:00
286
原创 MVC_Publish-Subscriber 模式中的事件处理程序
程序启动时，controlRecipes将被传入addHandlerRender;addHandlerRender会侦听事件（addEventListener）,并使用controlRecipes作为回调；
2025-03-17 15:18:23
445
原创 MVC架构
就像房子一样，软件也需要一个结构: 这是我们组织代码的方式；项目永远没有终点！我们需要能够在未来轻松地对其进行修改。我们还需要可以轻松的添加新功能。
2025-02-26 21:34:56
464
原创 监听load和hashchange事件
本篇将是这个程序的核心功能，但是我们的代码并不是非常的清晰的书写，这时候就要谈谈我们在流程图里面所说的架构了！所以当我们点击切换菜谱的时候只需要在url后面加上菜谱的hash就可以获取到这个菜谱的，那么应该怎么做呢?上篇文章中，我们已经将菜谱的数据给拿到，并且已经可以渲染到页面上，本篇我们将为程序添加一些事件；我们通过之前的API也已经发现了，菜谱的获取是通过URL加上菜谱的hash值也获取到的。外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传。这里我们简单的做一个的返回即可。
2025-02-25 22:59:02
417
原创 使用获取数据渲染食谱
上篇文章我们已经成功请求了API，并且从API中成功了获取了好看的数据，本节我们将获取的数据渲染到用户界面上；注：本项目来自于Jonas Schmedtmann创建，文章仅仅作为学习作用！
2025-02-10 11:04:29
559
1
原创 从API中加载食谱
注:本项目来自于Jonas Schmedtmann创建，文章仅仅作为学习作用！现在食谱已经可以被获取了，下篇文章我们就来将数据渲染到用户界面上！本次项目的初始代码放在了如下的链接，可以自行下载获取；拿到初始代码之后，我们先初始化一下。
2025-02-08 14:30:10
357
原创 项目概述与规划 (I)
JavaScript的学习已经接近尾声了，最后我们将通过一个项目来讲我们在JavaScript中学习到的所有都在这个项目中展现出来，这个项目的DEMO来自于Udemy中的课程，作者是Jonas Schmedtmann；
2025-01-26 21:23:14
412
原创 让我们修复一些糟糕的代码-第二部分
这里我们的修复就算完全解决，和之前的代码相比，我们先是通过一般规则的修复，然后再通过比较现代的函数式的编程方式进行修复；但是请记住，这只是一种规则，并不是一种强制性要求，现实代码中可能并不能实现完全的无副作用的编码方式，我们只是需要利用这些规则来规范的我们写代码的风格，避免出现问题的概率；我们仔细的看一下这个函数，这个函数就不是一个纯函数，它会带来副作用，因为它改变了对象内部的数据。本次就上次的代码进行修复，根据我们上篇文章介绍的函数编程那样；我们可以使用第三方库来实现深度冻结，但这里不再演示；
2025-01-24 13:59:12
285
原创 让我们修复一些糟糕的代码-第一部分
上面的很多修改方法都是按照我们上篇文件来做的，看上去是非常的好的，当然这部分代码虽然看上去比之前好很多了，但是还是有一些问题，在后面的文章中再继续的分享；这段代码实现了一个简单的预算管理系统，可以记录支出并检查是否超出限额，同时提供了对大额支出的统计功能。
2025-01-22 15:35:13
362
原创 Babel 和 Polyfilling
Babel是一个广泛使用的JavaScript编译器，主要用于将最新版本的JavaScript（如ES6、ES7等）转化为向后兼容的版本，以便在旧版浏览器或环境中运行。通过使用Babel，开发者可以利用最新的语言特性，而不必担心兼容性问题。如果使用pracle构建工具，默认就是带Babel的功能；Polyfill是一种代码，通常是JavaScript函数或对象，用于为不支持某些功能的环境提供替代实现。换句话说，polyfill可以让旧环境“补全”新的标准功能。
2025-01-20 10:12:23
361
原创 使用 Parcel 和 NPM 脚本进行打包
Parcel是一个零配置的网页应用程序打包工具，主要用于快速构建现代JavaScript应用。注：在JavaScript中，对象是通过引用传递的。如果您在使用的深度复制方法时，只是复制了对象的引用，之后的修改会影响到原始对象和复制对象。这意味着如果您在热重载时更新了某个模块中的对象，而没有正确处理引用，可能会导致对象内容不断增加。所以如果这不是我们需要的，需要你手动的去初始化对象使用npm脚本启动Parcel是一种常见的做法，可以简化开发和构建过程。然后使用npmstar
2025-01-19 19:49:02
736
原创 NPM简介
NPM（NodePackageManager）是Node.js的包管理工具，用于管理和分享JavaScript代码库。它是世界上最大的开源库生态系统之一。
2025-01-18 21:57:09
692
原创 命令行入门
作为一名Web开发人员，一些打包工具，或者npm这类的工具都需要我们使用命令行，比如一个移动、删除、创建文件夹类的简单的命令一定是要会的；命令还有很多很多，但是目前就介绍这一些常用的，只要你常用这些命令，你就能很快的记住这些命令的；
2025-01-17 19:00:18
212
原创 CommonJS模块
处理原生JavaScript模块和模块模式，还有一些第三方的JavaScript模块，CommonJS 模块是一种用于组织 JavaScript 代码的模块化标准，它的主要目的是在服务器端和客户端 JavaScript 中提供一种统一的模块系统。
2025-01-16 10:31:34
205
原创 module模式
比如使用IIFE创建了一个函数，由于之前使用IIFE本身只会在模块加载时候执行一次；但是模块中的导出可以被多次调用，反映了模块的可重用性；
2025-01-15 22:12:30
336
原创 顶层await写法（ES2022）
在ES2022中，JavaScript引入了顶层await的功能，这个功能可以在模块的顶层使用await关键字，而不要在函数内部中使用；这种方式可以简化代码，不需要将异步操作封装在async中；所以我们如果希望被导出的模块延迟的被获取到，可以使用顶级await的方式延迟被拿到的模块；可以阻塞模块的加载，直到所等待的 Promise 被解决或拒绝。的模块中，所有的导入操作（即其他模块的加载）都会被延迟，直到当前模块中所有的顶层。
2025-01-14 20:18:36
302
原创 在ES6模块中导入和导出
这个例子也验证了一点，导入导出并不是创建副本的形式，他们是有实时联系的；所以这里查询的并不是原始的空数组；注：这个输出说明了，导入模块会在所有执行代码之前；
2025-01-13 11:35:41
487
原创 现代JavaScript开发
现代JavaScript开发开发代码的模块化，方便维护和复用。这些模块化可能是我们自己使用的模块也有可能第三方包；第三方包有都可以从npm中下载到（包含开源包，以便我们自己的代码中包含第三方代码，比如react、jQuery，leaflet等等，也包含帮助我们构建应用程序的开发工具，例如实时服务器、Parcel、Babel、vite等等）；构建过程通过构建工具将所有的依赖整合成一个捆绑包，也就是合并成一个文件，这个过程也可以去除或者忽略一些你没有被使用的代码，以便于浏览器加载；这类的工具有
2025-01-11 17:56:01
542
原创 Promise最后的小挑战
编写一个异步函数loadNPause，使用配合来重新实现编码挑战 #2 的功能（只需要实现比较两种版本，思考它们之间的主要区别，并看看你更喜欢哪种方式。记得测试错误处理程序，并在开发工具的网络选项卡中将网络速度设置为 “Fast 3G”。
2025-01-10 09:41:16
213
原创 其他 Promise 组合器：race、allSettled 和 any
Promise.race是一个用于处理多个异步操作的静态方法，它只会返回首先完成的结果，无论这个结果是resolved或者rejected，其他的未完成的就会被忽略；多刷新几次可能会出现不通的结果；
2025-01-09 14:05:12
325
原创 try...catch的基本用法
try…catch可以捕获异步代码中的异常和错误，可以确保程序不会因为未处理的错误终端运行，同时呢也可以很好的去管理错误逻辑；
2025-01-07 10:46:23
456
RCLD-0114 RG-JCOS云管理平台产品日常维护和问题排查(含UDS硬件组件).pptx
2021-04-19
RG-AP系列无线接入点AP_RGOS11.1(5)B9版本Web管理手册(V2.0).pdf
2021-04-14
RCLD-0113 RG-JCOS云管理平台产品常用功能配置(含UDS硬件组件).pptx
2021-04-19
SANGFOR_AC&SG_v6.0_2015年度渠道初级认证培训13_系统诊断工具_上网故障排除丢包模块.xls
2021-04-01
LSI 2308 mpt_SAS2_Windows7_Windows_Server_2008_R2_P20.zip
2021-04-19
CentOs7一直转圈桌面进不去
2023-05-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人