皮皮网

1.PIXI.JS源码解析：Ticker.js
2.dayjs源码解析（一）：概念、源码locale、源码constant、源码utils tags
3.如何学好JS？
4.dayjs源码解析（二）：Dayjs 类
5.flv.js源码知识点（下） FLV格式解析
6.slate.js源码分析（四）- 历史记录机制

PIXI.JS源码解析：Ticker.js

       本文聚焦于剖析PIXI.JS的源码核心模块，尤其探讨了Ticker.js文件中包含的源码功能实现，解释了Ticker和TickerListener如何协同工作以处理动画渲染和执行回调。源码pm插件源码

       在使用PIXI.JS时，源码初次接触的源码关键代码涉及实例化Application，该实例用于添加精灵图和创建动画。源码核心在于Application中的源码内部变量_ticker，它负责动画循环的源码执行。_ticker对象通过start方法启动循环，源码同时ticker.add方法允许将渲染函数添加到渲染队列中，源码确保每次循环时都能触发渲染函数，源码更新画布上的源码图像。

       Ticker.js作为核心模块，包含了Ticker和TickerListener的逻辑。ticker.add方法将渲染函数添加到渲染队列中，而ticker.start方法则启动循环，触发队列中的渲染函数执行。ticker.remove方法用于移除队列中的函数。UPDATE_PRIORITY.LOW参数允许用户调整回调函数的执行顺序。

       Ticker内部维护了一个队列，由_head和_tick变量管理。_head作为队列的源头，而_tick则负责循环执行，通过requestAnimationFrame实现。每次循环执行前，需要确保三个条件满足：_ticker已启动、_requestId为null以及队列中存在有效回调。当这三个条件满足时，循环得以启动并执行。

       每次循环时，_tick执行内部逻辑以更新图像。在循环过程中，_head.next指向下个回调，形成链式执行。_addListener方法用于内部管理回调函数的添加与移除，允许用户通过控制参数来影响回调函数的执行顺序与执行次数。

       TickerListener作为回调函数链的智协作源码管理器，负责链接并执行一系列回调函数。当向应用实例中添加回调时，会自动插入到TickerListener队列中，确保在每次循环时按照特定顺序执行所有回调。TickerListener内部方法确保了回调的正确执行顺序与执行次数，同时提供了灵活的插入策略，允许用户根据需要调整回调函数的位置。

       总之，Ticker.js通过Ticker和TickerListener的协作，实现了高效、灵活的动画循环和回调执行机制，为开发者提供了强大的动画控制能力，简化了渲染和动画管理过程。

dayjs源码解析（一）：概念、locale、constant、utils tags

       深入剖析 Day.js 源码（一）：概念、locale、constant、utils

       Day.js 是一款轻量级的时间库，由饿了么的开发大佬 iamkun 维护，主打无需引入过多依赖，以减少打包体积的特性。本文将通过解析 Day.js 的源码，揭示其结构与功能的奥秘，旨在为开发者提供深入理解与应用 Day.js 的工具。

       目录概览

       本文将分五章展开 Day.js 的源码解析，分别从代码结构、基础概念、时间标准、语言（文化）代码以及 locale、constant、utils 的实现进行深入探讨。我们将逐步揭开 Day.js 的核心逻辑与设计思路。

       代码结构与依赖分析

       Day.js 的源代码目录结构简洁明了，主要依赖集中在入口文件 src/index.js 中。此文件依赖链简单，未直接引用 locale 和 plugin 目录下的语言包与插件，体现出 Day.js 优化体积、编译 less 源码按需加载的核心优势。

       基础概念与时间标准

       在解析源码之前，理解以下基础概念至关重要，包括时间标准、GMT、UTC、ISO 等。这些标准与概念为后续分析提供了背景知识。

       时间标准解释

       格林尼治平均时间（GMT）与协调世界时（UTC）是本文中的核心时间概念。GMT 作为本初子午线上的平太阳时，而 UTC 则是基于原子时标准，与格林威治标准时间（GTM）关系密切。本文详细解释了 UTC 的定义、用途与与 0 度经线平太阳时的关系。

       ISO 标准

       ISO 是国际标准化组织推荐的日期和时间表示方法。在 JavaScript 中，Date.prototype.toISOString() 方法返回遵循 ISO 标准的字符串，以 UTC 时间为基准。

       语言（文化）代码与 locale

       不同语言对时间的描述各具特色，Day.js 通过 locale 实现了多语言支持，用户可根据需求引入相应的语言包。本文介绍了语言代码与 locale 的关联，以及如何按需加载特定语言。

       constant 与 utils

       src/constant.js 和 src/utils.js 分别负责存储常量与工具函数。constant 文件中包含了时间单位与格式化的正则表达式，而 utils.js 则封装了一系列实用工具函数，用于简化时间操作。

       总结与展望

       本文完成了 Day.js 源码解析的第一部分，深入探讨了概念、locale、constant、utils 的实现。接下来，我们将分析 Day.js 的核心文件 src/index.js，解析 Dayjs 类的实现细节。欢迎关注后续内容，期待与您共同探索 Day.js 的更多奥秘。

