2020年12月_雪急飞绪

原创 Yapi 接口平台（Windows、Linux 在线离线安装部署）

yapi可视化安装安装 Node、MongoDB**安装Node注意：**最好安装14版本之前的，推荐12版本的，不然可能Node版本过高，导致无法成功部署下载链接：Node v12.12.0/ (nodejs.org)**安装MongoDB注意：**选择 Custom：自定义安装路径。安装MongDB需要取消这个勾选下载链接：Downloads for win32 (mongodb.org)配置Node淘宝源npm config set registry https://regis

2020-12-30 16:15:40 4082 2

原创 JS 检测公有属性方法封装（使用ES5方法）

检测属性方法in检测当前对象是否存在某个属性，不论是公有还是私有，只要有，返回 true[attr] in [object]function Fn() { this.age = 14; this.name = "lion";}Fn.prototype.category = "animal";let f = new Fn();console.log("name" in f); // trueconsole.log("category" in f); // tr

2020-12-28 15:57:47 281

原创 JS 实现图片延迟加载（懒加载）

实现原理结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色）最开始，img 的 src 设置默认背景图，并把图片真实地址放到自定义属性中（比如：data-src ）当 JS 监听到该图片元素进入可视窗口时，将自定义属性中的地址放到 src 属性中，达到懒加载效果作用：防止页面一次性向服务器发送大量请求，导致页面卡顿全部加载会耗费大量流量预备知识：clientHeight：当前盒子可视区域的高度（height+上下padding

2020-12-20 23:31:39 1256

原创 JS中出现undefined和null情况

undefined变量提升阶段，只声明未定义，返回 undefined函数没设置返回值（return），返回 undefined函数有形参但没传实参，返回 undefined获取对象不存在的属性，返回 undefinedtypeof 一个不存在的变量，返回 undefinedJS 严格模式，调用函数但函数前面没有.（排除显示绑定），this 是 undefinedconsole.log(a); // undefinedvar a = 1;function fn1() {}conso

2020-12-20 19:22:44 1618 2

原创 jQuery 源码浅析

JS 代码执行的环境：浏览器：PC端、移动端【webkit、gecko、trident、blink…】Hybrid 混合APP开发，把H5页面嵌入native app（IOS/安卓）的webview中【webkit】node，一个基于V8引擎，渲染和解析JS的环境。没有window，全局对象global小程序判断环境（闭包应用）为什么 jQuery 即能在浏览器中运行也能在 webpack 下运行形参 A 检测大概是什么环境执行如果 A===window 说明：浏览器、webvi

2020-12-20 16:28:09 183

原创 JS 深浅拷贝

JS基本数据类型基础数据类型按值进行访问的，可以操作保存在变量中的实际值引用数据类型，不允许直接访问值，不能直接操作对象的内存空间，在操作对象时，实际操作的是引用存储方式再看一下存储方式，结合深浅拷贝的定义就会理解一些了基础类型存在栈中引用类型同时保存在栈内存和堆内存深拷贝和浅拷贝浅拷贝方式直接进行赋值赋值引用 a 和 b 都指向同一个对象var a = [1, 2, 3];var b = a;如果拷贝的是普通对象Object.assign(tar

2020-12-20 16:21:58 94

原创圣杯布局和双飞翼布局

圣杯布局和双飞翼布局，虽然两者的实现方法略有差异，不过都遵循了以下要点：两侧宽度固定，中间宽度自适应中间部分在 DOM 结构上优先，以便先行渲染允许三列中的任意一列成为最高列圣杯布局页面分为左中右3个部分，其中左右两侧固定宽度，而中间部分自适应html结构这里把 center 部分放在最前面，然后是 left、right<div class="container"> <div class="center">中间自适应</div>

2020-12-20 16:20:33 127

原创 7.图_Python

图Graph术语图Graph是比树更为一般的结构，也是由节点和边构成，实际上树时一种具有特殊性质的图顶点Vertex（也称“节点Node”），是图的基本组成部分，顶点具有名称标识key，也可以携带数据项payload边Edge(也称“弧Arc”)，作为2个顶点之间关系的表示，边连接两个顶点；边可以试无向或者有向的，相应的图称作“无向图”和“有向图”权重Weight，为了表达从一个顶点到另一个顶点的代价，可以给边赋权定义一个图G可以定义为G=(V,E)，其中V是顶点的集合，E是边的集合，E

2020-12-20 14:04:13 308

原创 JS实现轮播图小米（含效果图/jQuery版本）

实现效果多张图片自动轮播展示，对应分页器（小圆点）高亮显示点击分页器（小圆点）切换对应图片点击前进/后退按钮切换当前图片的前一张/后一张图片图片无缝切换，第一张图片和最后一张图片无缝切换鼠标滑入停止图片切换，鼠标移出开始图片切换前进后退按钮防抖index.html（html+css）创建 index.html 文件，粘贴如下代码<!DOCTYPE html><head> <meta charset="UTF-8"> &lt..

2020-12-19 14:14:09 760 1

原创 JS 类数组转数组的几种方法（四种）

总结for 循环[].slice.call() （calll方法：[].map.call()）ES6语法：Array.from()4.ES6语法：展开运算符原生 js 获取 DOM 元素集合是一个类数组对象，所以不能直接利用数组对象（比如：sort、forEach），需要转换为数组后，才可以使用下述方法使用 arguments 当伪数组function fn() { var res = toArr(arguments); console.log(res);}fn("A"

2020-12-13 15:04:47 6304 1

原创 JS 常用数组方法封装（包含splice）

封装数组方法push封装数组方法pop封装数组方法Shift封装数组方法Unshift封装数组方法splice封装数组方法concat封装数组方法slice封装数组方法flat封装数组方法reverse封装数组方法sort封装数组方法indexOf封装数组方法lastIndexOf封装数组方法includes封装数组方法forEach封装数组方法map封装数组方法reduce

2020-12-12 20:16:19 1083 1

原创 JS实现商城排序

商城排序案例请求数据创建全局变量 data 存放请求到的数据var data = null;var xhr = new XMLHttpRequest();xhr.open("get", "data/data.json");xhr.onreadystatechange = function () { if (xhr.readyState == 4 && /^2\d{2}/.test(xhr.status)) { data = JSON.parse(xh

2020-12-06 23:47:47 749

原创 JS 继承的四种方式

继承继承机制使得不同的实例可以共享构造函数的原型对象的属性和方法原型链继承基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道每个构造函数都有一个原型对象（prototype），原型对象都包含一个指向构造函数的指针（constructor），而实例都包含一个指向原型对象的内部指针（__proto__）那么，如果让一个构造函数的原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针想要让 B 所

2020-12-04 00:55:03 224

原创 JS 检测数据类型的四种方式

JavaScript 有八种数据类型：基本数据类型：Boolean、Number、String、null、undefined、Symbol(ES6新增)、BigInt（ES2020引入）引用数据类型：ObjectSymbol：表示独一无二的值BigInt：用来解决 JavaScript 中数字只能到 53 个二进制位，大于这个范围的整数，无法精确表示typeof返回结果是一个字符串（全小写字母），可返回的类型有：“number”“string”“boolean”“undefined

2020-12-03 21:03:46 357

原创 JS this指向问题

在绝大多数情况下，函数的调用方式决定了 this 的值。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同，所以总结 this 值的规律是有必要的全局作用域 this 指向无论是否在严格模式下，在全局作用域中 this 都指向全局对象console.log(this); // Window "use strict"console.log(this); // Window 私有作用域 this 指向在函数内部，this 的值取决于函数调用的方式通俗的来说，就

2020-12-01 20:10:00 226

雪急飞绪博客