1.slate.js源码分析(四)- 历史记录机制
2.Redux(4.0.4)源码解析
3.探索React异步解决方案之redux-saga
4.JavaScript之reduce()的码详用法
5.计算机开发|Github上8个很棒的React项目
slate.js源码分析(四)- 历史记录机制
应用中常见撤销与重做功能,尤其在编辑器中,码详其实现看似简单却也非易事。码详为了更好地理解这一机制,码详本文将深入探讨 MVC 设计模式,码详并聚焦于 slate.js 如何巧妙地实现撤销与重做功能。码详仿ppt 源码
MVC 模式是码详一种经典的软件架构模式,自 年提出以来便广为应用。码详在 MVC 模式中,码详模型(Model)负责管理数据,码详视图(View)展示数据,码详而控制器(Controller)则负责处理用户输入与模型更新。码详
在撤销与重做功能的码详设计中,通常有两种实现思路。码详其中一种是码详通过 Redux 等状态管理库实现,而 slate.js 则采用了一种更为直接的方法。本文将重点介绍 slate.js 的实现策略。
撤销功能允许用户回溯至之前的页面状态,而重做功能则让用户能够恢复已撤销的操作。在执行操作后,当用户请求撤销时,系统会抛弃当前状态并恢复至前一状态。对于复杂的操作,如表格的复制与粘贴,系统的处理逻辑则更为精细,能够跳过不需要记录在历史记录中的状态,确保撤销操作的精准性。
slate.js 的状态模型主要基于树状的文档结构,通过三种类型的操作指令来管理文档状态:针对节点的修改、光标位置的jquery dragsort源码调整以及文本内容的变更。对节点与文本的修改,可通过特定指令来实现,而光标操作则通常直接修改数据。借助这九种基本操作,富文本内容的任何变化都能被准确地记录与恢复。
在实现撤销功能时,关键在于如何根据操作指令中的信息推导出相应的撤销操作。例如,撤销对节点的修改操作,只需对记录的操作进行逆向操作即可。相比之下,重做功能则相对简单,只需在撤销操作时记录下指令,以便在后续操作中恢复。
操作的记录以数组形式进行,便于后续的撤销与重做操作。通过合理的指令与数据模型设计,复杂的操作最终被拆解为简单且可逆的原子操作,确保了功能的高效与稳定。
总结而言,通过精心设计的指令与数据模型,撤销与重做功能得以实现,使应用在面对用户操作时能够灵活应对,提供无缝的用户体验。此外,本文还附带了一个招聘信息,百度如流团队正面向北京、上海、深圳等地招聘,导航栏 源码欢迎有志之士加入。
参考资料包括:Web 应用的撤销重做实现、slatejs。
Redux(4.0.4)源码解析
Redux源码解析 Redux源代码解析旨在清晰展示其核心组件及工作流程,力求用最简洁的语言阐述每个关键部分的功能。Redux提供了一个状态管理库,以管理应用的全局状态。以下是Redux核心组件的主要解析: createStore.js export default function createStore(reducer, preloadedState, enhancer) createStore函数是Redux的核心,负责创建一个状态存储对象。它可以接受三个参数:reducer(减少操作函数)、预加载状态(初始状态)和增强器(可选参数,用于添加额外功能)。 getState 获取当前状态,操作简单直接。 subscribe 向监听列表中添加监听函数,返回取消监听函数。在调用dispatch时订阅或取消订阅,不会影响正在进行的dispatch。下一次dispatch时,将使用订阅列表的最新快照。 dispatch 执行reducer获取最新状态,并依次执行监听队列中的函数。 replaceReducer 替换当前的reducer。执行后,dispatch一次更新状态。一般不常用。 observable 未见实际应用,可能用于特定场景。使用了symbol-observable包,雷锋网 源码对于熟悉该包的开发者来说,此部分可能有更多探索空间。 utils 包括actionTypes.js、isPlainObject.js、warning.js等辅助函数。actionTypes.js定义了Redux保留的私有操作类型,用于确保操作的正确处理。isPlainObject.js用于判断action对象是否为原生对象。warning.js用于抛出错误,保持代码质量。 applyMiddleware.js 通过createStore(reducer,applyMiddleware(...middleware))执行,返回带有中间件增强的dispatch。精简后,代码更加清晰。 compose.js 实现中间件的串联,依次增强dispatch流程。使用函数式编程技巧,代码简洁高效。 bindActionCreators.js 将单个或多个ActionCreator转化为dispatch(action)的函数集合,简化Action的使用方式。 combineReducers.js 将多个reducer整合为一个,调整state结构,便于管理和操作。 整体而言,Redux的源码解析展示了其如何通过一系列核心组件实现状态管理的流程,从创建store到管理state、执行reducer、中间件串联,直至整合多个reducer,分类源码下单提供了一套高效、模块化的状态管理方案。理解这些组件及其功能是掌握Redux并能灵活应用的关键。探索React异步解决方案之redux-saga
redux-saga是什么? Redux-saga是一个用于简化Redux应用程序中异步操作的库,目标是更优雅地管理副作用、提高执行效率、方便测试并在处理错误时提供更好的支持。它的设计基于康奈尔大学的研究,旨在解决分布式系统中长时运行事务的数据一致性问题。 什么是SideEffects? 在编程中,副作用指的是程序与外部世界(如用户、文件系统、网络上的其他计算机)进行交互的方式。在JavaScript中,这通常包括异步网络请求和浏览器缓存的读取等。 如何区别saga与thunk? 尽管都作为Redux的中间件,saga和thunk在实现上和设计理念上存在差异。saga通过命令/回答模式进行通信,每个saga都是生成器函数,以同步的方式处理异步逻辑。而thunk则通过将函数作为action传递给store,支持异步操作。 学习saga使用 saga提供了两个主要的中间件API,用于创建和运行saga。在安装依赖并关联store后,可以利用这些API来实现saga的运行。 saga中的关键概念 1. Task: 是saga运行的结果,提供执行和控制的接口。2. Channel: 用于在saga间传递消息,消息在被接收者请求前被缓存。
3. Buffer: 实现了消息的缓存策略。
4. SagaMonitor: 用于启动和监控saga事件。
saga的Effect创建器 Effect是包含执行指令的对象,用于指导saga中间件执行特定任务。例如,take用于监听特定action,put用于在store中发起action,call用于调用外部函数等。 saga的辅助函数和组合器 提供了一组函数来简化saga的编写,如TakeEvery、TakeLatest等,用于根据action模式生成saga。 Redux-Saga的测试 得益于saga的细粒度和低耦合性,使其在单元测试中表现出色。例如,可以测试特定的saga响应特定的action。 Redux-Saga使用技巧 1. 重试Ajax请求:在请求失败后自动重试。2. 撤销操作:确保在操作撤销时可以回滚到原始状态。
参考资料Redux-Saga 漫谈
Saga Pattern
Redux-Saga官方文档
Why saga
手写Redux-Saga源码
JavaScript之reduce()的用法
首先,参考了这位大佬的总结,敲了一遍,收获很大。记录下来。参考链接背景:之前是接触vue源码的时候,发现使用reduce的地方很多。当时也是在看别人分享,简单带过,发现很好用。简单研究后,很少用到。导致理解不深。今天碰到到使用场景,特意花时间研究了一番,可以说理解的很到位了。
语法arr.reduce(function(prev,cur,index,arr){ ...},init);其中,\arr表示原数组;\prev表示上一次调用回调时的返回值,或者初始值init;\cur表示当前正在处理的数组元素;\index表示当前正在处理的数组元素的索引,若提供init值,则索引为0,否则索引为1;\init表示初始值。这个初始值在很多技巧上要用到,要重点留意
在实际使用当中,其实常用的参数只有两个:prev和cur。结合例子来分析一番。
实例以下举的例子除了用reduce来实现,还有很多其他的方法。不过使用reduce有它独有的技巧性和方便。
1、求数组的和方式一:
letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);方式二:
letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;},0)console.log(sum);注意:方式二,由于传入了初始值0,所以pre的初始值就是0,cur的值,就是数组的第一个值为3;如果不传初始值的话,就如方式一,这时,pre的值是3,cur的值是4;相加后为7,作为下一轮的pre的值,cur是5,依次类推下去。
2、求数组的最大值方式一:
letarr=[1,4,5,6,9,2,4,6];letmax=arr.reduce((pre,cur)=>{ returnMath.max(pre,cur)})console.log(max);方式二:
letmax2=arr.reduce((pre,cur)=>{ returnpre>cur?pre:cur;})console.log('max2:',max2);3、给数组去重letnewArr=arr.reduce((pre,cur)=>{ pre.indexOf(cur)===-1&&pre.push(cur)returnpre},[])console.log(newArr);进阶用法1.求字符串中字幕出现的次数conststr='sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';constres=str.split('').reduce((pre,cur)=>{ pre[cur]?pre[cur]++:pre[cur]=1;returnpre},{ })console.log('汇总次数:',res);2.数组转数组letarr1=[2,3,4,5,6,7];letnewArr1=arr1.reduce((pre,cur)=>{ pre.push(cur*cur)returnpre;},[])console.log('数组转数组:',newArr1);3.数组转对象letstreams=[{ name:'博士',id:1},{ name:'硕士',id:2},{ name:'本科',id:3}];letobj1=streams.reduce((pre,cur)=>{ pre[cur.id]=cur;returnpre;},{ })console.log('数组转对象:',obj1);高级用法1.多维的叠加执行操作例子:各科成绩占比不一样,求结果
constresult=[{ subject:'math',score:},{ subject:'chinese',score:},{ subject:'english',score:},];constdis={ math:0.5,chinese:0.2,english:0.4};letres2=result.reduce((pre,cur)=>{ returndis[cur.subject]*cur.score+pre},0)console.log('多维叠加:',res2);加大难度:商品对应不同国家汇率不同,求价格
letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);、扁平一个二维数组letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);1多维数组扁平化
3、对象数组去重letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);、compose函数reduxcompose源码实现
letarr=[3,4,5,6,9,2,4,6];letsum=arr.reduce((pre,cur,index,arr)=>{ //console.log('index:',index);//console.log('arr:',arr);returnpre+cur;})console.log(sum);3计算机开发|Github上8个很棒的React项目
来自公众号:前端充电宝 今天分享 Github 上 8 个很棒的 React 项目,旨在通过学习这些项目的源码,帮助大家更好地理解 React,并编写出更优雅的 React 代码! 概览: 1. React Tetris React Tetris 是一个使用 React、Redux、Immutable 制作的俄罗斯方块游戏。它是一个适用于 React 学习者的练习项目,通过优化和打磨细节,可以提升开发者对 React 的掌握。项目介绍中包含作者的开发想法,提供中文资源,非常值得借鉴。 Github:github.com/chvin/react... 2. Kutt.it Kutt 是一个现代的 URL 缩短器,支持自定义域名。它集成 Node.js、Express、Passport、React、TypeScript、Next、Easy Peasy、styled-components、Recharts、PostgreSQL、Redis 等技术,提供功能丰富的 URL 缩短服务。 Github:github.com/thedevs-netw... 3. Win in React 通过这个项目,开发者使用 React、CSS (SCSS) 和 JS 等标准 Web 技术在浏览器中复制 Windows 桌面体验。该项目展示了在 Web 上重现操作系统的可能性。 Github:github.com/blueedgetech... 4. JoL-player JoL-player 是一个功能强大的 React 播放器,通过高质量的 React 组件、TypeScript 开发和完整的类型定义文件,提供国际化语言、强大的 API 和功能。支持 React +版本。 Github:github.com/lgf/JoL-p... 5. Take Note TakeNote 是一个 Web 笔记应用,提供搜索、多光标编辑、链接笔记、语法高亮、键盘快捷键等功能。它基于 TypeScript、React、Redux、Node、Express 等技术创建,支持本地存储和 zip 格式的下载。 Github:github.com/taniarascia... 6. Fiora Fiora 是一个基于 Node.js、React 和 socket.io 的聊天应用程序,支持添加好友、群聊、设置主题、消息提醒等,适用于 Windows / Linux / macOS 系统。 Github:github.com/yinxin/fi... 7. Todoist clone Todoist clone 是一个使用 create-react-app 构建的 Todoist 的简化版,包含 React(自定义 Hooks、context)、Firebase 和 React 测试库。项目使用 SCSS (CSS) 和 BEM 命名方法,旨在帮助开发者更好地理解 React。 Github:github.com/karlhadwen/t... 8. Jira Clone Jira Clone 是一个使用 React 开发的简化版 Jira 工具,提供交互式用户界面。它使用 React 以及 webpack、Node.js、ESLint、styled-components 和 cypress 构建,支持最新的 React 特性。 Github:github.com/oldboyxx/jir...