引言在前端开发中，CSS盒模型是构建网页布局的基础。无论是简单的文字排版，还是复杂的页面设计，盒模型都扮演着重要角色。理解盒模型的工作原理，能够帮助我们更好地控制元素的尺寸、间距和排列方式，从而创建出更加灵活和可维护的布局。
一、什么是CSS盒模型？CSS盒模型是浏览器渲染页面时用来处理元素布局的基本结构。每个HTML元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成：
内容区域（Content）：显示实际内容的部分，由width和height属性定义。
内边距（Padding）：内容区域与边框之间的空间，用于控制内容与边框的距离。
边框（Border）：围绕内容和内边距的边界线。
外边距（Margin）：盒子与其他元素之间的透明区域，用于控制元素间的距离。
盒模型的两种模式盒模型有两种计算模式：
标准盒模型（content-box）：width和height仅定义内容区域的大小，内边距和边框会额外增加元素的总体尺寸。
怪异（IE）盒模型（border-box）：width和height定义内容区域、内边距和边框的总大小，内边距和边框不会额外增加元素的总体尺寸。
通过box ...
在 JavaScript 中，call、apply 和 bind 它们的主要作用是改变函数执行时的 this 指向。虽然它们的功能相似，但在使用方式和适用场景上还是有着显著的区别。本文结合实际使用场景讲他们的区别，帮助你更好地理解和运用这些方法。
1. call、apply 和 bind 的基本概念1.1 callcall 方法用于调用一个函数，并显式地指定函数执行时的 this 值，同时可以传递参数列表。
语法：
1func.call(thisArg, arg1, arg2, ...)
示例：
123456function speak(message) { console.log(`${message}, ${this.name}`);}const person = { name: "Wang" };speak.call(person, "Hello"); // "Hello, Wang"
1.2 applyapply 方法与 call 类 ...
引言在 JavaScript 中，遍历数组和对象是常见的操作，而我们有多种方式来进行这些遍历，比如 for of、for in、forEach 和map。你能搞懂他们之间的区别吗？本文将详细介绍它们的区别和使用场景。
1. for in：遍历对象的属性（包括继承的属性）for in 循环用于遍历对象的可枚举属性 。这包括对象的自身属性和继承自原型链的属性。
特点：
for in 会遍历对象的所有可枚举属性（包括继承的属性）。
它适用于对象，但不适用于数组，因为数组有索引，且数组本身也是对象，索引可能是对象的属性，for in 会不按顺序遍历数组。
可能会遍历到对象继承的属性。
示例：1234567const person = { name: 'wyx', age: 27 };for (let key in person) { console.log(key, person[key]); // 输出：name wyx、age 27}
注意事项：
使用 for in 时，建议使用 has ...
前端开发
未读1. 为什么会出现跨域问题？跨域（Cross-Origin）是指在浏览器中，出于安全考虑，网页的 JavaScript 脚本只能访问与当前页面同源的资源。同源策略（Same-Origin Policy）规定，只有协议、域名和端口都相同的请求才会被允许，否则会被浏览器阻止，这就是所谓的“跨域”问题。比如，当前网站是 https://www.wyxup.top JavaScript 向 http://api.wyxup.top 发送请求时，由于不同的域名或端口，浏览器会认为这是跨域请求。
1.1 同源策略同源策略要求以下三个部分必须相同：
协议（Protocol）：如 http 或 https。
域名（Domain）：如 wyxup.top。
端口（Port）：如 80 或 443。
如果三者中有任何一个不同，就会触发跨域问题。
1.2 跨域示例以下是一些跨域的示例：
http://wyxup.top 和 https://wyxup.top（协议不同）。
http://wyxup.top 和 http://api.wyxup.top（域名不同）。
http://wyxup.top 和 ...
前端开发
未读普通写法1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950function typeOf(value) { if (value === null) { return 'null'; // null 是一个特殊的值，typeof null 会返回 'object' } if (value === undefined) { return 'undefined'; // undefined 是另一种特殊类型 } // 检测基础数据类型 const type = typeof value; if (type !== 'object') { return type; // 对于除了对象外的所有类型（string, number, boolean, symbol, bigint, function） ...
123456789101112131415161718192021222324252627282930313233 /** * 手写一个简单的ajax * * @param {string} method - 请求方法 * @param {string} url - 请求地址 * @param {string} data - 请求参数 * @param {function} onSuccessCallback - 请求成功的毁掉 * @param {function} onErrorCallback - 失败的毁掉 */function sendAjaxRequest(method, url, data, onSuccessCallback, onErrorCallback) { let xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.onreadystatechange = function ( ...
防抖的核心思想是：在事件触发后，先等待一段时间，如果在这段时间内没有再次触发事件，则执行回调；如果在这段时间内时间又被触发，则重新计时。
应用场景
输入框实时搜索（等待用户输入完成后再发送请求）。
窗口大小调整（等待用户停止调整后再计算布局）。
手写实现1234567891011121314151617function debounce(func, delay) { let timer = null; // 用于存储定时器 return function (...args) { const context = this; // 保存当前上下文 // 如果定时器存在，则清除之前的定时器 if (timer) { clearTimeout(timer); } // 重新设置定时器 timer = setTimeout(() => { func.apply(context, args); // 延迟结束后执行函数 }, delay); }; ...
节流的核心思想是：在一定时间间隔内，无论事件触发多少次，只执行一次函数，节流会稀释函数的执行频率。
应用场景
滚动事件（每隔一段时间检查滚动位置）。
按钮点击（防止用户快速多次点击）。
手写实现时间戳
1234567891011121314function throttle(func, delay) { let lastTime = 0; // 记录上次执行的时间 return function (...args) { const context = this; // 保存当前上下文 const now = Date.now(); // 获取当前时间 // 如果距离上次执行的时间大于设定的延迟，则执行函数 if (now - lastTime >= delay) { func.apply(context, args); lastTime = now; // 更新上次执行时间 } };}
定时器
12345678910111213141516171819funct ...
在现代Web开发中，优化页面加载速度是提升用户体验的关键之一。JavaScript 文件的加载和执行方式对页面性能有着重要影响。HTML 中的 <script> 标签有两个属性 defer 和 async，它们可以帮助我们更好地控制脚本的加载和执行行为。
1. 默认行为在讨论 defer 和 async 之前，我们先回顾一下 <script> 标签的默认行为。当浏览器解析到 <script> 标签时，它会立即停止 HTML 文档的解析，下载并执行脚本文件，然后再继续解析 HTML。这种行为被称为“阻塞”行为，因为它会延迟页面的渲染。
1<script src="script.js"></script>
2. async 属性async 属性告诉浏览器异步加载脚本文件。这意味着浏览器在下载脚本的同时，不会阻塞 HTML 文档的解析。脚本一旦下载完成，浏览器会立即执行它，此时 HTML 解析可能会被暂停。
1<script async src="script.js">< ...
前端开发
未读1. 为什么每个前端都需要熟练掌握ES6？1.1 痛点：var的作用域问题在ES5中，var声明的变量存在变量提升和函数作用域问题。比如：
1234if (true) { var x = 10;}console.log(x); // 10（x泄漏到全局作用域）
这种问题让我不得不小心翼翼地检查变量作用域，生怕一不小心就踩坑。
1.2 痛点：回调地狱异步编程是JavaScript的核心，但在ES5中，回调地狱（Callback Hell）让我头疼不已：
1234567getData(function(data) { processData(data, function(result) { saveData(result, function(response) { console.log(response); }); });});
这样的代码不仅难以阅读，还难以维护。
1.3 痛点：冗长的代码ES5的语法有时显得冗长，比如对象字面量和函数表达式：
1234567var perso ...
