JakeMa1024的博客

在网页和移动端开发中，设计师常常会交付2倍（@2x）或3倍（@3x）尺寸的设计稿。这种做法看似简单，背后却蕴含着设备显示原理与用户体验的深刻逻辑。今天，我们就来拆解这一“倍数设计”的奥秘。

在网页开发中，“像素”这个词似乎无处不在。我们写代码时设置`width: 100px;`，设计师交来UI稿标注“750px宽度”，但你是否想过：**这个“像素”到底是什么？** 为什么同一段CSS代码在不同设备上显示的效果却千差万别？今天，我们就来聊聊CSS像素背后的“像素哲学”。

在互联网和全球化的今天，我们每天都会接触到多种语言的文本——从英语、中文到阿拉伯语、日语，甚至是表情符号（Emoji）。这些看似复杂的字符是如何被计算机统一处理的？答案就是 **Unicode**。作为现代信息技术的基石，Unicode 不仅解决了字符编码的混乱问题，更推动了全球信息交流的无障碍发展。本文将深入浅出地解析 Unicode 的原理、发展历程及其对技术世界的影响。

在前端开发领域，JavaScript是构建动态网页和交互式应用的核心语言。然而，许多人对JavaScript的组成缺乏清晰的认识。实际上，JavaScript并非单一的语言规范，而是由三个紧密协作的部分构成：**ECMAScript**、**DOM（文档对象模型）**和**BOM（浏览器对象模型）**。本文将带你深入浅出地理解这三部分的功能与区别，以及它们如何共同支撑现代Web开发。

在Vue 3的世界中，开发者除了熟悉的`.vue`单文件组件模板（Template），还可以通过**TSX**（TypeScript + JSX）的方式构建组件。TSX是Vue 3对函数式组件和动态渲染场景的强力扩展，尤其适合逻辑复杂的交互组件或与React生态工具链兼容的开发需求。本文将带你从零开始，深入浅出地掌握Vue 3中TSX的使用技巧。

在前端开发中，页面加载速度直接影响用户体验和业务转化率。而“资源预加载”技术，正是优化加载性能的核心手段之一。本文将深入浅出地讲解 **Preload** 与 **Prefetch** 这两项技术，帮助你理解它们的原理、使用场景以及如何在实际项目中落地。

做好前端SEO，就像给网站穿上一件“隐形战袍”——既让爬虫高效抓取，又让用户爽到飞起。

Yoda Conditions（约达条件）是一种写法，把常量或不会被修改的值放在比较运算符的。“呜呜，我本来想说‘我等于42吗？’，结果Yoda大师一剑劈来，我连赋值的机会都没有！在TypeScript里，Yoda Conditions还能和类型系统“双剑合璧”！：Yoda Conditions就是给变量戴上了“防赋值项圈”！——即使你手滑写错符号，程序也会立刻尖叫：“嘿！这就像《星球大战》里的Yoda大师用光剑挡下攻击一样————用语法错误提前阻止逻辑错误！是个调皮鬼，总想被赋值。

nextTick等Vue把DOM更新完，再执行你指定的回调函数。就像你点了个外卖，虽然APP显示“已接单”，但你得等外卖小哥送到才能开吃。nextTick就是那个“等外卖送到”的函数。性格特点：耐心、守时、靠谱，但有点“轴”（只等Vue的更新，不等浏览器渲染）。口头禅：“别急！等Vue把DOM更新完，我再帮你执行！使用场景：所有需要“等一等再操作DOM”的场合。“数据改完别着急，nextTick里找答案；DOM更新才动手，代码运行稳如山！现在，你已经掌握了这个“拖延症克星”！

在Web应用开发过程中，当页面加载或即将关闭时，我们经常需要进行一些关键操作，如数据初始化、用户登录/登出状态处理、以及数据上报等。包裹组件，或在React中使用类似功能的第三方库来缓存组件状态时，可能会遇到生命周期函数未正确触发的问题。另一个常见问题是，当用户直接关闭浏览器标签页或整个浏览器时，Vue或React实例会立即被销毁，从而导致任何注册的生命周期卸载函数都无法被执行。通过这种方式，我们可以确保即使在用户直接关闭页面的情况下，也能执行必要的清理或通知逻辑，从而保证应用行为的一致性和可靠性。

在 Vue 3 项目中，当使用 Vite 作为构建工具时，由于 Vite 不支持require<img>

