Your awesome heading

工作流：1.配置项解析 => 2.载入内外部插件 => 3.开始解析文件 => 4.应用loader => 5.转AST结构 => 6.再解析引用文件 => 7.递归到步骤3 => 8.chunk分包处理 => 9.组织&吐出文件 示意图 Read More

Plugins are the backbone of webpack. Webpack itself is built on the same plugin system that you use in your webpack configuration! tabable 核心支架，hooks 集合，实现了类似发布订阅的模式，但支持更为丰富的特性； 设想存在多个函数 fn1、fn2、fn3…fnx，希望实现如下特性： 实现其注册后，由某一事件触发，即事件/订阅； 实现按顺序触发、支持异步(并行 or 串行)、支持中断、支持数据结果传递等特殊逻辑； demo 拆解 sokra采用了在运行时按需组合生成代码，然后执行的方式； github demo cla... Read More

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. demo 演示 用一个经典的 css 配置演示下工作流，debug 代码：test-loader-css src/color.css div { color: purple; } src/index.js import "./color.css"; function component() { const element = document.createElement("div"); element.innerHTM... Read More

今年，要给公司多数项目加上统计监控；满足低成本、精度要求不高、数据隐私、业务自定义的要求，采用了全埋点方案； 调研 - github 开源项目 awesome list 查看了几个主要的； umami 定义：全栈服务，支持谷歌同类服务 免费 语言：js 开源：https://github.com/umami-software/umami demo：https://app.umami.is/share/8rmHaheU/umami.is plausible 定义：全套服务，支持谷歌同类服务 收费 or 免费：注册、载入脚本即可; 或可自行搭建； 语言：Elixir + React 开源：https://github.com/pl... Read More

分类: 设计模式 近期要做个 JS 相关的设计模式的分享，在这也同步梳理下。 目录 一. 动态类型语音&鸭子类型&面向接口编程 二. 多态 一. 动态类型语音&鸭子类型&面向接口编程 在动态语音中(js)，利用鸭子类型思想，我们不必借助超类，就能实现‘面向接口编程’ from 曾探-js设计模式 _ todo1 _ 静态类型语言的面向接口编程 demo ... js 中的面向接口编程 demo ... 二.多态 含义：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结 果 多态最根本的作用就是通过把过程化的条件分支语句转化为对象的多态性，从而 消除这些条件分支语句。 from 曾... Read More

分类: 项目工程实践 近期在开发在线表格项目。快收工了，把一些过程&要点记录下。 目录 一. 前期调研 二. 实践情况 三. 项目整体结构和涉及的几个主要表格技术细节 四. 项目总结 一. 前期调研 根据领导需求查看了几种表格方案，如下: 结论： 需求定制化程度高 需求是不能确定的，且后续要持续迭代（未知） 预期功能较复杂，需要完全掌握相关技术要点 自主开发吧 二. 实践情况 演示 收集&整理到的需求要点 1. 实现基本的表格功能(单元格，滚动，行列索引...) 2. 业务层面自定义需求(字段，列，维度，冻结滚动，锁定页面，全屏，筛选)... 3. 数据区域 支持增减模块 ... Read More

近期有空看了下 vue3 源码和相关书籍，同时将笔记同步到了博客。后面忘了可以再看看。为了理清核心主线逻辑，代码均移除了次要&边界逻辑。 一. 基本实现 设定基本场景，单击 add 按钮后，counter.num值变化，触发 effect 内匿名函数执行，达到响应式效果； <button onclick="add()">add</button> <div id="value"></div> <script> // 1.获取响应式对象 const counter = reactive({ num: 0 }); // 2.副作用函数 effect(() => { console.log(... Read More

分类: vue 源码 以下，均从最简单的一个{num:0}对象开始，针对其实现响应式； 一. 简单实现计算属性 取 vue 单侧案例 1should return updated value, 设定如下的场景： 单击 add 按钮后，触发 trigger 更新 num 值 打印percentValue.value值时， 触发匿名函数执行； <button onclick="add()">add</button> <div id="value"></div> <script> // 1.获取响应式对象 const counter = reactive({ nu... Read More

分类: vue 源码 以下，均从最简单的一个{num:0}对象开始，针对其实现响应式； 一. 简单实现计算属性 取 vue 单侧案例 1should return updated value, 设定如下的场景： 单击 add 按钮后，触发 trigger 更新 num 值 打印percentValue.value值时， 触发匿名函数执行； <button onclick="add()">add</button> <div id="value"></div> <script> // 1.获取响应式对象 const counter = reactive({ nu... Read More

分类: vue 源码 近期在阅读 vue3 的源码，但源码量巨大且包含了各种边界处理、特殊框架需求等，使得理解起来很难；想了下，从各个模块主线入手，拆解出核心功能，逐个梳理下，从简单到复杂的实现基本的 vue3 框架；达到理解的目的； 以下，均从最简单的一个{num:0}对象开始，针对其实现响应式； 一. 最简单的实现 设定如下的场景，单击 add 按钮后，counter.num值变化，触发 effect 内匿名函数执行，达到响应式效果； <button onclick="add()">add</button> <div id="value"></div> <script> // 1.获取响应式对象 ... Read More

Read More

这块一直不是很清楚，在这整理下，以后回来看看； 基础 16 进制 todo 进制转换 let num2 = 69; // "69" => 6*10^1 + 9*10^0 => 69 num2.toString(2); // "1000101" => 1*2^6 + 0*2^5 + 0*2^4 + 0*2^3 + 1*2^2 + 0*2^1 + 1*2^0 => 64+4+1 => 69 num2.toString(3); // "2120" => 2*3^3 + 1*3^2 + 2*3^1 + 0*3^0 => 54+9+6 => 69 num2.toString(4); // "1011" => 1*4^3 + 0*4^... Read More

This note demonstrates some of what Markdown is capable of doing. An exhibit of Markdown Note: Feel free to play with this page. Unlike regular notes, this doesn’t automatically save itself. Basic formatting Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no... Read More