喻先生_-CSDN博客

原创前端自适应布局px、rpx、vw 使用及转换

利用插件 postcss-px-to-viewport 或者 postcss-plugin-rpx2vw 实现打包处理（详细配置可自行搜索插件配置）在 sass 中如何使用转化函数。

2023-05-30 11:11:12 1125

字典：是以[键, 值]的形式来存储元素，字典也称作映射、符号表或关联数组。与Set 类相似，ECMAScript2015同样包含了一个Map 类的实现，即我们说的字典。function defaultToString(item) { if (item === null) { return 'NULL' } else if (item === undefined) { return 'UNDEFINED' } else if (typeof item

2022-05-22 15:41:49 192

原创数据结构与算法—集合

集合是由一组无序且唯一（即不能重复）的项组成的集合运算：并集：对于给定的两个集合，返回一个包含两个集合中所有元素的新集合交集：对于给定的两个集合，返回一个包含两个集合中共有元素的新集合差集：对于给定的两个集合，返回一个包含所有存在于第一个集合且不存在于第二个集合的元素的新集合（意思就是存在于A中，但不存在于B中）子集：验证一个给定集合是否是另一个集合的子集（意思就是集合A中的每一个元素，也需要存在于集合B）class Set { constructor() {

2022-05-22 15:34:28 447

原创数据结构与算法—链表

链表链表存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（也称指针或链接）组成。链表与数组的对比：相对于传统的数组，链表的一个好处在于，添加或移除元素的时候不需要移动其他元素。在数组中，我们可以直接访问任何元位置的任何元素，而要想访问链表中间的一个元素，则需要从起点（表头）开始迭代链表直到找到所需的元素。class Node { constructor(element) { this.el

2022-05-22 15:10:09 326

原创数据结构与算法—队列

队列：遵循的是先进先出（FIFO First In First Out）原则的一组有序的项。队列在尾部添加新元素，并从顶部移除元素。最新添加的元素必须排在队列的末尾isEmpty(): 如果队列中不包含其它元素，返回true，否则返回falsesize(): 返回队列包含的元素个数clear(): 清空队列toString(): 返回字符串形式的队列enqueue(element): 向队列尾部添加一个新的项dequeue(): 移除队列的第一项（即排在队列最前面的项）并返回被移除的元素pe

2022-05-10 00:30:34 318

原创数据结构与算法—栈

栈：是一种遵循先进后出(LIFO)原则的有序集合。新添加或待删除的元素都保存在栈的同一端，称作栈顶，另一端就叫栈底1.创建一个基于数组的栈push: 添加一个（或几个）新元素到栈顶pop：移除栈顶的元素，同时返回被移除的元素peek：返回栈顶的元素，不对栈做任何修改isEmpty: 如果栈里没有任何元素就返回true，否则返回falsesize: 返回栈里的元素个数clear: 移除栈里的所有元素两种方式：function Stack() { this.items = []

2022-05-09 00:41:05 366

转载深拷贝与浅拷贝

浅拷贝创建一个新对象，这个新对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。function clone(target) { if(typeof target !== 'object' || target === null) return target; let cloneTarget = Array.isArray(target) ? [] : {}; for(c

2021-09-30 17:29:44 75

原创 JS排序方法

快速排序思路：分区：从数组中任意选择一个“基准”，所有比基准小的元素放在基准前面，比基准大的元素放在基准的后面。递归：递归地对基准前后的子数组进行区分Array.prototype.quickSort = function(){ const rec = arr => { if(arr.length <= 1) return arr // 递归终结条件 const left = [] const right = [] const mid = arr[0] for

2021-07-13 18:12:21 64

转载 MVVM 和 MVC

MVVVM在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，VM也能监听到视图的变化，然后通知数据做相应改动，这实际上就实现了数据的双向绑定。并且V和VM可以进行通信。MVVM模式的优点:低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。可重用性: 可以把一些视图逻辑放在

2021-07-13 15:39:31 558

原创前端浏览器相关知识

从输入url 到渲染页面的整个过程对DNS进行解析获取ip地址根据得到的ip地址进行发送HTTP请求服务器处理HTTP请求并返回响应给浏览器浏览器将HTML解析成 DOM 树将 CSS 解析成 CSSOM 树将 DOM 树和 CSSOM 树构造成 render 树JS 根据得到的 render 树能够得到节点的几何属性，计算出每个节点在屏幕中的位置按照计算出来的规则，绘制到屏幕上为何将 CSS 放到 head 中在渲染DOM 节点前把CSS加载完，能够避免重复渲染，且如果未先加载

2021-07-13 11:28:54 122

原创 React 常见的生命周期

import React from 'react'// 三个阶段：装载阶段（3）、更新阶段（2）、销毁阶段（1）export default class LifeDemo extends React.Component { // 装载阶段（3） // 执行顺序：constructor / render / componentDidMount // 构造器 // super 必须是第一行代码，声明式变量定义在 this.state 中 // 在构造器中，prop

2021-07-08 23:34:46 1083 1

转载为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？

为什么Redux的reducer里不能有异步操作。1.先从Redux的设计层面来解释为什么Reducer必须是纯函数如果你经常用React+Redux开发，那么就应该了解Redux的设计初衷。Redux的设计参考了Flux的模式，作者希望以此来实现时间旅行，保存应用的历史状态，实现应用状态的可预测。所以整个Redux都是函数式编程的范式，要求reducer是纯函数也是自然而然的事情，使用纯函数才能保证相同的输入得到相同的输入，保证状态的可预测。所以Redux有三大原则：单一数据源，也就是state

2021-07-01 15:45:11 2607

转载 Virtual DOM 真的比操作原生 DOM 快吗

1. 原生 DOM 操作 vs. 通过框架封装操作。这是一个性能 vs 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。针对任何一个 benchmark，我都可以写出比任何框架更快的手动优化，但是那有什么意义呢？在构建一个实际应用的时候，你难道为每一个地方都去做手动优化吗？出于可维护性的考虑，这

2021-07-01 10:37:51 303

转载 React setstate机制

本文转载于：https://github.com/sisterAn/blog/issues/26在React中，如果是由React引发的事件处理（比如通过 onClick 引发的事件处理），调用setState不会同步更新 this.state，除此之外的 setState 调用会同步执行 this.state。所谓“除此之外”，指的是绕过React 通过 addEventListener 直接添加的事件处理函数，还有通过 setTimeout/setInterval 产生的异步调用。原因：在 Re

2021-06-30 14:55:37 110

原创 javaScript 手写

数组扁平化及去重升序排列const arr = [1,5,6,[3,4,5,1],[3,[9,17,14],[6,8,[3,12,11]]]]//使用 Infinity，可展开任意深度的嵌套数组console.log([...new Set(arr.flat(Infinity))].sort((a, b) => a - b))手写一个Array.prototype.flat = function (){ return [].concat(...this.map(item => Ar

2021-06-30 14:34:37 429

转载前端需要掌握的 HTTP

HTTP状态码状态码分类1xx 服务器收到请求2xx 请求成功，如 2003xx 重定向，如 3024xx 客户端错误，如 4045xx 服务端错误，如 500常用状态码200 成功301 永久重定向（配合 location，浏览器自动处理）302 临时重定向（配合location，浏览器自动处理）304 资源未被修改404 资源未找到403 没有权限500 服务器错误504 网关超时methods传统的methodsPOST 向服务器提交数据GET 获取服务

2021-06-29 22:48:02 152

原创事件代理(事件委托)

事件代理/** * 事件代理(事件委托) * “事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown...）委托给父元素，让父元素担当事件监听的职务。 * 事件代理的原理是DOM元素的事件冒泡。 * 优点：1.大量节省内存占用，减少事件注册；2.可以实现当新增子对象时无需再次对其绑定（动态绑定事件）；3.代码简洁 * */// 编写一个通用事件代理函数function bindEvent(elem, type, selector, fn) { if(fn ==

2021-06-27 22:32:40 140

原创 DOM 和 BOM

DOM的本质DOM的本质：HTML语言在浏览器中解析出来的树形结构DOM 性能优化1.DOM 查询做缓存// 不缓存 DOM 查询结果for( let i = 0; i < document.getElementsByTagName('p').length; i++ ) { // 每次循环，都会计算 length，频繁进行 DOM 查询}// 缓存 DOM 查询结果const pList = document.getElementsByTagName('p')const l

2021-06-27 21:18:06 80

原创 JS 进阶知识

Promisepromise 三种状态1.pending、resolved(fulfilled)、 rejected2.pending --> resolved(fulfilled) 或者 pending --> rejected3.变化不可逆状态的表现1.pending 状态，不会触发 then 和 catch2.resolved(fulfilled) 状态，会触发后续的 then 回调函数3.rejected 状态，会触发后续的 catch 回调函数then 和 catc

2021-06-27 18:05:18 120

原创 js基础知识点

1.值类型与引用类型值类型：值类型的变量会保存在栈内存中，如果在一个函数中声明一个值类型的变量，那么这个变量当函数执行结束之后会自动销毁。常见值类型：NumberStringundefinedBooleanSymbolnull引用类型：引用类型的变量名会保存在栈内存中，但是变量值会存储在堆内存中，引用类型的变量不会自动销毁，当没有引用变量引用它时，系统的垃圾回收机制会回收它。常见引用类型：ObjectArray特殊引用类型：Function，也可以单独称为函数类型

2021-06-26 23:23:08 237

原创 HTML与CSS相关知识

HTML与CSS面试题1.HTML语义化增加代码可读性，有利于维护代码和添加样式让搜索引擎更容易读懂（seo优化）在css未能加载出来时页面仍能阅读代码量可以变小，浏览器解析更快便于其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以语义的方式来渲染网页2.块状元素 & 内联元素块状元素：display: block / table，有 div p ul ol h1 h2 table 等等。内联元素：display: inline / inline-block，有span

2021-06-26 11:09:43 79

原创封装ajax请求

封装ajax请求 + 把GET请求和POST请求封装成一个函数 + 我们需要发送请求的时候直接低啊用 + 因为GET和POST请求参数是不一样的 -->封装成两个函数 -->一个叫做getSend() -->一个叫做postSend() 1 写一遍完整流程 2 把步骤封装起来

2020-10-24 14:49:54 101

原创闭包的特点&&闭包面试题

闭包的特点(优点和缺点并行) 1 延长了变量的生命周期 + 优点:因为执行空间不销毁,变量也就没有销毁 + 缺点:因为执行空间不销毁,会一直存在内存中 2 可以访问函数内部的私有变量 + 优点:利用闭包函数可以访问函数内部的私有变量 + 缺点:执行空间不会销毁,会一直存在内存中 3 保护私有变量(只要

2020-10-24 14:46:04 545

原创 jQuery的筛选器

jQuery的筛选器 + 用在jQuery选择的元素集合的后面 + 都是方法,为了对已经选择出来的元素进行二次筛选筛选器 1 first() ==>筛选集合里面的第一个元素 2 last() ==>筛选集合里面的最后一个元素 3 eq(n) ==>筛选集合里面的索引是n的那

2020-10-24 14:37:25 431

原创 JS冒泡排序详细解读

排序:就是把一个乱序的数组,通过我们的处理,让他变成一个有序的数组冒泡排序 ==>先遍历数组,让挨着的两个进行比较,如果前一个比后一个大,那么就把两个数据换个位置 ==>数组遍历一遍以后,那么最后一个数字就是最大的那个了 ==>然后进行第二遍遍历,还是按照之前的规则,第二大的数字就会跑到倒数第二个位置了 ==>以此类推,最后就会按照顺序把数组排好了 1 *...

2020-08-31 21:36:31 656

原创 JS 实现等腰三角形（空心）和（实心）

等腰三角形（空心） * * * * * * * // 先实现等腰三角形（实心） // 第一行:j=1 打印:三(4-j)个空格,一(2*j-1)个星星 // 第二行:j=2 打印:两(4-j)个空格,三(2*j-1)个星星 // 第三行:j=3 打印:一(4-j)个空格,五(2*j-1)个星星 // 第四行:j=4 打印:零(4-j)个空格,七(2*j-1)个星星 //

2020-08-27 21:44:50 1594

原创 JS 输出20-80之间能被3整除的整数，每5个一行

//方法一varstr='';varj=0;for(vari=20;i<=80;i++){if(i%3==0){j++;str=str+i+'\t';}if(j%5==0){str+=...

2020-08-26 18:34:03 2452 1

原创＜iframe＞标签框架属性如何使用

2020-08-25 18:56:47 290

原创 visibility:hidden/隐藏与 display:none的区别

visibility:hidden;和display:none;的区别：visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。...

2020-08-25 18:52:23 476

原创浮动元素父元素高度自适应（高度塌陷）

浮动元素父元素高度自适应（高度塌陷）当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷高度塌陷的解决方法hack1：给父元素添加声明overflow:hidden;(触发一个BFC) （缺点：超出元素会被隐藏）hack2:在浮动元素下方添加空div,并给该元素添加声明：div{clear:both; height:0; overflow:hidden;} （缺点：造成代码冗余）hack3:万能清除浮动法选择符:after{content:"";clear:bo...

2020-08-25 18:48:10 291 1

weixin_49757069的博客