常见的设计模式

MVC(Model-View-Controller,模型-视图-控制器):MVC 是一种将应用程序分成三个核心组件的模式。模型(Model)负责处理数据逻辑、持久化和状态管理;视图(View)用于呈现用户界面或数据;控制器(Controller)接收用户输入,并协调模型和视图之间的交互。Repository(仓库):仓库模式用于隔离持久层(数据库操作)和业务逻辑层。仓库封装了对数据存储的访问代码,

- 阅读全文 -

手撕数字千分位展示方法

function formatNumberWithCommas(number) { let numberStr = number.toString(); let formattedNumber = ''; let decimalSeparatorIndex = numberStr.indexOf('.'); // 处理整数部分 let integerPart = number

- 阅读全文 -

DOM和BOM

DOM(Document Object Model):DOM是一种编程接口,提供了对HTML或XML文档的结构化访问和操作。它将文档表示为一棵树形结构,其中每个节点都是一个对象,可以通过操作这些对象来改变文档的内容、结构和样式。DOM树的根节点是document对象,它代表整个文档。其他元素、文本、属性等都是document对象的子节点。基本概念:节点:文档中的一个元素、文本、注释等都是节点。元素

- 阅读全文 -

浏览器性能优化方案

1. 减少HTTP请求将多个小文件合并为一个大文件,例如将多个CSS文件合并为一个CSS文件,多个JS文件合并为一个JS文件。使用CSS Sprites合并多个小图片为一张大图片,减少图片请求次数。2. 压缩文件压缩代码文件(HTML/CSS/JavaScript),可以减少文件的体积,提高传输效率。使用Gzip压缩,服务器可以将文件在传输过程中进行压缩,浏览器接收后自动解压缩。3. 使用缓存设置

- 阅读全文 -

Vue的响应式原理

Vue.js的核心理念便是响应式,通过其响应式原理实现了数据的自动更新和视图的动态更新。响应式的核心概念是数据劫持(data reactivity)和依赖追踪(dependency tracking)。本文分别讲解了Vue3和Vue2的响应式原理和区别Vue2响应式原理:初始化阶段:Vue2采用选项式API(Options API),我们可以用包含多个选项的对象来描述组件的逻辑,例如 data、m

- 阅读全文 -

网页渲染过程

解析 HTML:浏览器会解析 HTML 文件,构建 DOM(文档对象模型)树,表示网页的结构。解析 CSS:浏览器会解析 CSS 文件,构建 CSSOM(CSS 对象模型)树,表示网页的样式信息。构建 Render 树:浏览器将 DOM 树和 CSSOM 树合并,构建 Render 树(也称为渲染树),用于确定网页元素的布局和渲染顺序。布局(Layout):在渲染树的基础上,计算出每个元素在页面中

- 阅读全文 -

跨域原因及解决方法

跨域指的是在浏览器中,当一个网页的脚本试图去访问不同源(域名、协议或端口)的资源时,浏览器会阻止该请求,这是出于安全策略的考虑。跨域的原因跨域问题是由浏览器的同源策略(Same Origin Policy)所导致的,它限制了从同一个源加载的网页脚本如何与来自其他源的资源进行交互。同源策略要求:协议相同域名相同端口相同如果其中有任何一个不同,浏览器就会认为跨域,并限制跨域请求。解决跨域问题的方法JS

- 阅读全文 -

let,const区别

let 和 const 是在ES6(ECMAScript 2015)中引入的变量声明关键字,用于声明变量。它们与旧的关键字var有一些区别。let 关键字let 允许声明一个块级作用域的变量。let 声明的变量的作用域限制在当前的代码块内(封闭的花括号{})。let 声明的变量可以根据需要在相同的作用域内重新赋值。let 声明的变量可以在声明之前使用(变量提升的幅度较小)。不能重复声明相同的变量名

- 阅读全文 -

async和await区别

async 和 await 是 JavaScript 中用于处理异步操作的关键字。它们通常一起使用在 Promise 的基础上来简化异步代码的编写和阅读。async 关键字用于标记一个函数为异步函数,表示函数内部可能包含异步操作。异步函数会隐式地返回一个Promise对象,该Promise对象的状态和值由异步操作决定。await 关键字只能在异步函数内部使用。它用于暂停当前异步函数的执行,并等待一

- 阅读全文 -

commonjs和es模块化区别

CommonJSES模块系统设计用于服务器端JavaScript环境设计用于服务器端和浏览器端异步模块加载同步模块加载模块同步加载模块异步加载每个模块只有一个默认导出多个命名导出和默认导出使用require导入模块使用import和export导入/导出CommonJS模块在运行时动态加载ES模块在编译时静态解析适用于服务器端应用适用于服务器端和客户端应用在Node.js中使用在支持ES6的现代浏

- 阅读全文 -