如何学好JS？

       å­¦ã€Šé”‹åˆ©çš„jquery》（有源代码），就会用很多js功能了，别看javascript第五版那本书，刚开始就看，前7章没有有用的，打基础，看看《锋利的jquery》，就能直接投入使用，然后在由果至因(js),就简单多了，学也要学java，c++太难

dayjs源码解析（二）：Dayjs 类

       上篇文章讲述了dayjs的基础知识、locale、ar导航源码constant和utils，本文将继续深入解析dayjs的核心部分——src/index.js中的Dayjs类。

       src/index.js文件结构清晰，按照以下步骤构建：

       然而，这里存在两个疑问，可能是为了缩减代码体积，由@iamkun提出。

       现在开始正式分析代码。

       locale相关全局定义

       首先默认导入了locale/en.js英文的locale，然后使用L存储当前使用的locale名字，使用Ls（locale Storage）存储locale对象。

       工具补充

       定义了一个工具方法parseLocale。这个方法处理以下几种情况：

       然后将定义好的parseLocale方法补充到Utils中。

       相关方法

       在Dayjs类中，关于locale的方法有两个，实例私有方法$locale用来返回当前使用的locale对象；实例方法locale本质上就是调用了parseLocale方法，但最后返回的是新的改变了locale的Dayjs实例。

       注意：在dayjs中，许多操作都使用clone()方法来返回新的Dayjs实例，这也是这个库的优点之一。

       最后同样将parseLocale方法补充到Dayjs类的静态方法中。

       补充Utils

       上一节和前文中已经分析了一些Util工具，这里将其补充完整：

       注意：这些工具方法没有统一定义在utils.js文件中的原因是用到了index.js作用域中的一些变量。

       需要特别关注的是wrapper方法，在Dayjs类中大量应用了该方法，其实是通过date和原实例封装了一个新实例，新实例和原实例的主要区别就是关联的时间不同。

       Dayjs类

       Dayjs类是整个dayjs库的核心，可以给其定义的实例方法分类，也可以查看官网的文档分类。

       解析都写在了代码的注释里：

       原型链

       通常来说，定义在实例中的方法应该在原型链上，但有几个与时间有关的setter/getter方法相似，所以单独将原型链写在了上面。

       这几个方法都是不传参数时为getter，传参数时为setter。

       静态属性

       还有一些方法和属性挂在了dayjs函数对象上，最核心的是加载插件和加载locale的方法，几个方法的白利用 源码用法都能在官方文档中找到。

       如果对dayjs函数对象、Dayjs类和原型的关系感到困惑，可以参考下图，最后形成的关系如下图所示：

       总结

       如果不看插件部分，dayjs库的核心已经解析完成，看一下默认生成dayjs实例长什么样子：

       实例本身的属性是一些与时间相关的属性，各种操作方法都在原型__proto__上。

       本节结束，下一节将开始解析dayjs的插件。

