笔记
关注
分享
扫一扫
文章平均质量分 59
weixin_41387874
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
模块化——import和require
import和require写在之前import和require都是JS模块化编程使用的，用于提升前端性能。对模块化的理解模块化主要是将一整个系统拆分成各个独立的部分。一个模块是完成某一个功能的一段代码（可以和组件相比较理解）。在JAVA中模块化是将实现某个功能的一段代码封装成一个类，但是因为JavaScript中没有类（至少ES6之前没有类），因此JS借助了对象或构造函数来模拟类进而实现模块化。引入规范require/exports是commonJS引入。（comm原创 2022-02-21 22:10:32 · 536 阅读 · 0 评论 -
移动端开发基础 -- CSS像素和物理像素
逻辑像素和物理像素物理像素物理像素是指设备实际含有的像素点，一个设备生产之后，它的物理像素就确定了。逻辑像素可以理解为CSS像素，CSS像素的单位是px。逻辑像素和物理像素的关系在大多数情况下，1个CSS像素等于1个物理像素。在如iPhone6、7、8等手机中，由于单位面积物理像素更多，这时1个CSS像素可能等于多个物理像素，CSS像素会比1:1的情况下看起来更宽。为什么要提高单位面积的物理像素个数因为当像素越多，显示效果就越好，在不增加显示器宽高的情况下，使用2个原创 2021-09-13 22:11:44 · 551 阅读 · 0 评论 -
JavaScript的6种继承实现
JavaScript的6种继承方式原型链继承原型链继承的策略原型链继承是利用了原型链实现子类的实例可以通过原型链访问到父类的原型上的方法。原型链继承的缺点当父类构造函数中存在引用值，如数组时，因为子类的原型是父类的实例，所以子类的实例将会共享原型上的引用值，这使得instance1对于引用值的修改，也会体现到instance2上。盗用构造函数继承盗用构造函数的策略盗用构造函数会在子类的构造函数中调用父类的构造函数。通过使用call()或apply()方法，父原创 2021-09-07 20:42:55 · 100 阅读 · 0 评论 -
CSS3基础 -- 弹性盒子模型
弹性盒子模型弹性盒子作用使用弹性盒子，我们可以轻松创建自适应浏览器窗口的流动布局和自适应字体大小的弹性布局。弹性盒子特点当我们对一个元素定义它的display属性是flex或inline-flex时，这个元素就会变成一个弹性盒子，会具有弹性盒子特点。当子元素宽度之和小于父元素宽度时，所有子元素最终的宽度就是定义的宽度。当子元素宽度之和大于父元素宽度时，子元素会按照比例来划分。弹性布局的基本概念flex容器和flex items采用弹性布局的元素，称为flex容器。flex容器.原创 2021-09-05 21:51:40 · 320 阅读 · 0 评论 -
CSS3基础 -- 多列布局
多列布局多列布局作用多列布局是CSS3实现的用来解决多列布局的布局方式。多列布局常用的5个属性column-countcolumn-count用来指定多列布局的列数。column-count属性的2种属性值auto（默认值）列数由column-width属性决定。n（正整数）自动划分为n列。column-widthcolumn-width属性用来指定多列布局中每一列的宽度。column-width属性的2种属性值auto（默认值原创 2021-09-04 19:18:41 · 218 阅读 · 0 评论 -
CSS3新增选择器
CSS3新增选择器CSS 2.1中的5种选择器id选择器class选择器元素选择器群组选择器层次选择器后代选择器属性选择器属性选择器指的是通过“元素的属性”来选择元素的一种方式。元素的属性就是id、type、value等。E[attr^ = “xxx”]选中元素E中，属性attr以xxx开头的。E[attr$ = “xxx”]选中元素E中，属性attr以xxx结尾的。E[attr* = “xxx”]选中元素E中，属性at原创 2021-09-04 17:48:40 · 172 阅读 · 0 评论 -
HTML5本地储存方案
本地存储HTML 4.01中的本地存储方案在HTML 4.01中，本地存储一般只能使用cookie实现，但是cookie有很多限制。cookie的3个限制大小限制大多数浏览器只支持最大为4KB的cookie。数量限制大多数浏览器只允许每个站点储存20个cookie。cookie在默认情况下，都会随着HTTP请求发送到后台，但实际上大多数请求用不到。HTML 5的3中本地存储方案localStorage（window对象的子对象）用于永久保存客户端的少原创 2021-09-03 17:06:50 · 100 阅读 · 0 评论 -
JavaScript基础 -- 防抖和节流
防抖和节流什么时候用到防抖和节流当某一个事件的触发频率非常高，如，用户点击按钮、用户移动鼠标，为了节省浏览器资源，就需要对事件的执行做出限制。防抖防抖，就是在用户点击按钮、用户移动鼠标触发事件后，需要等待一段时间再执行事件函数，如果在等待的过程中，这个事件再次触发，那么重新计时等待。<!DOCTYPE html><html> <head> <meta charset = "utf-8"/>原创 2021-08-30 17:47:43 · 130 阅读 · 0 评论 -
JavaScript中的位运算
位操作符ECMAScript中的数值储存方式ECMAScript中的所有数值都以IEEE 754 64位存储，但进行位操作时，先把值转换为32位整数，再进行位操作，之后再把结果转换为64位。这个转换过程对于开发者是不可见的，所以就像只有32位一样。这个过程也会导致一些问题。NaN会被当成0处理。Infinity会被当成0处理。整数有符号整数有符号整数使用32位的前31位表示数值，第32位表示数值的符号。正值以真正的二进制格式存储。如果一个位是空的，那么会自.原创 2021-08-29 22:43:48 · 127 阅读 · 0 评论 -
CSS基础 -- 包含块、层叠上下文、BFC和IFC
CSS重要概念CSS有3个重要的概念包含块（containing block）BFC和IFC层叠上下文包含块（containing block）如果有2个div，其中一个是父元素，另外一个是子元素，那么父元素会决定子元素的大小和定位。包含块简单的说，就是可以决定一个元素大小和定位的元素。一般情况下，一个元素的包含块是离它最近的祖先元素的content区。当一个元素设置为position: absolute;时，这个元素的包含块是离它最近的设置了position: relative;.原创 2021-08-29 02:28:11 · 269 阅读 · 0 评论 -
CSS技巧 -- 水平居中和垂直居中
CSS技巧水平居中文本的水平居中单行文本的水平居中对元素设置text-align: center;，text-align对文本、inline元素、inline-block元素有效，对block元素无效。元素的水平居中块元素我们可以对块元素设置width，然后为块元素设置margin-left: auto; margin-right: auto;。等价写法是margin: 0 auto;注意必须对块元素设置width，这个方法才有效，如果不设置width，块元素会默认.原创 2021-08-28 21:39:48 · 150 阅读 · 0 评论 -
CSS基础 -- 使用CSS实现常见图形
CSS图形三角形我们知道，CSS中元素都是由盒子组成的，当盒子的border相交时，浏览器会在这个相交处绘制一条接合线。CSS实现三角形就利用了这个接合线，把一个元素的width和height设置为0，然后设置border-width为较大的值，然后把任选三条或两条边框的颜色设置为transparent。实际上是隐藏了部分border来形成三角形效果。带边框的三角形我们一般使用2个三角形来实现带边框的三角形。上层三角形相对于下层三角形定位布局。下层三角形设置positio.原创 2021-08-28 18:54:01 · 162 阅读 · 0 评论 -
CSS基础 -- display属性
display属性块元素和行内元素block元素块元素在浏览器显示中独占一行，并且排斥其他元素与其位于同一行。（显示效果上独占一行。）常见的6种块元素h1-h6pdivulolhr块元素可以容纳其他行内元素或块元素。块元素可以设置width属性和height属性。块元素可以定义4个方向上的margin。inline元素行内元素可以和其他元素同占一行。常见的4种行内元素strongemaspan行内元素可以包含其他.原创 2021-08-27 17:18:43 · 627 阅读 · 0 评论 -
TCP与UDP
TCP与UDPTCP是面向连接的、可靠的流协议。流是不间断的数据结构，可以把它想象成水流。TCP为提供可靠性传输，实行“顺序控制”或“重发机制”，还具备“流量控制”、“拥塞控制”。UDP是不具有可靠性的数据报协议。UDP并不保证消息一定会到达。TCP和UDP区分（TCP和UDP应该按照需求选择）TCP用于在传输层有必要实现可靠传输的情况。UDP主要用于那些对于高速传输和实时性有较高要求的通信。一个IP电话的例子如果使用TCP，数据在传输过程中如果丢失会被重发，但这.原创 2021-08-26 15:43:40 · 71 阅读 · 0 评论 -
JavaScript函数
函数函数实际上是对象在ECMAScript中，函数实际上是对象，每个函数都是Function类型的实例。因为函数是对象，所以函数名就是指向函数对象的指针。（和其他引用类型一样）。函数的3种定义方式函数声明的方式定义函数函数表达式的方式定义函数使用箭头函数定义函数（ES6新增）箭头函数（ES6新增）ES6新增了使用胖箭头（=>）定义函数表达式的语法。任何可以使用函数表达式定义函数的地方都可以使用箭头函数。如果只有一个参数，那么箭头函数可以不使用括号，只有在没有参数或有多个参数.原创 2021-08-25 15:37:37 · 105 阅读 · 0 评论 -
设置github ssh key
在任何一个地方打开git bash输入cd ~/.ssh输入命令生成密钥ssh-keygen -t rsa -C “youremail”.pub文件就是公钥文件，打开公钥文件，把内容复制。打开github，在setting中找到SSH点击new ssh key把复制的.pub文件的内容粘贴到key并add ssh key...原创 2021-08-25 02:35:07 · 264 阅读 · 0 评论 -
对象、类与面向对象编程
对象、类与面向对象编程理解对象创建自定义对象的两种方法创建自定义对象的通常方式是创建Object的一个新实例，再给这个新实例添加方法和属性使用对象字面量属性的类型对象属性分为两种数据属性数据属性有4个特性描述它们的行为[[Configurable]]，表示属性是否可以通过delete删除，是否可以修改特性，是否可以把它改为访问器属性，默认值为true。[[Enumerable]]，表示属性是否可以通过for-in循环返回，默认值为true。[[Writable]]，.原创 2021-08-24 21:24:54 · 200 阅读 · 2 评论 -
从LeetCode 5. 最长回文子串分析动态规划
详细部分见我在力扣的题解原创 2021-08-14 21:09:50 · 79 阅读 · 0 评论 -
堆的JavaScript实现和时间复杂度
完全二叉树和满二叉树具体概念可以看数和二叉树堆的简介堆也叫二叉堆，实际上是一个二叉树。堆是一个完全二叉树。堆不是最大堆就是最小堆，最小堆是任一结点是它子树中所有结点的最小值，最大堆是任一结点是它子树中所有结点的最大值。最小堆允许快速导出最小值，最大堆允许快速导出最大值。（堆排序的实现原理）最小堆的JavaScript实现（利用数组）实现代码中把每一个堆实例都会有的方法放到原型对象的好处是不会打乱全局作用域，也不会对每一个实例都实例化一个Function对象的实例。原型对象中的方法将原创 2021-08-09 12:42:01 · 174 阅读 · 1 评论 -
JavaScript学习笔记——集合引用类型
集合引用类型Object显式创建Object实例的两种方法使用new操作符和Object构造函数使用对象字面量（使用对象字面量时，并不会实际调用Object构造函数）对象属性的存取方法点语法（通常点语法是首选）中括号（在使用中括号时，要使用属性名的字符串形式）中括号的优势可以通过变量访问属性如果属性名中包含可能导致语法错误的字符，可以使用中括号Array（ECMAScript的数组是动态大小的）创建数组的四种方法使用Array构造函数如果知道数.原创 2021-07-07 16:35:16 · 116 阅读 · 0 评论 -
分治算法学习笔记
分治算法范式把问题分成几个同类子问题。递归地解决这些子问题。把子问题的解决方案组合成整体解决方案。分治算法最多的用法分治算法时间复杂度O(n log n)归并排序归并排序中的分治算法范式同类子问题：把序列分成左右两个序列。递归对子序列完成排序，当子序列只有一个元素时，递归终止。把左右两个有序序列组合成大的有序序列。归并排序的合并阶段假设我们需要合并序列A和序列B：我们的思路是：归并排序的时间复杂度分治算法的时间复杂度一般可以通过递推关系式求得。假原创 2021-07-05 08:18:16 · 132 阅读 · 0 评论 -
0-1背包问题
0-1背包问题假设有一个背包可以装物品的总重量为W，现有N个物品，每个物品重W[i]，价值V[i]，用背包装物品，求能装的最大价值。我们可以这样理解，我们有一个背包能装W重的东西和n个物品，我们想要的是找出一组物品组合使得，能装入背包的情况下，并且这组物品的价值最大。子问题由上面的描述，我们可以给出子问题的定义：Def：OPT[i][j]表示当我们装到第i个物品时，背包剩余能装的重量是j时的最大价值。Goal：OPT[n][W]最优子结构对于每一个子问题，我们有两种选择：装原创 2021-06-13 16:49:27 · 229 阅读 · 0 评论 -
递归以及递归过程分析
递归递归：就是在函数运行过程中调用自己。简单的说，递归就像是平时查字典，当你遇到了一个问题 “词A是什么意思？”，你去查了字典，但是你发现字典的解释中有一个词B你不理解，因此你又一次拿起字典查词B，终于在多次查词之后，你没有再碰到不理解的词，于是你倒回去理解了所有词的意思，并解决了一开始的问题“A 是是什么意思？”在这个过程中，字典就像是递归函数，递归终止条件就是没有再遇到不理解的词。递归的要素从上面的例子可以看出，递归有两个要素：找到重复的逻辑（不认识的词），不断缩小问题规模。明确递原创 2021-05-15 00:45:05 · 772 阅读 · 1 评论 -
JS实现二叉搜索树以及三种遍历
JS实现二叉搜索树function BST(){ this.root = null; this.insert = function(val) //用于向二叉搜索树中插入结点 { let a = new Node(val,null,null); //生成待插入结点，这时它的键是val，左子结点指针指向null，右子结点指针指向null。 if(this.root === null) //当二叉搜索树的根结点为空时，则待插入结点成为根结点。原创 2021-05-14 15:46:26 · 200 阅读 · 0 评论 -
JavaScript基础学习（一）：HTML中的JavaScript
写在之前使用<script>元素<script>的属性async属性，这是一个可选的属性，用于告诉浏览器不必等到脚本下载和执行完后再加载页面，只对外部脚本有效。defer属性，这是一个可选的属性，用于告诉浏览器立即下载脚本，但等到页面加载完毕再执行。defer和async的区别：当有多个外部脚本时，执行顺序不同：<script src="url1" defer="defer"></script><script src="ur原创 2021-05-04 10:51:31 · 428 阅读 · 3 评论 -
ES6的Set
写在之前SetSet是ES6提供的新数据类型，实际上是哈希集合，它类似于数组，但是Set中每一个元素都是唯一的。Set创建Set创建一个空Set数据结构var set = new Set();通过一个数组创建一个Set数据结构var arr = [1,1,2,3,4,2]var set = new Set(arr)可以看到原先数组中重复的元素都被去掉了，所以Set还可以用于数组去重向Set中添加元素var set = new Set();set.add(1原创 2021-04-28 19:32:47 · 94 阅读 · 0 评论 -
JS事件基础和事件处理器学习笔记
写在之前什么是事件？当我们点击<input>元素的按钮后，浏览器会进行各种操作，如： 提交表单等。在这个例子里，我们点击就是一个事件。一个事件应该被分为3部分：事件主角，是按钮、div元素等，在上面例子中，按钮就是事件主角。事件类型，是点击、移动、悬浮等，在上面例子中，事件类型是点击。事件过程，在这个事件中都发生了什么，在上面例子中，提交表单就是事件过程。JavaScript中常见事件（按事件主角划分）鼠标事件键盘事件表单事件编辑事件页面事件调用事件原创 2021-04-25 20:16:07 · 216 阅读 · 1 评论 -
JS字符串常用API
获取字符串长度我们使用length属性来获取字符串长度。StringObject.length把字符串所有字母变成大写或小写.toLowerCase()方法用于把字符串中所有字母变成小写。.toUpperCase()方法用于把字符串中所有字母变成大写。获取字符串中指定位置的字符.charAt(n)方法用于获取字符串中指定位置字符，n是字符串的下标。如果不加入参数，默认值是0，取字符串第一个字符。截取字符串.substring()方法用于截取字符串。StringObj原创 2021-04-24 11:47:26 · 111 阅读 · 0 评论 -
JS中使用正则表达式
写在之前什么是正则表达式？正则表达式(Regular Expression)，常用来进行文本搜索、文本搜索替换操作。正则表达式语法/匹配模式/修饰符，正则表达式的修饰符是可选的。JS中常把正则表达式用于两个字符串方法：.search()方法.replace()方法匹配模式方括号表示查找某个范围内的字符匹配模式作用[a-z]查找任何从a-z的字母[abc]查找方括号内的任何一个字符[0-9]查找0-9任何一个数字[xy原创 2021-04-24 11:22:04 · 98 阅读 · 0 评论 -
DOM和DOM如何获取元素
写在之前什么是对象？说到对象就不得不提到类的概念，类是对真实世界的抽象，类中具有属性、方法，如：人类就是一个类，这个类中具有如身高等属性，以及吃饭、喝水等方法。对象就是对类的实例化，如：对于人类这个类，一个具体的人就是这个类的实例化，也就是所说的对象。DOM什么是DOM？DOM是指文档对象模型(Document Object Model)，DOM提供了动态添加或删除元素的方法。DOM把每一个元素都看成是一个对象，如果想要操作某一个元素，那么需要利用这个对象的属性和方法来进行操作原创 2021-04-23 23:31:34 · 150 阅读 · 0 评论 -
JS数组
写在之前什么是数组？数组是由n个数据类型相同的元素组成的有限序列，也就是线性表。但是我们也可以把不同数据类型的元素放在一个数组里，如下图：虽然这样是对的，但是我们不推荐这样做。创建数组JavaScript中创建数组一共有两种方法：使用关键字new。var 变量名 = new Array(元素1，元素2，……)简写形式创建。var 变量名 = [元素1，元素2，……]获取数组长度length属性用于获取数组的长度。数组的各种方法JS数组常用A原创 2021-04-23 21:33:13 · 73 阅读 · 0 评论 -
HTTP是无状态的
写在之前在会话跟踪技术中总会提到HTTP是无状态的，那么什么是HTTP是无状态的呢。有状态的协议有很多网络协议是有状态的，如：TCP协议。TCP协议客户端首先向服务器端发送SYN = 1 的连接请求。服务器端向客户端返回 SYN = 1, ACK = 1 的确认信息。客户端收到确认信息，检查发现ACK = 1，于是客户端向服务器端发送ACK = 1的确认信息，至此TCP连接正式建立。从上面的TCP三次握手可以看到，不管是客户端还是服务器端在建立TCP连接的过程中，必须记住现在的状原创 2021-04-23 02:35:24 · 344 阅读 · 0 评论 -
报文、报文段、分组、帧的概念
报文(message)我们将应用层的信息分组称为报文(message)。报文(message)包含了完整的信息，不同的报文长短不需要一致。报文(message)在传输的过程中，会不断被封装成分组、包、帧来传输，封装方式是添加报文头。报文头就是由一些控制信息组成的。报文段(segment)在传输层进行传输的信息单元被称为报文段。分组(packet)为了提高传输的性能和可靠性，用户发送的信息会被分成更小的部分，并再每个部分前面加上报文头，有时候也会加上尾部。分组(packet)是指在原创 2021-04-22 23:06:49 · 2892 阅读 · 0 评论 -
JavaScript中的闭包
闭包的定义如果一个函数内部嵌套了其他函数，并且这个内部函数引用了外部函数的局部变量，那么这个内部函数和和对其外部变量的引用的组合叫做闭包(closure)。闭包的定义显然很难理解，为了帮助理解，下面我们来看一段代码。 function parent() { var num = 100; function son() { alert(num); } return son; } var son1 = parent(); son原创 2021-04-22 13:49:59 · 96 阅读 · 0 评论 -
let、var、const的区别
写在之前作用域：ES5中有全局作用域、函数作用域。ES6加入了块作用域。全局作用域：全局都可访问。函数作用域：只能在函数内部访问。只能在代码块里访问，代码块由 {} 括起来。提出时间不同var是由es5提出的。let、const是由es6提出的。constconst声明的时候必须对其赋值。const var1; //程序报错const var2 = "";const var3 = 1;const声明的是常量，不能对其值进行修改。如果const声明的是O原创 2021-04-22 12:20:08 · 108 阅读 · 0 评论 -
JS在超链接中调用函数和在事件中调用函数
在超链接中调用函数在超链接中调用函数，是指在<a>元素的href属性中使用 javascript:函数名 的形式来调用函数，当用户点击超链接时，就会调用该函数。<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <script type="text/javascript"> function test()原创 2021-04-22 11:45:48 · 1591 阅读 · 0 评论 -
JS求水仙花数
计算水仙花数JavaScript中求幂，不能使用，如：a^3的方式，只能使用，如：aaa，或Math.pow(a,3); 。<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <script type="text/javascript"> var str = ""; function judge(num)原创 2021-04-21 21:18:39 · 119 阅读 · 0 评论 -
JS判断一个数是整数还是小数
判断一个数是整数还是小数当一个数是整数时，如：123，那么用parseInt()和parseFloat()转换它的字符串，结果是一样的。当一个数是小数时，如：123.12，那么用parseInt()和parseFloat()转换他的字符串，结果是不一样的。利用这个性质，我们可以利用parseInt()和parseFloat()来判断一个数是整数还是小数。<!DOCTYPE html><html> <head> <meta cha原创 2021-04-21 20:57:34 · 3427 阅读 · 0 评论 -
JavaScript中Number类型和String类型的互相转换
数据类型转换JS中一共有两种类型转换：隐式类型转换，是指JavaScript自动进行的类型转换。显式类型转换 ，是指我们手动用代码进行的类型转换。字符串转数字函数作用Number()用于把所有只有数字的字符串转成数字，如“123”parseInt()用于把首字母是数字的字符串中数字的整数部分转成数字，如“123hhh”parseFloat()用于把首字母是数字的字符串中数字的整数和小数部分转成数字，如“123.3hhh”Number()&原创 2021-04-21 20:26:09 · 2097 阅读 · 1 评论 -
CSS定位布局
写在之前固定布局优势：可以精准定位页面中的任何元素。劣势：当屏幕大小不确定时会出现一些问题。浮动布局优势：定位灵活。劣势：不容易控制，当对两个元素同时设置float属性时，会出现问题，需要使用clear属性。定位布局position属性用于实现定位布局，position属性一共有4种属性值。属性作用fixed用于固定布局relative用于相对布局absolute用于绝对布局static用于静态布局，是默认值固定布局原创 2021-04-21 01:58:51 · 134 阅读 · 0 评论