皮皮网

1.Underscore源码分析
2.iScroll5.2源码与知识点解析(一)-代码结构
3.JavaScript AST 抽象语法树
4.dayjs源码解析（一）：概念、源码locale、分析constant、源码utils tags
5.js引擎v8源码分析之Object（基于v8 0.1.5）
6.Underscore源码分析_javascript技巧

Underscore源码分析

       JavaScript，分析作为最被低估的源码编程语言之一，自从Node.js的分析rssowl源码出现，全端开发（All Stack/Full Stack）概念日渐兴起，源码现今，分析其地位不可小觑。源码JavaScript实质上是分析一种类C语言，对于具备C语言基础的源码学习者，理解JavaScript代码大体上较为容易，分析然而，源码作为脚本语言，分析JavaScript的源码灵活性远超C语言，这在一定程度上给学习者带来了一定的困难。

       集合是JavaScript中一种重要的概念，下面我们就来看看其中的几个迭代方法。

       首先，集合中的迭代方法包括`_.each`和`_.forEach`，这两个方法在功能上基本一致，主要用于对集合进行遍历。它们接受三个参数：集合、迭代函数和执行环境。其中，`_.each`和`_.forEach`在ES6中为数组添加了原生的`forEach`方法，但后者更灵活，能够应用于所有集合。

       `_.each`和`_.forEach`在遍历时会根据集合的类型（类数组或对象）调用不同的实现。如若集合有`Length`属性且为数字且在0至`MAX_ARRAY_INDEX`之间，则判定为类数组，否则视为对象集合。在遍历过程中，`_.each`和`_.forEach`会根据集合的特性使用合适的迭代方式。

       在处理集合时，`_.map`和`_.reduce`方法的实现原理类似，`_.map`用于获取集合中元素的映射结果，而`_.reduce`则用于逐元素执行函数并逐步聚合结果。

       此外，`_.find`函数与`Array.some()`具有相似性，图片源码下载不同之处在于`_.find`返回第一个使迭代结果为真的元素，而`Array.some()`则返回一个布尔值。`_.find`和`_.detect`函数基于`_.findIndex`和`_.findLastIndex`实现，它们分别在正序和反序的情况下查找满足条件的元素。

       在处理集合时，`_.max`方法用于寻找集合中的最大值，通过循环比较集合中的所有项，最终返回最大值。`_.toArray`则负责将各种类型的集合转换为数组，确保数据的格式统一。对于数组、类数组对象、普通对象以及null或undefined的情况，`_.toArray`分别采用了不同的处理方式，确保了转换过程的灵活性与准确性。

       至于集合转换为数组的问题，JavaScript中的数据类型多样，理解它们之间的区别对于开发者来说至关重要。然而，`_.toArray`函数的设计似乎更侧重于处理特定类型的数据，而不仅仅基于JavaScript的基本数据类型。在实际应用中，开发者需要根据具体场景灵活运用这些工具，以实现高效、准确的数据处理。

iScroll5.2源码与知识点解析(一)-代码结构

       iScroll5.2源码与知识点解析(一)-代码结构

       iScroll是一个著名的JavaScript库，专为解决浏览器滚动体验不佳的问题。本文将深入剖析iScroll5.2.0版本的源码，并介绍其中关键知识点。

       IScroll的核心代码结构清晰明了:

Wrapper（外部容器）: 类似一个固定大小的窗口，内容（Scroller）在其内部滚动，始终保持窗口不动，内容动态变化。

Scroller: 实际的滚动部分，用户操作时，scroller的位置会随之调整，实现滚动效果。

Indicator: 显示当前显示内容的位置，帮助用户理解滚动进度。下载工具源码

Scrollbar: 滚动槽，提供视觉反馈，让用户知道滚动范围。

       以官方提供的最简iScroll初始化代码为例，wrapper的id为"wrapper"，其第一个子元素即为scroller，如ul标签所示。

       关于更深入的细节和实现原理，下一篇文章将为您继续解析。敬请期待!