特别是在移动设备上，如 Chrome 浏览器，当地址栏自动隐藏或显示时，虽然视窗高度数值未变，但实际可见区域却发生了变化。在现代网页设计中，为了达到视觉上的连贯性和美观性，设计师们经常要求页面内容能够完美地铺满整个视窗，既不产生滚动条，也不留任何空白。一种常见的解决方案是使用 CSS 的。通过这种方式，可以确保元素严格贴合浏览器视窗的边缘，无论视窗大小如何变化，都不会出现滚动条，同时也能避免因视窗高度计算不准确带来的布局错乱。然而，尽管它看起来是一个理想的解决方案，但在实际应用中却存在一些不容忽视的问题。

UI，再到那跨平台而来的Flutter，简直像是给开发者们开了一场视觉与技术的盛宴。这些框架各怀绝技，有的擅长响应式布局，有的则在组件丰富度上傲视群雄。今天，就让我们一起走进这些前端UI框架的世界，看看它们是如何用一行行代码编织出一幅幅绚丽多彩的网页画卷吧！在这个看脸的时代，连代码都得拼颜值，于是前端UI框架们纷纷登场，像极了T台上争奇斗艳的模特。它们不仅让网页穿上了时尚的新衣，还赋予了交互体验以灵动的生命。从React家族中精致优雅的Material-UI，到Vue世界里简洁有力的Element。

如果想要throttle函数只会调用一次，可以设置options.trailing=false。这样函数的表现就像普通的截流函数了。当使用lodash的throttle函数时会触发两次，分别在最开始和最后。所以其实throttle函数默认就是会调用两次。分别是第一次和最后一次。(boolean): 指定调用在节流结束后，也就是最后一次点击。(boolean): 指定调用在节流开始前，也就是第一次点击。严格来说不算是bug，因为。

nodejs使用即构API获取access_token报错input params error

如果只是重命名导致的冲突的话，可以使用git merge master -s recursive -X no-renames （此处的master表示当前分支与master合并）可以忽略重命名的冲突正常合并

遍历对象键值对的四种方法

原文地址如果在修改时发现修改错误，而要放弃本地修改时，一，未使用 git add 缓存代码时。可以使用 git checkout – filepathname (比如： git checkout – readme.md ，不要忘记中间的 “–” ，不写就成了检出分支了！！)。放弃所有的文件修改可以使用 git checkout . 命令。此命令用来放弃掉所有还没有加入到缓存区（就是 git add 命令）的修改：内容修改与整个文件删除。但是此命令不会删除掉刚新建的文件。因为刚新建的文件还没已有

Ts笔记/快速入门笔记参考资料：ts中文网菜鸟教程：https://www.runoob.com/typescript/ts-tutorial.html1.安装：自行安装Js与ts的区别：TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。给我的感觉两者基本差别不大。TypeScript 可处理已有的 Ja

map// map//作用：对数组进行遍历//返回值：新的数组// 是否改变：否var arr = [2, 5, 3, 4];var ret = arr.map(function(value) { return value + 1;});console.log(ret); //[3,6,4,5]console.log(arr); //[2,5,3,4]2.forEach// forEach 方法// 作用：遍历数组的每一项// 返回值：undefined// 是否改变：.

1、defer 和 async 的网络加载过程是一致的，都是异步执行。2、区别在于加载完成之后什么时候执行，可以看出 defer 是文档所有元素解析完成之后才执行的。3、如果存在多个 defer 脚本，那么它们是按照顺序执行脚本的，而 async，无论声明顺序如何，只要加载完成就立刻执行无论script标签是嵌入代码还是引用外部文件，只要不包含 defer 属性和 async 属性（这两个属性只对外部文件有效），浏览器会按照script的出现顺序对他们依次进行解析，也就是说，只有在第一个script

错误代码： vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443

grunt/gulp的核心是Task我们可以配置一系列的task，并且定义task要处理的事务（例如es6，ts转化，图片压缩，scss转成css）之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。所以grunt/gulp也被称为前端自动化任务管理工具来看一个gulp的task下面的task就是将src文件下所有的js文件转换成es5 的语法并最终输出到dist文件夹中const gulp = require('gulp');const babel = requ

webpack快速入门什么是webpack官方网址：webpackjs.com自动化打包工具，优化我们的项目，服务请求更快。webpack是现代JavaScript应用程序的静态打包工具，当webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图会映射项目所需的每个模块，并生成一个或多个bundle包。为啥要使用webpack代码转换:TypeScript编译成JavaScript，LESS/SCSS编译CSS，ES6/7编译成ES5，虚拟DOM编译成真实DOM等等文件优化:压缩js，

