- 博客(17)
- 收藏
- 关注
RSS订阅原创 CSS篇-CSS3 选择器总结 及优先级
css3 选择器总结 及他们的优先级优先级问题常用的选择器总结1. 通用选择器2. 元素选择器 （以下以element来指代元素标签名3. 类式选择器4. id选择器5. 组合选择器6. 后代选择器7. 子类选择器8. 兄弟选择器9. 属性选择器 暂时记录以下三种10. 伪类选择器11. 否定伪类选择器 :not(selector)优先级问题浏览器初始继承样式 优先级 最低 0 是出生的时候带的选择器优先级权重标签选择器低1类 , 伪类选择器 , 属性选择器低10
2022-08-06 12:14:45
332
原创 数据结构与算法 - 基础篇
数据结构与算法 - 基础篇前文 概念明确两个基本概念，数据结构和算法的关系 数据结构所表达的含义是数据所存储的一种方式，简称数据结构。 算法：对于操作一系列数据所需要的操作方法，简称算法。 算法的执行操作是针对特定数据结构存储的数据，算法因数据结构而诞生，数据结构因算法而存在，两者紧密相连。算法精髓 ： 复杂度分析（时间、空间、最好、最坏、平均、均摊） 复杂度分析的由来，前辈们已经通过大量的验证，发表出大量的算法思想与算法实现， 在适当的场景下选择合适的算法，有利于提高开发性能，
2022-08-06 12:14:28
208
原创 CSS篇 - 垂直水平居中
垂直水平居中 的几种实现方式1. 最简单// margin:0 auto;// line-height等于height .outer { width:200px;padding:200px; background-color:pink; } .inner { width:100px;height:100px; margin:0 auto;line-height:100px; text-align:
2022-08-06 12:14:11
82
原创 CSS篇 - 三栏布局
css 实现 三栏布局常见布局方式： float布局、position定位、table布局、弹性（flex）布局、网格(grid)布局。前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px)，中间宽度自适应.总结: 5种实现三栏布局的方式,那么他们的优缺点呢？1、fl
2022-08-06 12:13:59
195
原创 JS篇 - JSONP 通用函数封装
JSONP 通用函数封装function CommonJSONP({url,params,callback}){ return new Promise((resolve,reject)=>{ let script = document.creatElement('script') window[callback] = function(data){ resolve(data); document.body.removeChild(script) } params = {
2022-08-06 12:13:34
215
原创 JS篇 - promise专题
PromisePromise的状态： panding 进行中 fulfilled 成功 reject 失败利用promise.resolve(value)函数的特点： 返回一个状态由给定的value决定的Promise对象。 如果该值是thenable(即带有then方法的对象)， 返回的Promise对象的最终状态由then方法执行决定， 否则的话（该value为空、基本类型或不带then方法的对象）， 返回的Promise对象状态为fulfilled， 并且将该value传递给对
2022-08-06 12:13:08
128
原创 JS篇 - 深拷贝（防栈溢出函数）
防栈溢出函数 深拷贝优点：（1）不会栈溢出（2）支持很多层级的数据function cloneLoop(x) { const root = {}; // 栈 const loopList = [ { parent: root, key: undefined, data: x, } ]; while(loopList.length) {
2022-08-05 18:54:14
284
原创 JS篇 - 节流和防抖
防抖定义：动作停止后的时间超过设定的时间时执行一次函数。这里的动作停止标识你停止了出发这个函数，从这个时间点开始计算，但间隔时间等于你设定的时间，才会执行里面的回调函数。若你一直在触发这个函数并且两次触发间隔小于设定时间，则函数一直不会执行。应用场景：1. search联想搜索，用户在不断输入值是，用防抖来节约请求资源；2. window触发resize的时候，不断地调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。function debance(fn,delay){ le
2022-08-05 18:53:26
109
原创 JS篇 - 排序算法
commonjs 一个交换变量的函数 function commit(arr,left,right){ var temp = arr[right]; arr[right] = arr[left]; arr[left] = temp; } // 冒泡排序 function maopaoSort(arr){ for(var len = arr.length,i=len;i>0;i--){ for(var j = 1;j<i;j++){ if(arr[j]&
2022-08-05 18:53:10
34
原创 JS篇 - Array 属性 和 方法
Array 属性 和 方法属性Array.length// Array 构造函数的 length 属性，其值为 1(注意该属性为静态属性，不是数组实例的 length 属性)。get Array[@@species]// 返回 Array 构造函数。Array.prototype // 通过数组的原型对象可以为所有数组对象添加属性。方法Array.from()// 从类数组对象或者可迭代对象中创建一个新的数组实例。Array.isArray()// 用来判断某个变量是否是一个数
2022-08-05 18:52:55
281
原创 HTTP篇 - 谈谈浏览器的缓存机制
浏览器的缓存机制指的是通过在一段时间内保留已接收到的 web 资源的一个副本，如果在资源的有效时间内，发起了对这个资源的再一次请求，那么浏览器会直接使用缓存的副本，而不是向服务器发起请求。使用 web 缓存可以有效地提高页面的打开速度，减少不必要的网络带宽的消耗。web 资源的缓存策略一般由服务器来指定，可以分为两种，分别是强缓存策略和协商缓存策略。使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expire
2022-08-05 18:52:18
97
原创 JS篇 - Ajax
Ajax是什么？如何创建一个Ajax？说明：ajax 异步的javascript 和XML技术XHR 全称 XMLHttpRequest 技术特点在于 页面无需刷新；思路：1. 创建XHTMLHttpRequest对象,也就是创建一个异步调用对象2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息3. 设置响应HTTP请求状态变化的函数4. 发送HTTP请求5. 获取异步调用返回的数据6. 适用JavaScript 和 DOM 实现局部刷新一般实现：原生写
2022-08-05 18:51:52
35
原创 DOM - Virtual DOM、DOM树差异比较
什么是Virtual DOM？为什么 Virtual DOM比原生DOM快？我对 Virtual DOM 的理解是，首先对我们将要插入到文档中的 DOM 树结构进行分析，使用 js 对象将其表示出来，比如一个元素对象，包含 TagName、props 和 Children 这些属性。然后我们将这个 js 对象树给保存下来，最后再将 DOM 片段插入到文档中。当页面的状态发生改变，我们需要对页面的 DOM 的结构进行调整的时候，我们首先根据变更的状态，重新构建起一棵对象树，然后将这棵新的对象树和旧的对象
2022-08-05 18:51:30
122
原创 JS篇 - nextTick的原理
nextTick的原理实现：let callbacks = []; // 回调函数let pending = false;function flushCallbacks(){ pending = false; // 把标志还原为false for (let i = 0; i < callbacks.length; i++) { callbacks[i](); }}let timerFunc;// 先采用微任务并按照优先级优雅降级的方式实现异步刷新if (typeof Promi
2022-08-05 18:50:37
430
1
原创 JS篇 - 斐波那契数列
斐波那契数列递归版本function fac(n) { if (n <= 2) { return 1; } else { return fac(n-1) + fac(n-2) }}尾递归优化版本function fac_tail(n, acc1, acc2) { if (n < 2) { return acc1; } else { return fac_tail(n-1, acc2
2022-08-05 18:50:15
41
原创 JS篇 - 实现new、call、apply、bind、深拷贝、EventHub、promise、reduce、instanceof
手写bind用法：把新的this绑定到某个函数func上，并返回func的一个拷贝。使用：let boundFunc = func,bind( thisArg [, arg1 [, arg2 [, ...argN]]] )实现：1.初级：优点：只使用ES6新语法，代码简洁；缺点：不兼容IE等古老者function bind_1(asThis , ...args) { const fn = this; //这里的this 就是调用bind的函数 func return function(..
2022-08-05 18:49:31
183
原创 JS篇 - JS 函数柯里化
JS 函数柯里化实现以下 add(1)(2)(3) = 6;add(1,2,3)(4) = 10;add(1)(2)(3)(4)(5) = 15;function add(){ //第一次执行是，定义一个数组专门用来存储所有的参数 var _args = Array.prototype.slice.call(arguments); //在内部神明一个函数， //利用闭包的特性保存 _args 并收集所有的参数 var _adder = function(){ _args.pu
2021-06-29 11:42:28
343
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人