flv.js源码知识点（下） FLV格式解析

       flv.js系列三：FLV格式解析

       此篇文章为flv.js源码知识点系列的终篇，旨在深入解析FLV文件的格式。在理解FLV文件数据结构及如何在JavaScript中读取特定二进制数据的基础上，文章将引导读者逐步构建对FLV文件解析的全面认知。

       FLV格式解析主要涉及两个关键部分：FLVHeader和FLVBody。FLVHeader为文件的前导部分，固定长度为9字节，其结构定义了文件的后续部分。FLVBody包含多个Tag，每个Tag由TagHeader和TagData组成，Tag的结构为字节，体现了FLV文件的层次化和可扩展性。

       在进行FLV文件解析时，二进制数据读取API显得尤为重要，特别是DateView类的使用。DateView允许以位级别访问ArrayBuffer中的数据，提供了读取、写入以及转换数据类型的能力，极大地简化了二进制数据的处理流程。

       具体而言，DateView提供了构造函数new DataView，用于指定数组缓冲区、偏移量和长度。获取数据时，可以通过getUint8、getUint等方法，灵活地读取不同长度的整数。此外，了解字节序（大字节序与小字节序）的概念及其对数据读取的影响，对于正确解析FLV文件至关重要。

       位操作是二进制数据处理的另一大利器，包括按位非、按位与、按位或、按位异或以及位移操作等。这些操作允许在位级别上进行复杂的数据提取和重组，对于处理如FLV标签中的时间戳拼接等特定场景尤为关键。

       最后，文章强调了结合FLV格式文档和二进制数据读取技术进行解析的重要性。通过解析每个字段，开发者可以有效地理解和处理FLV文件中的音视频数据，为后续的音视频解码、传输和播放提供坚实基础。

       通过本系列文章的学习，读者不仅掌握了flv.js源码的解析原理，还深入理解了FLV文件格式的内在结构与处理方法，为音视频开发工作打下坚实的技术基础。

slate.js源码分析（四）- 历史记录机制

       应用中常见撤销与重做功能，尤其在编辑器中，其实现看似简单却也非易事。为了更好地理解这一机制，本文将深入探讨 MVC 设计模式，并聚焦于 slate.js 如何巧妙地实现撤销与重做功能。

       MVC 模式是一种经典的软件架构模式，自 年提出以来便广为应用。在 MVC 模式中，模型（Model）负责管理数据，视图（View）展示数据，而控制器（Controller）则负责处理用户输入与模型更新。

       在撤销与重做功能的设计中，通常有两种实现思路。其中一种是通过 Redux 等状态管理库实现，而 slate.js 则采用了一种更为直接的方法。本文将重点介绍 slate.js 的实现策略。

       撤销功能允许用户回溯至之前的页面状态，而重做功能则让用户能够恢复已撤销的操作。在执行操作后，当用户请求撤销时，系统会抛弃当前状态并恢复至前一状态。对于复杂的操作，如表格的复制与粘贴，系统的处理逻辑则更为精细，能够跳过不需要记录在历史记录中的状态，确保撤销操作的精准性。

       slate.js 的状态模型主要基于树状的文档结构，通过三种类型的操作指令来管理文档状态：针对节点的修改、光标位置的调整以及文本内容的变更。对节点与文本的修改，可通过特定指令来实现，而光标操作则通常直接修改数据。借助这九种基本操作，富文本内容的任何变化都能被准确地记录与恢复。

       在实现撤销功能时，关键在于如何根据操作指令中的信息推导出相应的撤销操作。例如，撤销对节点的修改操作，只需对记录的操作进行逆向操作即可。相比之下，重做功能则相对简单，只需在撤销操作时记录下指令，以便在后续操作中恢复。

       操作的记录以数组形式进行，便于后续的撤销与重做操作。通过合理的指令与数据模型设计，复杂的操作最终被拆解为简单且可逆的原子操作，确保了功能的高效与稳定。

       总结而言，通过精心设计的指令与数据模型，撤销与重做功能得以实现，使应用在面对用户操作时能够灵活应对，提供无缝的用户体验。此外，本文还附带了一个招聘信息，百度如流团队正面向北京、上海、深圳等地招聘，欢迎有志之士加入。

       参考资料包括：Web 应用的撤销重做实现、slatejs。

