我也要用- 博客(318)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 【浏览器插件】提高开发效率的新神器，增幅100%的方法都在这了！
站在纯粹的角度，带着好奇和大家一起来体验这款 CSDN 浏览器插件，让自己的浏览器变得有温度
2021-06-03 08:28:59
6641
66
原创 花几分钟分析了CSDN各领域榜单，我得到了这样的结果
本篇文章尽量不使用的晦涩复杂的技术手段，仅仅利用简单的前端知识和相关api，配合浏览器获得我们想要的数据，进行分析希望本篇文章可以让技术大佬会心一笑，回想自己当年是否也会有类似的的“奇葩”研究呢吧也许这篇文章会勾起你当初从事技术工作时最纯粹的初衷
2021-06-01 19:56:44
7128
40
原创 【走进浏览器】之Event Loop的那些事
大家都知道，在使用 setTimeout 或是其他异步任务的时候要多加小心，这是因为其涉及到了 Js 的事件循环机制。很多时候因为经验，我们不需要知道其原理就能避免一些错误，但今天我们还是来聊一聊，浏览器下的事件循环机制是如何的。
2021-05-30 14:28:13
7076
61
原创 CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶：网格布局（Grid）及其基本属性网格布局（Grid）是最强大的 CSS 布局方案。起初我也认为 flex 布局就可以完成绝大部分布局场景，但谁不希望用更直观、更简洁的方式来布局自己的网页呢，于是 Grid 就是我们的下一站，他与 flex 布局互相弥补，并不会互相取代一、前言上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的
2021-05-16 17:56:25
1403
8
原创 【走进浏览器】谈一谈浏览器渲染的基本原理
浏览器渲染基本原理浏览器对于前端工程师，就相当于赛车于赛车手，想要更好的在赛道上驰骋，就需要对自己的赛车有更深入的了解，甚至人车合一，所以本篇文章我们就来打开浏览器的大门，一起努力吧！前言一篇文章很难将所有的细节覆盖，同时我们也不需要将所有流程和每一个环节都摸透，我们就依照脉络来聊一聊浏览器的渲染过程。我们都知道一个页面通常由三个部分组成，即HTMl+CSS+JS，并通过一系列的步骤转换。HTML 的内容是由标记和文本组成CSS 称为层叠样式表，是由选择器和属性组成JS 是可以使网页的内
2021-05-13 19:08:07
7244
65
原创 CSS之关于弹性盒子 你了解哪些（flex基本属性详解）
CSS基础：Flex基本属性这篇文章我写的很纠结，因为flex布局作为“新”特性，写它的文章没有1w篇也有9999篇了，所以尽量为代码添加实例将flex布局介绍给大家，希望帮助大家和自己提高布局，一个很泛的词，在CSS早期，很多经典的布局都是依靠position+float+display属性。组合使用时稍有不慎就会导致棘手的问题。于是Flex诞生了，flex容器的主要特征是能够修改其子项的宽度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空间。篇幅较长，点个收藏慢慢看？一、Flex是什么？
2021-03-03 18:44:40
17862
16
原创 CSS基础：CSS的上下文之层叠上下文
CSS的上下文之层叠上下文看到层叠，大家一定会联想到定位元素会是的元素之间发生“遮挡”，而z-index可以改变他们之间的遮挡优先级，但这仅仅是层叠这一概念中很小的一部分。本文就来聊一聊css中的层叠上下文到底是如何给元素规定叠加顺序的。一、什么是层叠上下文？层叠上下文，英文称作”stacking context”. 我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素
2021-02-28 13:35:46
15956
9
原创 CSS基础：CSS的上下文之BFC
CSS的上下文之BFC看到这个名词，可能会有些陌生，但其实 上下文 = 区域，如果这么理解的话就会有行级上下文、块级上下文、flex上下文等等有一定排列规则的区域，我们今天只聊一聊 块级格式化上下文（BFC）一、什么是BFC？BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文（列举常见的方式）：根元素（<html
2021-02-25 18:24:07
12921
原创 CSS基础：浅谈position
浅谈position定位（position）允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置—— MDN一、文档流什么是文档流？"文档流"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。通常是从上至下，从左到右的形式。这个"流"本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。 一旦某部分脱离了"流"，它就会独立地工作还记得我们提到了盒模型（块级元素和行级元素），这些单个的元素是如何组
2021-02-23 18:40:51
15415
7
原创 CSS基础：简述CSS盒模型
盒模型问题：简述 CSS 盒模型一、块级盒子（Block box） 和 内联盒子（Inline box）在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为，我们这里不细分析如果转换他们的行为，仅做了解。1.1 块级（block）盒子会表现出以下行为:盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样
2021-02-22 18:51:23
14842
5
原创 CSS基础：谈谈选择器的权重和优先级
你必须懂的css样式权重和优先级尝试给这篇文章前置一个问题；选择器的权重与优先级有什么关系？一、什么是权重？先来看下面这样两段代码，大家分析class="c"的标签内文字的颜色是？<style>.class-a .b .c { color: red;}.class-a .c { color: blue;}</style><div class="class-a" id="id-a"> <div class="b">
2021-02-21 16:24:14
15582
11
原创 JavaScript专题之代码简洁
JavaScript专题之代码简洁本年度第二篇文章，进了新项目组要了解的东西太多，之后我会保证定时输出有质量的文章这篇文章主要是想和大家一起学习一下，工作之中有哪些让我们眼前一亮的JavaScript代码简洁小技巧。注意：下面的代码对比没有绝对的正确和错误，有些写法的使用场景会比较单一，根据大家的习惯和喜好判断即可，如果有更好或不同意见欢迎留言交流哦～1. 短路操作：当我们遇到这样的情况的时候，你会是const res1 = item.a ? item.a : item.b // 看起来很是
2021-02-08 11:59:35
604
1
原创 总结自己的2020，展望2021
文章目录一、工作2020年全职工作了1年从1到多，在工作中寻找方法，承担更多的责任完成职级晋升二、成为博客专家三、生活旅行养了一年多的柯基情感2021年的falg一、工作2020年全职工作了1年19年毕业->19年底转正->20年疫情远程办公->恢复公司办公，这段时间经历了太多。大学时光仿佛就在昨天。从1到多，在工作中寻找方法，承担更多的责任这一年工作量在逐渐增加，自己负责的从单个模块逐渐扩展到多个项目中的多个模块，对接的项目组也从1个增加到4个。转变最大的就是承担责任的勇
2021-01-12 17:11:50
5366
17
原创 数据结构专题（一）二分法，寻找解题思路看这一篇就够了
和大家一起掌握二分法，本篇文章提供了三个模版，以及大量配套练习题，帮助大家清晰的认识二分法，逐渐了解、掌握相关问题。
2020-12-29 19:02:31
14174
57
原创 LeetCode题解：矩阵中战斗力最弱的 K 行
矩阵中战斗力最弱的 K 行一、题目给你一个大小为 m * n 的矩阵 mat，矩阵由若干军人和平民组成，分别用 1 和 0 表示。请你返回矩阵中战斗力最弱的 k 行的索引，按从最弱到最强排序。如果第 i 行的军人数量少于第 j 行，或者两行军人数量相同但 i 小于 j，那么我们认为第 i 行的战斗力比第 j 行弱。军人 总是 排在一行中的靠前位置，也就是说 1 总是出现在 0 之前。示例：输入：mat =[[1,1,0,0,0],[1,1,1,1,0],[1,0,0,0
2020-12-21 19:06:44
2474
3
原创 LeetCode题解：统计有序矩阵中的负数
统计有序矩阵中的负数一、题目给你一个 m * n 的矩阵 grid，矩阵中的元素无论是按行还是按列，都以非递增顺序排列。请你统计并返回 grid 中 负数 的数目。示例：输入：grid = [[4,3,2,-1],[3,2,1,-1],[1,1,-1,-2],[-1,-1,-2,-3]]输出：8解释：矩阵中共有 8 个负数。二、题解/** * @param {number[][]} grid * @return {number} */var countNegatives
2020-12-21 19:05:32
867
原创 LeetCode题解：寻找比目标字母大的最小字母
寻找比目标字母大的最小字母一、题目给你一个排序后的字符列表 letters ，列表中只包含小写英文字母。另给出一个目标字母 target，请你寻找在这一有序列表里比目标字母大的最小字母。在比较时，字母是依序循环出现的。举个例子：如果目标字母 target = ‘z’ 并且字符列表为 letters = [‘a’, ‘b’]，则答案返回 ‘a’示例：输入:letters = ["c", "f", "j"]target = "a"输出: "c"输入:letters = ["c", "f"
2020-12-21 19:03:46
842
原创 LeetCode题解：有效的完全平方数
有效的完全平方数一、题目给定一个正整数 num，编写一个函数，如果 num 是一个完全平方数，则返回 True，否则返回 False。说明：不要使用任何内置的库函数，如 sqrt。示例 1：输入：16输出：True示例 2：输入：14输出：False题解这道题是典型的模版I分析思路在有序的“数组”中，查找指定的元素每次排除一般的查找空间/** * @param {number} num * @return {boolean} */var isPerfectSqu
2020-12-21 19:01:43
862
原创 LeetCode题解：pow(x, n)
pow(x, n)一、题目实现 pow(x, n) ，即计算 x 的 n 次幂函数。示例 1:输入: 2.00000, 10输出: 1024.00000示例 2:输入: 2.00000, -2输出: 0.25000解释: 2-2 = 1/22 = 1/4 = 0.25题解解题思路要判断 n 的正负，以确定我们的底是 x 还是 1/x经过分析 x^9 = x^4 * x^4 * x = (x^2 * x^2) * (x^2 * x^2) * x判断 n 的奇偶性，已确定是
2020-12-21 19:00:23
4025
5
原创 LeetCode题解：找到 K 个最接近的元素
本文是`二分查找-模版III` 的第最后一题，我会在之后将二分法的常见问题整理成完成的文档，我们一起加油～
2020-12-17 18:42:28
2969
4
原创 LeetCode题解：在排序数组中查找元素的第一个和最后一个位置
本文是二分查找-模版III 的第一题，后面的几道题的也算是本模版的微调版，加油～
2020-12-17 18:38:53
2235
3
原创 LeetCode题解：寻找峰值
本文是二分查找-模版 II 的第二题，你可能意识到了，相对应的 leetcode 给他们标出中等的难度，加油！
2020-12-15 09:48:40
4022
6
原创 LeetCode题解：搜索旋转排序数组
搜索旋转排序数组（middle）更好的阅读体验应该是：审题-思考答题整理-归纳一、题目LeetCode：33.搜索旋转排序数组给你一个整数数组 nums ，和一个整数 target 。该整数数组原本是按升序排列，但输入时在预先未知的某个点上进行了旋转。（例如，数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ）。请你在数组中搜索 target ，如果数组中存在这个目标值，则返回它的索引，否则返回 -1 。示例 1：输入：nums = [4,5,6,
2020-12-11 09:42:37
3221
5
原创 LeetCode题解：猜数字大小
猜数字大小（easy）更好的阅读体验应该是：审题-思考答题整理-归纳一、题目LeetCode：374.猜数字大小猜数字游戏的规则如下：每轮游戏，我都会从 1 到 n 随机选择一个数字。 请你猜选出的是哪个数字。如果你猜错了，我会告诉你，你猜测的数字比我选出的数字是大了还是小了。你可以通过调用一个预先定义好的接口 guess(num) 来获取猜测结果，返回值一共有 3 种可能的情况（-1，1 或 0）：-1：我选出的数字比你猜的数字小 pick < num1：我
2020-12-10 09:48:48
2796
3
原创 LeetCode题解：704.二分查找
本篇文章，利用leetcode中最经典的二分查找，带大家了解了分析这类问题的基础模版，我们称它为模版I，看过我的二分法总结的同学应该知道，凭借这套模版以及对应的分析，类似的easy问题应该难不住你了。
2020-12-08 19:16:42
2636
10
原创 LeetCode题解：35.搜索插入位置
LeetCode题解：搜索插入位置，二分法题解的第一篇文章，之后我会陆续整理更多二分法的文章，结合leetcode，和大家一起掌握这个思想
2020-12-04 15:13:36
3438
5
原创 ES6基础：Iterator和for...of
Iterator（遍历器） 和 for…of 循环遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）一、迭代器和 for…of 浅谈1.1 传统 for 循环先来看一段标准的 for 循环的代码：var arr = [1,2,3];for (let i = 0; i < arr.length; i++) { console.log(
2020-11-18 18:04:13
16071
12
原创 JavaScript 专题（九）数组中查找指定元素
上一篇文章中，我们了解了数组扁平化的思想，并学习了 lodash 是如何处理数组扁平化的。这次我们来讨论**在数组中查找元素**时所用的一些方法，并且参考lodash来实现我们自己的工具方法
2020-11-12 18:05:23
23247
10
原创 JavaScript专题（八）数组扁平化
> 数组扁平化这一概念大家都了解，但在实际写代码的时候是否思考过应该怎么实现它？或者说实现它的时候我们能收获什么呢？> 我们尽量用多种方法达到我们的目的，主流的，非主流的都搞一搞～
2020-10-19 18:36:45
28744
7
原创 JavaScript专题（七）类型转换
类型转换常常为人诟病，但实际上很多时候它们是非常有用的，有些强制类型转换可以明确告诉我们哪里发生了类型转换，有助于提高代码可读性和可维护性。但有些却发生在我们看不见的地方，所以我们今天来讨论一下平时常见的类型转换运算和操作～
2020-09-23 18:43:46
42445
18
原创 ES6基础：变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。这种方式的出现大大提高了代码的扩展性，在代码中完全使用解构赋值，也会大大提高代码的可以性和扩展性
2020-08-31 19:11:40
36021
10
原创 ES6基础：let和const
变量声明是我们在学习一门语言时，最先了解的部分之一。不要忽略它，我们一起来看看ES6中新增的两种变量声明命令吧～
2020-08-26 18:29:39
4234
原创 JavaScript专题（六）类型检测
JavaScript专题之如何判断数据类型目录一、typeof二、instanceof三、constructor四、stringTag是什么？五、实现几个数据检测的方法写在最后前言在《JavaScript的数据类型》中我们也提到过简单的类型检测问题。作为前端的同学，我们应该都知道可以使用typeof和instanceof在运行时判断JavaScript数据的类型，那么他们都是怎么判断的呢？一千个人会不会写出来一千个判断方法？本文会从通用的typeof、到专攻对象的instance.
2020-08-20 19:11:57
39660
19
原创 JavaScript专题（五）深浅拷贝
了解拷贝背后的过程，避免不必要的错误1. 介绍浅拷贝2. 介绍深拷贝3. 实现浅拷贝4. 实现深拷贝Js专题系列之深浅拷贝，我们一起加油～
2020-08-12 18:53:12
44260
47
淘宝首屏静态页面（HTML+CSS）布局练习.zip
2020-05-07
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