皮皮网

1.Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
2.dayjs源码解析（一）：概念、手写手写locale、源码constant、代码utils tags
3.聊聊 JS 中的 Object.create
4.手写一个简单的手写手写谷歌浏览器拓展插件（附github源码）

Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件

       项目截图

       演示地址

       演示响应式

       感谢szimek撰写的signature_pad.js项目，来自github.com/szimek/signa...

       正式开始：

        在wwwroot/lib目录下，源码添加signature_pad子文件夹，代码.net源码、并下载库文件（文件文末提供源码复制）signature_pad.umd.js，手写手写最终版本参照如下。源码

        添加app.js文件。代码

       代码中`wrapperc.invokeMethodAsync("signatureResult",手写手写 imgBase)`用于回调c#中的签名canvas结果。

       js代码

       打开Components文件夹，源码新建SignaturePad.razor.css文件。代码

       打开Components文件夹，手写手写新建SignaturePad.razor组件。源码

       参考阅读：Blazor组件参数

       组件参数：

       在ASP.NET Web Forms中，代码vb 模拟按键源码可以通过公共属性传递参数和数据到控件。这些属性可以在标记中通过特性设置，也可在代码中直接设置。Razor组件以类似方式工作，但组件属性必须使用[Parameter]特性标记才能被视为组件参数。

       定义Counter组件，名为IncrementAmount的组件参数，用于指定每次单击按钮时Counter应递增的数量。

       定义SaveBaseBtnTitle的组件参数，用于设置或获取[保存为base]按钮的文本。

       定义OnResult的组件参数，用于手写签名结果回调。

       在Blazor中指定组件参数，像在ASP.NET Web Forms中一样使用特性。淘宝 源码非法链接

       完整代码示例

       在Pages文件夹中添加SignaturePadPage.razor文件，用于演示组件调用。

       在_Imports.razor中加入引用组件的命名空间。

       在首页引用组件演示页或Shared/NavMenu.razor中添加导航。

       F5运行程序。

       提示：复杂签名可能导致传输数据量大，SSR时可能出现断流显示reload错误，启用以下配置解决此问题。

       至此，成功使用JS隔离封装signature_pad签名组件。

       Blazor组件自做系列：

        Blazor组件自做一：使用JS隔离封装viewerjs库

        Blazor组件自做二：使用JS隔离制作手写签名组件

        Blazor组件自做三：使用JS隔离封装ZXing扫码

        Blazor组件自做四：使用JS隔离封装signature_pad签名组件

        Blazor组件自做五：使用JS隔离封装Google地图

        Blazor组件自做六：使用JS隔离封装Baidu地图

        Blazor组件自做七：使用JS隔离制作定位/持续定位组件

        Blazor组件自做八：使用JS隔离封装屏幕键盘kioskboard.js组件运行截图

       项目源码：Github | Gitee

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

       深入剖析 Day.js 源码（一）：概念、c 图片旋转源码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 中的 Object.create

        实话说，之前不知道还有这么个玩意。偶然间看手写 new 源码，才算和它第一次认识。

        Object.create() 官方解释：方法创建一个新对象，使用现有的对象来提供新创建的对象的proto。

        其实 Object.create() 有两个参数： Object.create(proto, [propertiesObject])

        proto : 必须，表示新建对象的原型对象。

        即该参数会被赋值到目标对象(即新对象，或说是最后返回的对象)的原型上。

        该参数可以是null， 对象， 函数的 prototype 属性

        注意：创建空的对象时需传null , 否则会抛出 TypeError 异常

        propertiesObject : 可选，添加到新创建对象的可枚举属性。

        ( 即其自身的属性，而不是原型链上的枚举属性 ) 对象的属性描述符以及相应的属性名称。

        这些属性对应 Object.defineProperties() 的第二个参数。

        与 普通方式 创建对象 不同点

手写一个简单的谷歌浏览器拓展插件（附github源码）

       手写谷歌浏览器插件教程：简易实现与代码详解

       首先，让我们通过一个直观的示例来启动创建过程。点击浏览器地址栏输入 chrome://extensions/，即可直接访问扩展程序管理界面。

       核心配置文件是 manifest.json，这个文件记录了插件的基本信息，如名称、描述、权限等，是插件身份的身份证。

       当插件被激活时，用户会看到一个弹出层，这是通过编写 popup.html 来实现的，它包含了一个简单的HTML界面，用于交互或显示信息。

       为了保持代码的清晰，我们把相关的脚本逻辑分离到单独的 popup.js 文件中，这样也支持使用 script 标签直接嵌入。在该文件中，我们将实现插件的核心功能。

       此外，我们还需要一个辅助文件 inject.js，它的任务是将特定的代码注入到目标网页，实现所需功能，如上图所示。

       整个项目的目录结构清晰可见，便于管理和维护。但这里只是基础部分，更多功能的实现和优化将在后续篇章中详细介绍。