精通JS脚本之ExtJS框架内容简介

       深入理解并掌握ExtJS框架对于Web开发至关重要。本书以全面且易懂的方式，将内容分为个章节，旨在引导读者逐步掌握相关技术。首先，它详细讲解了JavaScript的基础，包括对象编程和浏览器对象模型，以及事件机制的运作原理。接着，核心章节探讨了ExtJS的核心类库和组件，展示了其强大的组件设计能力。

       书中特别关注了事件处理方式，让读者学会如何有效地利用ExtJS进行事件管理。接下来，读者将学习如何设计实用的界面元素，如进度条、工具栏、菜单栏和面板。表格设计、表单构建以及数据表的实现，都涵盖在内，展示了ExtJS在数据展示和用户交互中的灵活性。

       此外，ExtJS对Ajax的支持以及调试技巧也是本书的重要内容，帮助读者理解和优化网络请求，解决开发过程中的常见问题。最后，通过实际的项目案例，如商品信息管理系统和企业任务管理系统，读者将看到ExtJS在实际项目中的应用和实现步骤，以便更好地理解和应用。

       为了辅助学习，本书还附带了配套光盘，包括所有实例的源代码和视频教学，为自学者和培训者提供了丰富的学习资源。无论是希望自学Web开发，还是寻求RIA Web程序开发的专业培训，本书都是一个理想的指南。

slate.js源码分析（一） —— slate渲染机制

       富文本编辑器中的可见内容主要由文档内容和光标两部分组成。本文将详细介绍Slate在文档内容和光标方面的渲染机制。

       Slate文档的结构包含元素（Element）和文本（Text）两类节点。这些节点类似于DOM树，可以嵌套结构。用户在元素或文本上添加扩展属性，以提供渲染节点所需的数据。

       文档的截图与对应的Slate值之间存在对应关系，这种关系帮助开发者直观理解文档的渲染过程。

       Slate组件树类似于DOM树，对应于Slate值的数据结构。文档区域的顶部负责更新选择数据、文档树内容，并提供DOM事件API（如onKeydown和onClick）。

       节点数据被渲染为HTML，允许用户自定义渲染过程，通过renderElement方法实现。根据装饰的不同，文本会被分割成相应数量的leaf。

       文本内容的渲染则通过renderLeaf方法来控制文本内容的样式。

       Slate值的更新逻辑利用React技术，将文档数据实时渲染为DOM结构。当contenteditable为true的元素被修改时，会触发beforInput事件，通过监听这一事件，实现文档内容的实时同步。

       在使用Slate时，输入法问题是一个常见挑战。本文将简要介绍输入法的工作原理及其常见bug，并分析解决方法。

       正常键盘输入仅触发beforInput事件，而使用输入法时，除了beforInput事件，还会触发Composition事件。这三个事件分别对应输入法开始、内容更新和结束的过程。在输入法输入期间，如果实时修改文档内容，会导致与输入法冲突。因此，在CompositionUpdate期间，Slate Value不会做任何更新，直至CompositionEnd时再进行更新。遇到报错情况时，通常是因为在CompositionStart时文档内容被删除，而在CompositionEnd时找不到对应的DOM节点，引发错误。解决办法是在CompositionStart时更新文档值以避免冲突。

       解决输入法问题的一个方案是fork源码。通过这种方式，可以确保Slate与输入法协同工作，提高用户体验。

       Slate Selection数据结构与DOM Selection类似，由锚点（anchor）和焦点（focus）两个点组成。了解详细信息可以参考MDN Selection文档。

       Selection的更新机制依赖于React完成渲染。在每次Selection值发生变化时，会在useEffect中更新DOMSelection。同时，监听window.document上的selectionchange事件以更新Slate Selection值。

       后续计划继续深入探讨Slate源码分析，包括历史记录机制、从Slate 0.升级到0.的实战指南、数据模型、序列化机制、normalize机制等，敬请期待。

       最后，附上招聘广告。百度如流团队正面向北京、上海、深圳等地招聘，提供丰富的岗位选择，欢迎有意者进行内推。