JavaScript AST 抽象语法树

       本文将深入探讨抽象语法树（AST）在JavaScript编译过程中的应用。首先，让我们对AST进行简要介绍。

       AST是源代码抽象语法结构的树状表示形式。在计算机科学中，它由Wikipedia定义为：“一种计算机科学中的抽象语法树（AST），或仅称为语法树，是编程语言源代码的树形表示形式。”

       编译原理中，代码通常被映射为AST，这个树定义了代码的结构。在JavaScript的编译过程中，编译器会将源代码转换为AST。通过对AST的处理，编译器能够实现对代码的分析、优化等操作。例如，webpack、babel、eslint等工具类库都依赖于AST进行代码分析。

       接下来，让我们看看AST的结构。通过AST Explorer，可以实时解析和查看JavaScript的AST。AST的结构会因不同解析器而异。以Esprima为例，其语法树结构文档中列出了多种类型，包括表达式、声明、语句等。dnf台服辅助源码

       常用的JavaScript解析器有多种，例如Esprima、ESTree、Acorn等，它们各有特点和速度优势。对比这些解析器的性能，可以参考Speed Comparison。

       AST的应用范围广泛，几乎涉及任何对代码进行处理的场景。例如，编译器、代码压缩、代码混淆、代码优化、所有的lint工具、打包构建工具及其插件等，都与AST息息相关。

       总结而言，AST是编程语言源代码结构的树状表示形式，它在编译过程中发挥着重要作用，能够用于代码分析、优化等操作。从技术的角度来看，AST的应用场景几乎无处不在，理解AST有助于提升对代码处理工具的使用效率。

       若想了解更多关于AST的内容，欢迎访问个人博客front-ender.cn。感谢阅读！

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 优化体积、按需加载的核心优势。

       基础概念与时间标准

       在解析源码之前，理解以下基础概念至关重要，包括时间标准、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引擎v8源码分析之Object（基于v8 0.1.5）

       在V8引擎中，Object是所有JavaScript对象在底层C++实现的核心基类，它提供了诸如类型判断、属性操作和类型转换等公共功能。

       V8的对象采用4字节对齐，通过地址的低两位来识别对象的类型。作为Object的子类，堆对象（HeapObject）有其独特的属性，如map，它记录了对象的类型（type）和大小（size）。type字段用于识别C++对象类型，低位8位用于区分字符串类型，高位1位标识非字符串，低7位则存储字符串的子类型信息。

       对于C++对象类型的判断，V8引擎定义了一系列宏。这些宏包括isType函数，用于确定对象的具体类型。此外，还有其他函数，如解包数字、转换为smi对象、检查索引的有效性、实现JavaScript的IsInstanceOf逻辑，以及将非对象类型转换为对象（ToObject）等。

       对于数字处理，smi（Small Integers）在V8中用于表示整数，其长度为位。ToBoolean函数用于判断变量的真假，而属性查找则通过依赖子类的特定查找函数来实现，包括查找原型对象。

       由于后续分析将深入探讨Object的子类和这些函数的详细实现，这里只是概述了Object类及其关键功能的概览。

Underscore源码分析_javascript技巧

       JavaScript，一种类C的语言，以其灵活性和广泛的应用范围，逐渐成为了开发者们不可或缺的工具。随着全栈开发概念的兴起，JavaScript 的地位更是不可小觑。

       在JavaScript的集合操作中，`_.forEach` 是一个原生方法，它能对所有集合执行迭代操作。`optimizeCb` 函数根据传入迭代函数的参数个数，绑定合适的执行环境，如 `forEach` 方法接受三个参数（值，索引，集合）。`_.map` 利用 for 循环优雅地实现了数组遍历，通过一个循环判断是否为数组，简化了代码逻辑。

       集合的分类型处理，将集合分为类数组集合和对象集合，通过 `_.isArrayLike` 函数进行判断。`_.keys` 函数实现了对象属性的枚举，使用 for in 结合 `hasOwnProperty()` 方法实现，简洁高效。

       相似的原理适用于 `_.map` 和 `_.reduce` 方法，而 `_.find` 则寻找满足条件的第一个元素，不同于 `Array.some()` 的布尔值返回。

       集合转换为数组的逻辑依赖于数据类型。JavaScript 有严格的数据类型区分，如数组、对象等。在 Underscore 中，`Collections` 和 `Arrays` 分开处理，是为了提供更加灵活和高效的实现策略。这涉及对不同数据结构特性的理解和利用，如数组的快速访问和修改特性。

