前端逐浪

「芝兰生于深林 不以无人而不芳」

手写vuex源码

核心原理

vuex 原理剖析 一.Vuex 基本使用及用法 vuex 是 vue 的状态管理工具，为了更方便实现多个组件共享状态 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 ...

Posted by ZhuLang on February 24, 2025

手写Vue2.0源码

title: 手写 Vue2.0 源码 description: 核心逻辑以及功能的实现 一.使用 Rollup 搭建开发环境 Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码， rollup.js更专注于Javascript类库打包。 1.安装 rollup 环境 1 npm install @babel/preset-en...

Posted by ZhuLang on February 23, 2025

手写vue-router源码

核心原理

Vue-Router 源码深度剖析 一.Vue-Router 基本应用 通过 Vue 路由的基本配置来探索 Vue-Router 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45...

Posted by ZhuLang on February 23, 2025

VirtualScroll

VirtualScroll 虚拟滚动 滚动至底部时，加载更多数据。 当页面中需要展示大量数据时，只会加载部分可见的数据，而不是一次性全部加载，从而提高页面的性能和用户体验。 基础用法 垂直方向固定高度，即列表每个项的高度固定统一，滚动后按高度计算视图内需要展示的列表项。 水平滚动 水平方向固定高度，即列表每个项的高度固定统一，滚动后按高度计算视图内需要展示的列表项。 动...

Posted by ZhuLang on February 22, 2025

前端组件库

自定义组件库开发

虽然市面上已经有很多知名的组件库，但由于团队设计规范和业务需求的多样性，实际开发中经常需要自行开发团队内部的基础和业务组件库。为了解决业务类型多、重复造轮子、项目升级以及公司规范无法统一等问题，我们决定开发属于自己的组件库。 组件开发方法论： 根据需求初步去定属性/事件/slots/expose 组件的静态版本(html,classes,slots) ...

Posted by ZhuLang on February 21, 2025

Typescript 安全编码的秘密武器

类型系统

1. typescript 是什么 Typescript 是由微软开发的一款开源的编程语言 Typescript 是 Javascript 的超集，遵循最新的 ES5/ES6 规范。TypeScript 扩展了 Javascript 语法 TypeScript 更像后端 Java、C#这样的面向对象语言可以让 JS 开发大型企业应用 越来越多的项目是基于 TS 的，比如 ...

Posted by ZhuLang on February 20, 2025

从零开始，手写完整的Promise原理

实现Promise

Promises/A+规范 1. 异步回调 1.1 回调地狱 在执行多个操作时，回调函数的嵌套可能会导致代码难以理解，这种现象通常被称为回调地狱 1.2 并行结果 当多个异步操作之间没有顺序要求时，可以并行执行以节省时间。然而，当必须等到所有异步操作完成后才能执行后续任务时，通常难以实现并行执行。 2. Promise Promise 的本意是承诺，在程序中表示一段时间...

Posted by ZhuLang on February 19, 2025

微信小程序

小程序开发和原理

微信小程序的技术架构与运行原理解析 小程序作为微信生态中的轻量级应用，极大地简化了开发者的开发流程，同时保证了用户的良好使用体验。本文将深入解析小程序的技术架构，从逻辑层与渲染层的角度详细剖析小程序的运行原理，帮助开发者更好地理解小程序的底层机制。 1. webview 的弊端 通过操作 DOM，JavaScript 可以直接访问小程序中的一些敏感数据，如用户信息、商家信息等，从而导致...

Posted by ZhuLang on February 18, 2025

前端性能优化

浏览器渲染流程简介

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用。 在实际工作中，如何量化性能优化也是相当重要的一环。 一. 背景 前端性能优化：以用户为导向的策略 在当今的技术环境中，前端性能优化已经成为一个重要的议题。随着用户对于网页加载速度和交互反应时间的期望日...

Posted by ZhuLang on February 17, 2025

前端网络请求-TypeScrpt封装Axios

前端网络请求封装

二次封装 Axios 的目的是确保将来如果需要切换网络请求库，只需修改 request/index.ts 文件即可。此外，这种封装还可以增加扩展性，并降低因该库不再维护而带来的风险。 一. axios 的二次封装 为什么需要二次封装？ 二次封装 axios 的主要目的是为了提高代码的可维护性和可扩展性。在一个复杂的项目中，网络请求可能会随着项目的发展而演变，甚至可能需要切换到其...

Posted by ZhuLang on February 16, 2025

FEATURED TAGS
Web JavaScript TypeScript Vue 手写 React 仓库 入门指南 内功 区块链 基础 性能优化 数字货币 核心原理 源码 组件库 UI Vue3 Web3
ABOUT ME

打破知识壁垒