let和const，数组解构，对象解构，模板字符串，函数默认参数，展开运算符，for of 循环，箭头函数，类定义class，set，map，模块的导入导出，进阶资源及兼容性解决

JavaScript函数概念函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数的使用声明function 函数名() { //函数体代码}function 是声明函数的关键字,必须小写由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum调用函数名(); // 通过调用函数名来执行函数体代码调用的时候千万不要忘记添加小括号口诀：函数不调用，自己不执行注意：声明函数本身并不

数组概念数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。创建数组利用 new 创建数组var 数组名 = new Array() ；var arr = new Array(); // 创建一个新的空数组利用数组字面量创建数组var 数组名 = []；var 数组名 = ['小白','小黑','大黄','瑞奇'];获

根据字符返回位置​ 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：根据位置返回字符​ 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码。字符串操作方法​ 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：replace()方法​ replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

内置对象简介JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。前面两种对象是JS 基础内容，属于 ECMAScript。第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发。JavaScript 提供了多个内置对象：Math、 Date 、Array、String等Math对象Math 对象不是构造函数，它具有

数据类型数据类型简介不同的数据类型（例如数字、字符）占用的内存空间不同，为了方便分配便定义了不同的数据类型。js是一种弱类型或者动态型语言，不用提前声明变量类型，在程序运行过程中，类型会被自动确定。转义字符js的转义字符要写在引号里面...

初识jsjs是一种运行在客户端的脚本语言（script是脚本的意思）脚本语言：不需要编译，运行过程中由浏览器内置的js解释器（js引擎）逐行进行解释。（浏览器内一般有渲染引擎-又称为内核，用来渲染HTML和css等标记语言。还有js引擎）现在也可以利用Node.js技术进行服务器端编程浏览器执行js简介渲染引擎 ： 又称为内核，用来解析 HTML 和 css 等标记语言。例如Chrome浏览器的blink，老版本的webkitjs引擎：也称为js解释器，用来读取网页中的JavaScript

可见性与溢出的设置display 的可见性设置display：none（不显示）display：block （以块显示）一般常用于hover事件，来设计悬浮框和下拉菜单visibility 的可见性设置和display的用法基本类似，不过以这种方法实现隐藏的元素依然可以占位置。上面的display并不会，它是完全消失的。图片中的关于visibility的特点说法打错了。很典型的就是我们在网站上见到的小广告，点×会消失，一刷新就又出来了hhoverflow对溢出的处理一般是指文

Emmet语法生成HTML标签空白文档输入“！（英文）+table键”即可生成HTML骨架示例（必须是英文输入）直接打标签名，按下table键自动生成<>如果想要生成多个标签名，则可直接标签名数字。例如：div3可生成三个div。想生成父子关系标签，可使用>, 例如：ul>li如果想生成兄弟标签，可使用+， 例如：div+p如果想生成带类名或带ID名的，直接写.demo和#two +table键即可如果想生成的div名是有顺序的，使用自增符号$.想要在

现实中的表单，类似我们去银行办理信用卡填写的单子目的是为了收集用户信息在我们的网页中，我们需要跟用户进行交互 收集用户资料 此时也需要填写表单在HTML中 一个完整的表单通常有表单控件(也称为表单元素) 、提示信息和表单域3个部分构成表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等提示信息: 一个表单中通常还需要包含一些文字说明，提示用户进行填写表单域: 相当于一个容器，用来容纳所有表单控件和提示信息,可以通过他定义处理表单数据所用程序的URL地

表格表格现在还是比较常用的一种标签, 但不是用来布局的，常用来处理, 显示表格式数据创建表格在HTML网页中 要想创建表格 就需要使用表格相关的标签 创建表格的基本语法如下<table> <tr> <td>单元格内的文字</td> ...... </tr> ......</table>在上面的语法中包含三队HTML 标签 分别为 <table></table> <tr>&

列表标签列表就是把…制成表，以表来显示，是容器里面装载着文字或图表的一种形式，列表最大的特点就是 整齐 整洁 有序。无序列表ul（常用）u for unorder.无序列表的各个列表项之间没有顺序级别之分 是并列的 其基本语法格式如下:<ul> <li>列表</li> <li>列表</li> <li>列表</li> <li>列表</li> ........</ul>