- 博客(436)
- 收藏
- 关注
RSS订阅原创 CSS 实现：常见布局
在 Apple 的视网膜屏（Retina）中，默认每 4 个设备像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，即 1 CSS 像素跨越 2设备像素，从而实现更为精细的显示效果。移动设备的布局视口的默认值为 980px，比如在一个宽 320px 的移动设备显示一个布局视口宽为 980px 的页面，移动设备浏览器会对这个页面进行缩放直至其布局视口宽度为 320px，使得缩放后的页面显示效果都不会很理想。，就需要对视口进行缩放，使得视觉视口的像素和理想视口的像素 1：1。中间栏为第一个元素优先加载。
2023-10-05 18:29:42
1058
原创 前端需要理解的工程化知识
当hook入到的生命周期钩子函数是同步的，比如compile（beforeCompile 之后立即调用，但在一个新的 compilation 创建之前） 阶段，只有同步的 tap 方法可以使用。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到 dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码。按需加载是通过JSONP实现的。
2023-08-27 17:21:20
1436
原创 前端需要理解的Vue知识
Vue 除了支持内置的一系列指令，还允许注册自定义的指令 (Custom Directives)。Vue中重用代码的方式：组件、组合式函数和自定义指令。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑，而自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。自定义指令比原生HTML attribute 更有用，因为它不仅仅可以在页面加载完成后生效，还可以在 Vue 动态插入元素后生效。
2023-08-27 00:25:42
654
原创 前端需要理解的数据结构与算法知识
由一个或多个确定的元素所构成的整体：按照一定的线性顺序，排列而成的数据项的集合。：是一种元素在的线性列表数据结构。动态规划（Dynamic programming，简称DP）是通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法。动态规划常常适用于有重叠子问题、最优子结构性质和无后效性质的问题树是非线性逻辑结构，是n（n≥0）个节点的有限集。当n=0时，称为空树。树的每个节点有一个节点值和包含所有子节点的列表，从图的角度看，即N个节点的N - 1条边的有向无环图。树的最大层级数，被称为树的高度或深
2023-08-26 00:27:45
471
原创 前端需要理解的数据治理与异常监控知识
通过 XMLHttpRequest 的 send 方法以post的方式发送 data 给服务端，可以发送大量的数据，默认发送方式是异步，不会阻塞页面，但会占用一定的客户端资源，且需要特殊处理跨域限制。在上报的时候增加报错时间，用户浏览器信息，对错误类型区分，自定义错误类型统计，引入图表可视化展示，更加直观地追踪。通过将采集的数据拼接在图片请求的后面，向服务端请求一个 1*1 px 大小的图片（gif）实现的，设置它的 src 属性就可以发送数据。通过搜集用户的操作，可以明显发现错误为什么产生。
2023-08-25 18:43:29
429
原创 前端需要知道的微前端知识
微前端是一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个庞大应用后出现的应用不可维护的问题。微前端增加了操作/管理上的复杂性，团队自治程度的增加，可能会破坏协作，因此需要考虑是否具备采用这种方法所需的技术和组织成熟度。最大的意义在于解锁了多技术栈并存的能力，尤其适用于渐进式重构中架构升级过渡期。
2023-08-25 18:35:40
91
原创 前端需要理解的跨平台知识
混合开发是指使用多种开发模开发App的一种开发模式，涉及到两大类技术：原生 Native、Web H5。原生 Native 主要指 iOS（Objective C）、Android（Java），原生开发效率较低，开发完成需要重新打包整个App，发布依赖用户的更新，性能较高功能覆盖率更高；Web H5主要由HTML、CSS、JavaScript组成，Web可以更好的实现发布更新，跨平台也更加优秀，但性能较低，特性受限。跨平台开发是围绕着和两个主题去打造的，通过在两者之间进行取舍，诞生了多种跨平台解决方案。
2023-08-25 18:29:10
616
原创 前端需要理解的设计模式知识
设计模式的原则：1.（一个对象或方法只做一件事） 2.（尽可能少的实体或对象间互相作用） 3.（软件实体具有可扩展且不可修改）设计模式是通过代码设计经验总结出的解决问题的一系列套路。
2023-08-25 16:24:56
727
原创 前端需要理解的浏览器知识
当进行了会影响布局树的操作后，需要重新计算布局树，会引发布局。为了避免连续的多次操作导致布局树反复计算，浏览器默认会合并这些操作，当 JS 代码全部完成后再进行统一计算（但对于 window.getComputedStyle精确计算会强行刷新队列，无法优化），所以，改动属性造成的 reflow 是异步完成的。，由许多浏览器的特征信息综合起来的，不同特征值的信息熵（entropy，是接收的每条消息中包含的信息的平均量，信息熵越高，则能传输越多的信息，信息熵越低，则意味着传输的信息越少）有异。
2023-08-25 14:54:50
321
原创 前端需要理解的 React 知识
组件从概念上类似于 JavaScript 纯函数（多次调用下相同的入参始终返回相同的结果），它接受唯一的入参（即 “props”，包括JSX 所接收的除ref和key之外的属性（attributes）以及子组件（children），props.children 由 JSX 表达式中的子组件组成，而非组件本身定义），无论是使用函数声明还是通过 class 声明，都绝不能修改自身的 props，返回的是用于描述页面展示内容的 React 元素。在 React 组件中，代码重用的主要方式是组合而不是继承。
2023-08-25 14:40:41
135
原创 前端需要理解的 TypeScript 知识
Typescript是添加了类型系统的JavaScript，属于弱类型（即允许隐式类型转换）、静态类型语言，适应于任何规模的项目，支持 ES6，由微软开发并开源。Typescript增加的功能包括：类型批注和编译时类型检查、类型推断、类型擦除、接口、枚举、Mixin、泛型编程、名字空间、元组、Await。TypeScript 区分大小写，TypeScirpt 和JavaScript 一样没有整数类型；TypeScript 继承关键字为extends，允许接口继承多个接口；因此，现有的 JavaScript
2023-08-24 19:12:18
638
原创 前端需要理解的 JavaScript 知识
如果是函数执行上下文则首先给当前执行上下文的变量对象添加形参及初始值，否则先添加函数声明（函数表达式属于后面的变量声明）及初始值，再添加变量声明（带声明 var/let/const 关键字的）及初始值，完成后被激活为。JavaScript（JS）是单线程的、基于原型的、弱类型的、动态类型的、轻量的、支持面向对象/命令式/声明式编程的、头等函数的、多范式的、解释性（直译式或即时编译）的、也可在非浏览器环境下使用的动态脚本语言。是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。
2023-08-24 00:33:06
586
原创 前端需要理解的 CSS 知识
CSS（层叠样式表，Cascading Style Sheets）不是编程语言，而是用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的表现与展示效果的样式表语言。CSS3是CSS的最新标准，是与相反，CSS1/2 的特性在 CSS3 里也可以使用。
2023-08-22 22:04:03
1060
原创 前端需要理解的 HTML 知识
HTML（超文本标记语言，HyperText Markup Language）不是编程语言，而是定义了网页内容的含义和结构的标记语言。。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML由一系列元素组成，标签用于创建元素，标签里的元素名不区分大小写，但推荐将标签名全部小写。不包含任何内容的元素称为空元素，空元素不能存在结束标签，比如。声明即文档
2023-08-22 17:40:39
1788
1
原创 前端需要知道的HTTP知识
是一个用于传输超媒体文档（例如 HTML）的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的客户端—服务端模型，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应。HTTP 是无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态）。
2023-08-22 12:40:04
718
原创 前端需要知道的计算机组成原理知识
VCC（Voltage Circuit，正极） 和 GND（Ground，负极） 表示电源，A0 - A9 是地址信号的引脚，D0 - D7 表示的是数据信号、RD（Read，读取） 和 WR（Write，写入) 都是控制信号，信号均是0或1。（1）VCC接通 +5V，GND接通0V，使用 A0 - A9 来指定数据的存储地址，然后再把数据的值输入给 D0 - D7 的数据信号，并把WR的值置为 1，执行完这些操作后，即可以向内存 IC 写入数据；是用来暂存指令、数据和地址，可视为内存的一种。
2023-08-02 23:40:51
225
原创 前端需要知道的操作系统知识
操作系统是运行在计算机上管理计算机硬件与软件资源的软件程序。常见操作系统有：Windows、macOS 、Linux、IOS和Android。操作系统支持额外的扩展，比如 I/O 设备驱动和文件系统，支持按需装载，在UNIX/Linux中叫做共享库(.so，shared library），在Windows中则被称为动态链接库(.ddl，Dynamic Link Library)。（用户程序）通过（设备管理、文件管理、进程控制、进程通信、内存管理）申请使用系统态级别的资源，并由操作系统代为完成的操作。
2023-08-02 23:27:22
358
原创 前端需要知道的计算机网络知识
服务端同意连接请求，返回SYN-ACK包，SYN（等于j表示是确认了该客户端的连接请求） 、 ACK =1 （等于1表示有效ACK包，用于验证服务端到客户端通信是否正常）、 seq = y（服务端起始序列号） 、ack = x+1（确认号，期望收到的下一个数据的开头），进入SYN-RCVD状态，等待客户端确认（客户端是典型的 Web 用户入网设备（比如连接了 Wi-Fi 的计算机，或接入移动网络的手机）和设备上可联网的软件（比如 Firefox 和 Chrome 的浏览器）。域名是在互联网的网站的地址。
2023-08-01 21:06:47
2067
原创 CSS 中的前端工程化：预编译器与后处理器
预处理器：将类 CSS 语言（Less（.less）、Sass（.scss）、Stylus 等）编译处理成浏览器可解析的真正 CSS。增强了 CSS 代码的复用性，还有嵌套、变量、循环、函数、mixin 等，具有很方便的 UI 组件模块化开发能力。PostCSS，通常被视为在完成的样式表中根据 CSS 规范处理 CSS，让其更有效。它的初始功能只有源文件生成 AST 树，AST 树生成新文件，借助插件机制实现定制化的功能，目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
2023-07-16 10:06:05
781
原创 CSS 伪元素： ::marker 自定义列表序号
伪元素 ::marker，可作用在任何设置了display: list-item 的元素或伪元素上，例如和。::marker 动态的改变，可以搭配 :hover 实现鼠标悬停变换。::marker 也有 content 样式属性，由于 content 的 value 是可以做简单的字符串加法操作的。
2023-07-15 09:33:08
2232
原创 剑指 offer 动态规划算法题：丑数
定义数组dp，其中 dp[i - 1] 表示第 i 个丑数，第 nn 个丑数即为 dp[n]。由于最小的丑数是 1，因此 dp[0]=1。当 1≤ i ≤ n-1 时，令 dp[i]=min(dp[p2]×2,dp[p3]×3,dp[p5]×5)， 然后分别比较 dp[i] 和 dp[p2]×2,dp[p3]×3,dp[p5]×5 是否相等，如果相等则将对应的指针加 1。从 1 开始判断遍历，判断是否丑数（只有 2， 3， 5 作为因子），若是丑数 n 自减，直到 n 等于 1，返回即可。
2023-07-15 09:30:33
335
原创 剑指 offer 数学算法题：二进制中1的个数
编写一个函数，输入是一个无符号整数（以二进制串的形式），返回其二进制表达式中数字位数为 '1' 的个数（也被称为 汉明重量).当检查第 i位时，我们可以让 n 与 2^i 进行与运算，当且仅当 n 的第 i 位为 1 时，运算结果不为 0。n & (n−1)会将n 的最右边的那个1变成0，直到n 等于0，运算次数就等于 n 的二进制位中 1 的个数。
2023-07-15 09:30:26
460
原创 剑指 offer 数学算法题：求1+2+3+...+n
求 1+2+...+n ，要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句（A?使用短路表达式，当 n!== 0 的时候进行递归累加。
2023-07-15 09:30:20
305
原创 剑指 offer 数学算法题：数值的整数次方
当我们要计算 x^n时，我们可以先递归地计算出 y=x ⌊n/2⌋，其中 ⌊a⌋ 表示对 a 进行下取整；根据递归计算的结果，如果 n 为偶数，那么 x^n = y^2；如果 n 为奇数，那么 x^n = y^2 * x；： 实现 pow(x, n) ，即计算 x 的 n 次幂函数（即，xn）。，其中 b = [0, 1]是指数 n 的二进制位。因此每次舍弃n 的最低位，如果从右往左的二进制位是 1，将贡献。通过判断 n 的正负，若为负数， x 即为倒数，然后累计计算 abs(x) 次即可。
2023-07-15 09:30:11
433
原创 剑指 offer 数学算法题：和为S的连续正数序列
循环中，每轮判断滑动窗口内元素和与目标值 target 的大小关系，若相等则记录结果并移动左边界 i （以减小窗口内的元素和），若大于 target 则移动左边界 i （以减小窗口内的元素和），若小于 target 则移动右边界 j （以增大窗口内的元素和）。在已知 target 和 i 的情况下，通过求根公式计算出 j，当计算出的 j > i 且 j 是整数0，将 i 到 j 的所有数字构成的序列添加到结果数据中即可。若等于 target, 将 i 到 j 的所有数字构成的序列添加到结果数据中即可。
2023-07-15 09:30:05
500
原创 剑指 offer 数学算法题：圆圈中最后剩下的数（小孩报数问题？）
求出这个圆圈里剩下的最后一个数字。假设删除一个数后的序列 m + 1, m + 2, ... , n, 0, 1, 2, m - 1, 继续删除最后求得的解为 x = f(n -1, m) = f(n, m) - m;那么 f(n, m) = (f(n- 1) + m) % n，其中 f (1, m) = 0。可以使用动态规划，初始值为 f (1, m) = 0，从 2 到 n 开始遍历到 n 即可求得 f(n, m) = (f(n- 1) + m) % n。
2023-07-15 09:29:59
444
原创 剑指 offer 数学算法题：出现1的次数
而从 567 到 1234567 这个范围内，百位上1出现的次数为 出现的 1 的次数为：⌊ n / 1000 ⌋ × 100, 而 从 0 到 567 百位出现 1 的次数为: min(max(n mod 1000 - 100 + 1, 0), 100)，因为 若 n mod 1000 > 200 则出现 100 次，小于 200 则出现 n mod 1000 - 100 + 1， 小于100 则出现 0 次。例如，输入12，1～12这些整数中包含1 的数字有1、10、11和12，1一共出现了5次。
2023-07-15 09:29:55
348
原创 剑指 offer 数学算法题：剪绳子
给你一根长度为 n 的绳子，请把绳子剪成整数长度的 m 段（m、n都是整数，n>1 并且 m>1），每段绳子的长度记为 k[0],k[1]...k[m-1]。请问 k[0]*k[1]*...*k[m-1] 可能的最大乘积是多少？例如，当绳子的长度是8时，我们把它剪成长度分别为2、3、3的三段，此时得到的最大乘积是18。把绳子尽可能切为多个长度为 3 的片段，留下的最后一段绳子的长度可能为 0,1,2 三种情况。则应把一份 3+1 替换为 2 + 2，因为 2×2 > 3×1。
2023-07-15 09:29:49
434
原创 剑指 offer 数组算法题：唯一只出现一次的数字（其余均出现两次）
给你一个 非空 整数数组 nums ，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。你必须设计并实现线性时间复杂度的算法来解决此问题，且该算法只使用常量额外空间。，任何数和 0 做异或运算，结果仍然是原来的数；任何数和其自身做异或运算，结果是 0；异或运算满足交换律和结合律。因此数组中的全部元素的异或运算结果即为数组中只出现一次的数字。
2023-07-15 09:29:15
343
原创 剑指 offer 动态规划算法题：最小路径和
给定一个包含非负整数的 m x n 网格 grid ，请找出一条从左上角到右下角的路径，使得路径上的数字总和为最小。dp(i, j) 表示到达第i行第j列的最小路径和 （i, j 均从0开始）说明：每次只能向下或者向右移动一步。
2023-07-14 09:56:32
332
原创 剑指 offer 动态规划算法题：矩形覆盖
和斐波那契数列一样，n个2*1的小矩形无重叠地覆盖一个2*n的大矩形的方法数等于 n - 1 个2*1的小矩形无重叠地覆盖一个2*（n - 1）的大矩形的方法数 与 n - 2 个2*1的小矩形无重叠地覆盖一个2*（n - 2）的大矩形的方法数 之和，即，f(n) = f(n - 1) + f(n-2)只是初始值不同， f(0) = 0, f(1) = 1, f (2) = 2。请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形，总共有多少种方法？比如n=3时，2*3的矩形块有3种覆盖方法。
2023-07-14 09:56:25
323
原创 剑指 offer 动态规划算法题：地下城游戏
如果他的健康点数在某一时刻降至 0 或以下，他会立即死亡。因为需要满足 dp[i][j] ≥ 1 且 dp[i][j] + dungeon[i][j] ≥ dp[i][j+1]：表示进入第i行第j列后健康点数dp[i][j] + dungeon[i][j]需要不小于进入下一个格子之前的最低健康点数dp[i][j+1])。因为需要满足 dp[i][j] ≥ 1 且 dp[i][j] + dungeon[i][j] >= Math.min(dp[i][j + 1], dp[i + 1][j])。
2023-07-14 09:56:20
414
原创 剑指 offer 动态规划算法题：打家劫舍
你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。状态转移方程：dp[i] = Math.max(nums[i] + dp[i - 2], dp[i - 1])；dp[i] 表示从[0, i] 区间内房屋能偷窃到的最高金额。
2023-07-14 09:56:14
305
原创 剑指 offer 动态规划算法题：不同路径
一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。， 其状态转移方程为 dp(i, j) = dp(i - 1, j) + dp(i, j - 1);dp(i, j)表示到达第i行第j列有多少条路径（i, j 均从0开始）。即优化空间复杂度，使用dp表（paths），即滚动数组，初始均为 1。数组的元素总是等于当前列上一行（paths[j]） + 当前行上一列（paths[j - 1]）。
2023-07-14 09:56:06
320
原创 剑指 offer 动态规划算法题：0-1背包问题
状态转移方程：dp[i][j] = Math.max(value[i] + dp[i-1][j - weights[i]], dp[i-1][j]);前提是 j >= weights[i]。利用滚动数组，优化空间复杂度：dp[j] = Math.max(value[i] + dp[j - weights[i], dp[j])。dp[i][j] 表示最大重量为 j 的背包中所能包含的 [0, i]区间内的物品的最大价值。
2023-07-14 09:55:59
331
原创 剑指 offer 数学算法题：十进制转k进制
首先根据k制作一个进制数字数组，然后将十进制数进行除k取余，更新十进制数为除数，并逆序排余数，直到除数为0。：给定一个十进制数，请转成k进制（k不大于36），如果k大于10，则从A开始算。
2023-07-14 09:55:54
180
原创 剑指 offer 数学算法题：实现大数相乘
乘数 num1 位数为 M，被乘数 num2 位数为 N， num1 x num2 结果 res 最大总位数为 M+N，而且num1[i] x num2[j] 的结果再加上其第二位对应的结果数组中的res[i+j+1]得到一个sum，sum的个位就是新的res[i+j+1]，sum的十位加上res[i+j]就是新的res[i+j]。：给定两个以字符串形式表示的非负整数 num1 和 num2，返回 num1 和 num2 的乘积，它们的乘积也表示为字符串形式。
2023-07-14 09:55:46
295
原创 剑指 offer 数学算法题：实现大数相加
由于最大的安全整数是16位，因此从后往前每15位转换为数字相加并且考虑进位，然后再将每部分字符串拼接。需要注意的是，某一部分相加的结果如果位数为16位，说明需要进位，如果位数为小于等于15位时且存在一个加数的位数等于15位，这部分的结果前面需要补0。：给定两个字符串形式的非负整数 num1 和num2 ，计算它们的和并同样以字符串形式返回。
2023-07-14 09:55:34
186
原创 剑指 offer 数学算法题：不用加减乘除做加法
对两个数字进行位异或运算的结果即为不考虑进位的情况下的求和，而对两个数字进行与运算后左移一位即为进位值，两者相加，直到后者为 0 即不存在进位。：写一个函数，求两个整数之和，要求在函数体内不得使用 “+”、“-”、“*”、“/” 四则运算符号。
2023-07-14 09:55:27
50
易我电脑迁移软件-电脑数据传输软件
2023-09-03
Vue3.0 性能提升主要是通过哪几方面体现的？
2023-09-02
用 Vue3.0 写过组件吗？如果想实现一个 Modal 你会怎么设计？
2023-09-02
面试题：Vue3.0 的设计目标是什么？做了哪些优化
2023-09-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人