JS备忘录

最新推荐文章于 2024-10-17 19:09:19 发布
原创 最新推荐文章于 2024-10-17 19:09:19 发布 · 254 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

Javascript——手把手教你制作专属备忘录
weixin_56286359的博客
03-17 389
基于JS的事件实现专属备忘录
代码备忘录（经典的代码备忘录）
07-07
这是一款经典的代码备忘录软件，对于程序员来说，可以随时保存必要的代码是非常重要的，本软件有很强大的功能,方便使用。
Vue.js实现备忘录功能
10-16
主要为大家详细介绍了Vue.js实现备忘录功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript学习笔记
08-05 530
那些老旧的实例可能会在 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默 认脚本语言。 JavaScript脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。 通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
js备忘录_1
weixin_33883178的博客
10-10 175
js没有重载，只有同名覆盖，参数任意 所有参数封装在arguments数组中 Uncaught ReferenceError: d is not defined js引擎会当做变量处理 function add(a,b,c){ for (var i in arguments) { alert(arguments[i]); } } add...
vue实现日历备忘录功能
10-16
在本文中，我们将探讨如何使用Vue.js框架来实现一个日历备忘录功能。Vue.js是一个流行的前端JavaScript库，用于构建用户界面。实现日历备忘录功能涉及到多个组件和交互设计，包括日历的展示、日期选择以及备忘录的...
精选资源
html制作的备忘录html制作的备忘录
06-27
7. **事件处理**：如果这个备忘录应用有添加、删除或修改功能，那么可能使用JavaScript进行交互处理。例如，监听`click`事件在按钮被点击时执行特定功能，使用`addEventListener`来添加事件监听器。 8. **存储和...
javascript设计模式 – 备忘录模式原理与用法实例分析
10-15
下面详细解析备忘录模式在JavaScript中的实现原理与用法。 首先，备忘录模式的原理在于它能够在不破坏封装的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态。之后，当需要时，可以将对象恢复到原先保存...
js备忘录
weixin_30699955的博客
04-03 216
==和===的区别：==是等值；===是绝对相等，包括类型 var a = 3; var b = '3'; alert(a == b); alert(a === b); undefined含义 未声明的变量 已声明但没有赋值的变量 不存在的对象属性 判断变量是否undefined两种方法 //方法一，不管obj有没有声明都可以判断，但是存在使用未声明变量的风险： if (typeof (ob...
JS备忘录（个人用）
竹亦叶同的博客
04-21 713
小于760分辨率跳转移动端
JS 常用正则表达式备忘录
前端大全
05-14 257
（给前端大全加星标，提升前端技能）作者：前端小智https://segmentfault.com/a/1190000018963103正则表达式或“regex”用于匹配字...
js简单备忘录
weixin_34055910的博客
09-23 275
<section class="myMemory"> <h3 class="f-tit">记事本</h3> <div class="myform"> <div class="formcon"> <p>标题:</...
JS备忘录（ECMAScript部分）
weixin_51584115的博客
08-24 901
**JavaScript的组成** **ECMAScript**:规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等 **Web APIs** : DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等 2. JavaScript是运行在客户端（浏览器）的编程语言，是**解释型语言**、**动态语言** 3. JS可以书写在直接写在html文件里，用script标签包住，script标签写在``上........
使用JavaScript实现一个简单的备忘录功能
qq_73417698的博客
10-17 351
通过各种方式获取页面相关的元素事件绑定、事件委托（动态绑定事件、减少dom操作）复选框的checked属性、统计事情的数量删除标签、给用户做反馈提示。
JS 备忘录
linshijun33的专栏
01-05 1033
Number js 数值只有 Number,唯一能判断NaN的方法是通过 isNaN() 函数： isNaN(NaN); // true null和undefined 在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示...
JavaScript 备忘录
kangsg219的专栏
03-25 152
[code="javascript"]1. String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); } 例：name.replaceAll("'","") 2. 遍历对象属性值 for (prop in obj){ al...
js 备忘录模式 详解
最新发布
08-13
<think>我们被要求详细解释JavaScript中的备忘录模式，并提供实现示例。 根据引用内容，备忘录模式是一种行为型设计模式，用于捕获对象的内部状态并在以后恢复，而不破坏封装性。 它常用于实现撤销操作、缓存、历史记录等功能。 关键点： 1. 备忘录模式允许在不暴露对象内部细节的情况下保存和恢复状态。 2. 主要角色： - 发起人（Originator）：需要保存状态的对象。 - 备忘录（Memento）：存储发起人内部状态的对象。 - 管理者（Caretaker）：负责保存和恢复备忘录的对象，但不能对备忘录的内容进行操作或检查。 在JavaScript中，我们可以通过以下方式实现： 示例1：一个简单的文本编辑器撤销操作 我们将创建一个文本编辑器（发起人），它可以保存状态到备忘录（Memento），并且有一个管理者（Caretaker）来管理这些备忘录。 步骤： a. 定义备忘录类（Memento），用于存储文本编辑器的状态（文本内容）。 b. 定义发起人类（Originator），它可以创建备忘录并设置状态（设置和获取文本），以及从备忘录恢复状态。 c. 定义管理者类（Caretaker），它保存备忘录的栈（用于实现撤销和重做）。 示例2：引用[4]和[5]中提到的新闻缓存器，用于缓存已经请求过的数据，减少对服务器的请求。 我们将分别实现这两个示例。 示例1：文本编辑器撤销操作 ```javascript // 备忘录类 class Memento { constructor(state) { this.state = state; } getState() { return this.state; } } // 发起人类（文本编辑器） class Editor { constructor() { this.content = ''; } // 设置内容 setContent(content) { this.content = content; } // 获取内容 getContent() { return this.content; } // 保存状态到备忘录 save() { return new Memento(this.content); } // 从备忘录恢复状态 restore(memento) { this.content = memento.getState(); } } // 管理者类 class Caretaker { constructor() { this.mementos = []; // 用于存储备忘录历史 this.currentIndex = -1; // 当前状态的索引 } // 保存状态 saveState(editor) { const memento = editor.save(); // 如果当前索引不在最后，则移除当前索引之后的所有状态（因为进行了新的操作） if (this.currentIndex < this.mementos.length - 1) { this.mementos = this.mementos.slice(0, this.currentIndex + 1); } this.mementos.push(memento); this.currentIndex = this.mementos.length - 1; } // 撤销 undo(editor) { if (this.currentIndex <= 0) { return; // 无法撤销 } this.currentIndex--; editor.restore(this.mementos[this.currentIndex]); } // 重做 redo(editor) { if (this.currentIndex >= this.mementos.length - 1) { return; // 无法重做 } this.currentIndex++; editor.restore(this.mementos[this.currentIndex]); } } // 使用示例 const editor = new Editor(); const caretaker = new Caretaker(); // 第一次输入 editor.setContent('First text'); caretaker.saveState(editor); // 保存状态0 console.log(editor.getContent()); // 'First text' // 第二次输入 editor.setContent('Second text'); caretaker.saveState(editor); // 保存状态1 console.log(editor.getContent()); // 'Second text' // 第三次输入 editor.setContent('Third text'); caretaker.saveState(editor); // 保存状态2 console.log(editor.getContent()); // 'Third text' // 撤销 caretaker.undo(editor); console.log(editor.getContent()); // 'Second text' // 再撤销 caretaker.undo(editor); console.log(editor.getContent()); // 'First text' // 重做 caretaker.redo(editor); console.log(editor.getContent()); // 'Second text' ``` 示例2：新闻缓存器（使用闭包实现） 引用[4]和[5]中的例子，我们创建一个新闻缓存器，用于缓存已经请求过的页面数据。 ```javascript var Page = (function() { // 缓存对象，以页码为键存储数据 var cache = {}; // 返回一个函数，用于获取指定页的数据 return function(page, successCallback) { // 如果缓存中有该页数据，则直接使用 if (cache[page]) { // 显示页面 showPage(page, cache[page]); // 如果有成功回调，则执行 successCallback && successCallback(); } else { // 否则，从服务器获取 // 这里使用jQuery的post方法，实际中可以使用任何AJAX方法 $.post('server_api_url', { page: page }, function(response) { if (response.success) { // 显示页面 showPage(page, response.data); // 缓存数据 cache[page] = response.data; // 执行回调 successCallback && successCallback(); } else { console.error('Error fetching page ' + page); } }); } }; // 显示页面的函数（模拟） function showPage(page, data) { console.log('Showing page ' + page + ' with data: ', data); // 实际中这里会更新DOM } })(); // 使用示例 // 假设有一个下一页按钮 $('#next_page').click(function() { // 假设当前页存储在某个元素上，例如#news_content的data-page属性 var currentPage = $('#news_content').data('page'); var nextPage = currentPage + 1; // 获取并显示新闻 Page(nextPage, function() { // 更新当前页 $('#news_content').data('page', nextPage); }); }); ``` 注意：在第二个示例中，我们使用了闭包来保护缓存对象`cache`，避免被外部直接修改，这符合备忘录模式保护状态封装性的要求。 总结： 备忘录模式在JavaScript中可以通过类的方式（如示例1）或者闭包的方式（如示例2）实现。 它主要用于状态保存和恢复，适用于需要撤销/重做、缓存、历史记录等场景。 注意事项： 1. 备忘录可能会消耗大量内存，因为保存了对象状态的多个副本。 2. 在需要保存大对象或频繁保存状态时，需考虑性能问题。 相关问题： 1. 备忘录模式与状态模式有何区别？ 2. 如何优化备忘录模式的内存使用？ 3. 除了撤销操作和缓存，备忘录模式还有哪些应用场景？</think>### JavaScript 备忘录模式详解 备忘录模式是一种**行为型设计模式**，用于在不破坏对象封装性的前提下，捕获并存储对象的内部状态，以便后续恢复。该模式的核心是将状态保存逻辑与业务逻辑解耦，常用于实现撤销操作、缓存、历史记录等功能[^1][^2]。 #### 核心组件 1. **发起人（Originator）** 需要保存状态的对象（如编辑器、数据管理器）。 2. **备忘录（Memento）** 存储发起人内部状态的对象（如快照）。 3. **管理者（Caretaker）** 负责保存和恢复备忘录（如历史记录管理器）。 #### 实现示例 ##### 示例1：文本编辑器撤销操作 ```javascript // 备忘录：存储编辑器状态 class EditorMemento { constructor(content) { this.content = content; } } // 发起人：文本编辑器 class TextEditor { constructor() { this.content = ""; } // 输入内容 type(text) { this.content += text; } // 保存状态到备忘录 save() { return new EditorMemento(this.content); } // 从备忘录恢复状态 restore(memento) { this.content = memento.content; } getContent() { return this.content; } } // 管理者：历史记录管理 class HistoryManager { constructor() { this.states = []; } pushState(memento) { this.states.push(memento); } popState() { return this.states.pop(); } } // 使用示例 const editor = new TextEditor(); const history = new HistoryManager(); editor.type("Hello"); history.pushState(editor.save()); // 保存状态1 editor.type(" World"); console.log(editor.getContent()); // "Hello World" // 撤销操作 editor.restore(history.popState()); console.log(editor.getContent()); // "Hello" [^3] ``` ##### 示例2：新闻数据缓存器（减少服务器请求） ```javascript // 备忘录模式实现数据缓存 const NewsCache = (() => { const cache = {}; // 存储页面数据 return { fetchPage(page) { // 1. 检查缓存 if (cache[page]) { console.log(`从缓存加载第${page}页`); return cache[page]; } // 2. 无缓存则请求服务器（模拟） console.log(`请求服务器: 第${page}页`); const data = `第${page}页数据`; cache[page] = data; // 存入缓存 return data; } }; })(); // 使用示例 console.log(NewsCache.fetchPage(1)); // 请求服务器 console.log(NewsCache.fetchPage(1)); // 从缓存加载 [^4][^5] ``` #### 应用场景 1. **撤销/重做功能** 如文本编辑器的 `Ctrl+Z` 操作[^2]。 2. **数据缓存** 缓存 API 响应减少网络请求（如示例2）[^4]。 3. **游戏存档** 保存和恢复游戏角色状态。 4. **表单草稿保存** 用户离开页面时自动保存表单状态。 #### 优势与注意事项 | 优势 | 注意事项 | |------|----------| | ✅ 状态封装性：不暴露对象内部细节 | ⚠️ 内存消耗：大量状态可能占用内存 | | ✅ 简化发起人逻辑：状态管理职责分离 | ⚠️ 深拷贝问题：复杂对象需深拷贝 | | ✅ 时间回溯：支持历史状态恢复 | ⚠️ 性能影响：频繁保存可能影响性能 | > 关键设计原则：通过备忘录对象中介状态存取，确保发起人内部状态不被外部直接访问[^3]。 --- ### 相关问题 1. 备忘录模式与状态模式有何区别？ 2. 如何优化备忘录模式的内存占用问题？ 3. 在 Vue/React 中如何实现备忘录模式？ 4. 备忘录模式如何结合本地存储（LocalStorage）实现持久化？ 5. 哪些场景不适合使用备忘录模式？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值