深入浅出JavaScriptCore

       JavaScriptCore在移动前端开发中的重要性不言而喻，它是React Native和Weex等跨平台应用在iOS与Android上运行的关键支持。要深入理解JSCore，首先需要了解浏览器及其历史，尤其是WebKit，它是一个负责页面渲染和逻辑处理的引擎。

       WebKit由WebCore和JavaScriptCore两大部分组成，其中WebCore是核心渲染引擎，负责处理HTML、CSS和JavaScript，而JavaScriptCore则是JavaScript引擎，它在WebKit中作为内嵌的虚拟机，负责解释和执行JavaScript代码。多种浏览器引擎，如Google的V8、Mozilla的SpiderMonkey和Facebook的Hermes，虽然基于WebKit，但对JavaScript执行进行了优化。

       JSCore的工作流程包括词法分析、语法分析和字节码生成。词法分析将JavaScript源代码分解为Token，而语法分析则创建抽象语法树。生成的字节码在LLInt和JIT的解释执行下运行，LLInt负责常规执行，而JIT在遇到复杂情况时提供优化，如通过堆栈替换（OSR）来提高速度。

       JavaScriptCore的单线程机制是其独特之处，由于JS的执行是线程内，事件驱动机制允许在主线程外处理耗时任务。在React Native中，Apple封装的JSCore允许Native与JS交互，提供了一系列关键组件如JSVirtualMachine、JSContext和JSValue，用于执行环境管理、值传递和与Native的交互。

       总的来说，JavaScriptCore是连接Native与JavaScript的世界的关键桥梁，其复杂的内部机制和与Native的交互方式，对于前端开发者理解和使用跨平台应用框架如React Native具有重要指导意义。如果你对这些内容感兴趣，不妨深入了解并实践。

图文剖析 big.js 四则运算源码

       big.js是一个小型且高效的JavaScript库，专门用于处理任意精度的十进制算术。

       在常规项目中，算术运算可能会导致精度丢失，从而影响结果的准确性。big.js正是为了解决这一问题而设计的。与big.js类似的库还有bignumber.js和decimal.js，它们同样由MikeMcl创建。

       作者在这里详细阐述了这三个库之间的区别。big.js是最小、最简单的任意精度计算库，它的方法数量和体积都是最小的。bignumber.js和decimal.js存储值的进制更高，因此在处理大量数字时，它们的速度会更快。对于金融类应用，bignumber.js可能更为合适，因为它能确保精度，除非涉及到除法操作。

       本文将剖析big.js的解析函数和加减乘除运算的源码，以了解作者的设计思路。在四则运算中，除法运算最为复杂。

       创建Big对象时，new操作符是可选的。构造函数中的关键代码如下，使用构造函数时可以不带new关键字。如果传入的参数已经是Big的实例对象，则复制其属性，否则使用parse函数创建属性。

       parse函数为实例对象添加三个属性，这种表示与IEEE 双精度浮点数的存储方式类似。JavaScript的Number类型就是使用位二进制格式IEEE 值来表示的，其中位用于表示3个部分。

       以下分析parse函数转化的详细过程，以Big('')、Big('0.')、Big('e2')为例。注意：Big('e2')中e2以字符串形式传入才能检测到e，Number形式的Big(e2)在执行parse前会被转化为Big()。

       最后，Big('')、Big('-0.')、Big('e2')将转换为...

       至此，parse函数逻辑结束。接下来分别剖析加减乘除运算。

       加法运算的源码中，k用于保存进位的值。上面的过程可以用图例表示...

       减法运算的源码与加法类似，这里不再赘述。减法的核心逻辑如下...

       减法的过程可以用图例表示，其中xc表示被减数，yc表示减数...

       乘法运算的源码中，主要逻辑如下...

       描述的是我们以前在纸上进行乘法运算的过程。以*为例...

       除法运算中，对于a/b，a是被除数，b是除数...

       注意事项：big.js使用数组存储值，类似于高精度计算，但它是在数组中每个位置存储一个值，然后对每个位置进行运算。对于超级大的数字，big.js的算术运算可能不如bignumber.js快...

       在使用big.js进行运算时，有时没有设置足够大的精度会导致结果不准确...

       总结：本文剖析了big.js的解析函数和四则运算源码，用图文详细描述了运算过程，逐步还原了作者的设计思路。如有不正确之处或不同见解，欢迎各位提出。