JS
关注
分享
扫一扫
文章平均质量分 76
记录学习路线
雪急飞绪
专攻JS和Python，现役前端
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
函数式编程范式
目录文章目录目录认识函数式编程一等公民的函数函数是一等公民高阶函数闭包函数式编程基础纯函数柯里化（Haskell Brooks Curry）函数组合Point FreeFunctor（函子）函子MayBe 函子Either 函子IO 函子Task 函子Pointed 函子Monad 函子认识函数式编程函数式编程指北阮一峰 函数式编程入门为什么要学习函数式编程随着 React 的流行受到越来越多的关注Vue 3 也开始拥抱函数式编程函数式编程可以抛弃 this打包过程中可以更好的利用原创 2022-04-19 17:36:06 · 1046 阅读 · 0 评论 -
ES6-ES11学习
尚硅谷Web前端ES6教程，涵盖ES6-ES11推荐结合： 《ECMAScript 6 入门教程 学习，查漏补缺ECMAScript 相关介绍ECMA（European Computer Manufacturers Association）欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言Ecma 国际制定了许多标准，而 ECMA-262.原创 2021-11-10 18:38:54 · 2389 阅读 · 0 评论 -
Axios 取消请求
Axios 取消请求应用场景取消请求偶尔会用到，以下是两个工作中可能用到的场景如果一个数据请求量比较大（可能会请求错误），还没请求完就切换路由，可能会出现错误的提示框（响应拦截器中配置错误提示）导出文件或下载文件时，中途取消一个请求请求量比较大，发送新请求时需要取消上一个请求取消单个请求（结合生命周期使用）页面销毁时取消请求重复发送请求取消上一次请求import axios from 'axios'import { generatePlan } from '@/api'exp原创 2021-04-07 18:38:56 · 1384 阅读 · 0 评论 -
跨域常见的几种解决方案
跨域非同源策略请求（比较协议、域名、端口号，只要有一个不一样就是跨域）：页面的访问地址（Web地址）数据接口的请求地址情况1：开发时候是跨域的，但是服务器部署的时候是同源的修改本地 HOST【DNS解析】核心：骗过浏览器，让浏览器认为是同源，但是本质还是跨域情况2：开发和上线都是跨域的JSONP（不安全，并且只支持GET请求）其它方案document.domain + iframewindow.name + iframeH5 postMessageCORS原创 2021-05-26 09:41:12 · 507 阅读 · 0 评论 -
Canvas 学习（时钟 绘图板）
canvas画圆为什么需要用canvas，如果用onmousemove，每一次移动都会进行DOM重绘，非常消耗性能，这时我们需要看一下 canvas<div id="canvas"></div><script> canvas.onmousemove = (e) => { let div = document.createElement("div"); div.style.position = "absolute";原创 2021-05-23 13:41:21 · 238 阅读 · 0 评论 -
JS 实现 sizeOf 函数，计算 object 占用了多少个 bytes
可以参考：https://github.com/miktam/sizeofNumber：一个数字 8 字节（64 位存储）String：一个字符 2 字节Boolean：4 个字节const same = {}const testData = { a: 111, b: 'ccc', 222: false, c: same, d: same,}const seen = new WeakSet()function sizeOfObj(obj) { if (obj =原创 2021-05-16 17:06:08 · 3659 阅读 · 0 评论 -
TypeScript从入门到实践【极客时间】基础篇
网站推荐ts-playgroundts 中文手册ts 入门教程类型基础强类型与弱类型强类型语言：不允许改变变量的数据类型，除非进行强制类型转换弱类型语言：变量可以被赋予不同的数据类型静态类型与动态类型静态类型语言：在编译阶段确定所有变量的类型动态类型语言：在执行阶段确定所有变量的类型初始化npm i typescript -g# 初始化npm init -ytsc --init{ "clean-webpack-plugin": "^3.0.0", "原创 2021-04-22 09:31:26 · 1388 阅读 · 0 评论 -
手撕 Promise（then 链及 Promise 方法实现）
Promise了解 PromisePromise 是一个异步操作返回的对象，用来传递异步操作的消息可以解决的问题解决回调地狱问题，不会导致难以维护合并多个异步请求，节约时间Promise 的三种状态Pending 等待态Fulfilled 成功态Rejected 失败态使用 PromisePromise.resolve：将现有对象转为 Promise 对象，这个对象处于 resolve 状态作用：改状态发布事件池子里的方法Promise.resolve([1, 2原创 2021-02-24 11:34:31 · 685 阅读 · 0 评论 -
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 · 339 阅读 · 0 评论 -
JS 实现图片延迟加载（懒加载）
实现原理结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色）最开始，img 的 src 设置默认背景图，并把图片真实地址放到自定义属性中（比如：data-src ）当 JS 监听到该图片元素进入可视窗口时，将自定义属性中的地址放到 src 属性中，达到懒加载效果作用：防止页面一次性向服务器发送大量请求，导致页面卡顿全部加载会耗费大量流量预备知识：clientHeight：当前盒子可视区域的高度（height+上下padding原创 2020-12-20 23:31:39 · 1394 阅读 · 0 评论 -
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 · 1676 阅读 · 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 · 229 阅读 · 0 评论 -
JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色
JS实现奇偶行变色，鼠标滑上改变颜色，离开恢复颜色css 实现是通过 li:nth(odd) 和 li:nth(even) 实现的，鼠标滑上改变颜色，离开恢复颜色是通过 :hover 实现的首先搭一下基本结构<ul id="main"> <li>走在前方不迷路，迷路就去找麋鹿</li> <li>走在前方不迷路，迷路就去找麋鹿</li> <li>走在前方不迷路，迷路就去找麋鹿</li> <li&g原创 2020-11-13 09:39:46 · 2588 阅读 · 0 评论 -
JS 深浅拷贝
JS基本数据类型基础数据类型按值进行访问的，可以操作保存在变量中的实际值引用数据类型，不允许直接访问值，不能直接操作对象的内存空间，在操作对象时，实际操作的是引用存储方式再看一下存储方式，结合深浅拷贝的定义就会理解一些了基础类型存在栈中引用类型同时保存在栈内存和堆内存深拷贝 和 浅拷贝浅拷贝方式直接进行赋值赋值引用 a 和 b 都指向同一个对象var a = [1, 2, 3];var b = a;如果拷贝的是普通对象Object.assign(tar原创 2020-12-20 16:21:58 · 117 阅读 · 0 评论 -
JS实现轮播图 小米（含效果图/jQuery版本）
实现效果多张图片自动轮播展示，对应分页器（小圆点）高亮显示点击分页器（小圆点）切换对应图片点击前进/后退按钮切换当前图片的前一张/后一张图片图片无缝切换，第一张图片和最后一张图片无缝切换鼠标滑入停止图片切换，鼠标移出开始图片切换前进后退按钮防抖index.html（html+css）创建 index.html 文件，粘贴如下代码<!DOCTYPE html><head> <meta charset="UTF-8"> <..原创 2020-12-19 14:14:09 · 869 阅读 · 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 · 6601 阅读 · 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 · 1150 阅读 · 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 · 819 阅读 · 0 评论 -
JS 继承的四种方式
继承继承机制使得不同的实例可以共享构造函数的原型对象的属性和方法原型链继承基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道每个构造函数都有一个原型对象（prototype），原型对象都包含一个指向构造函数的指针（constructor），而实例都包含一个指向原型对象的内部指针（__proto__）那么，如果让一个构造函数的原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针想要让 B 所原创 2020-12-04 00:55:03 · 252 阅读 · 0 评论 -
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 · 404 阅读 · 0 评论 -
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 · 254 阅读 · 0 评论 -
JS 垃圾回收与性能优化
JavaScript 通过自动内存管理实现内存分配和闲置资源回收，基本思路：确定哪个变量不会再使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间就会自动运行。但是某块内是否还有用，属于“不可判断的”问题，意味着靠算法是解决不了的垃圾回收方法标记清理JavaScript 最常用的垃圾回收策略是标记清理（mark-and-sweep）。当变量进入环境时就将其标记为进入环境，当变量离开环境时将其标记为离开环境。随后每隔一段时间就会检测一下当前作用域中的内存，是否被占用，如果没有被占用原创 2020-11-29 22:01:47 · 623 阅读 · 0 评论 -
JavaScript变量提升（特殊性）
当浏览器开辟出供 js 执行的栈内存之后，代码并不是立即自上而下执行，而是需要先做一些事情：把当前作用域中带 var 和 function 的关键字进行提前的声明和定义（变量提升）var：只声明，未定义（不赋值）function：声明和定义（赋值）一起完成作用域中的变量提升作用域链查找原则：首先会在当前作用域中查找，如果没有的话会沿着作用域链向上查找， 直至全局作用域在全局作用域获取不到，报错：... is not defined如果是赋值语句，就相当于给全局作用域添加了这样一个属性名和属原创 2020-11-27 00:08:08 · 172 阅读 · 0 评论 -
Swiper 制作轮播图（附带效果 gif图）
Swiper官网链接：https://www.swiper.com.cn/文档链接：Swiper使用方法 、Swiper的API文档引用Swiper下载 swiper 或 使用CDN<link rel="stylesheet" type="text/css" href="./swiper/css/swiper.css" /><script src="./swiper/js/swiper.js"></script><!-- swiper6 -->原创 2020-08-26 16:24:24 · 1235 阅读 · 0 评论 -
PostCss使用
PostCSS 插件使用PostCSS CLI2_postcss.css 是源文件， 3_post.css 是生成的文件全局安装 postcss-clinpm install postcss-cli -g全局安装 autoprefixernpm install autoprefixer -g 全局安装后，就可以直接调用如下命令postcss 2_postcss.css全局安装比较方便，下面演示的是本地安装如何创建 Node.js 模块原创 2020-08-19 00:09:15 · 7304 阅读 · 0 评论 -
JS Python map/reduce/filter 应用
map/reduce/filter学了 Python 和 JavaScript，在使用 map/reduce 时感觉总弄混/记错，记录一下方便后续查看Pythonmap()第一个参数是 f，即函数对象 本身第二个是 Iterable （可迭代对象），map 将传入的函数依次作用到序列的每个元素，并把结果作为新的 Iterable 返回举例应用：乘积数字和字符串在数组中相互转换求余# 乘积>>> a = [1, 2, 3, 4, 5, 6, 7, 8]>原创 2020-07-13 18:06:00 · 283 阅读 · 0 评论 -
JS Python真假判断
问题在看算法时，出现这样的问题（真假值判断问题）JS 需要求数组的长度 才能判断为 空数组Python 不需要求数组的长度 就可以判断为 空数组JS代码while (left.length && right.length) { if (left[0] <= right[0]) { result.push(left.shift()); } else { result.push(right.shift()); }原创 2020-06-12 12:57:38 · 483 阅读 · 0 评论 -
wireshark
TCP/IP运行在TCP协议上的应用程序协议：HTTP（Hypertext Transfer Protocol，超文本传输协议），主要用于普通浏览。HTTPS（Hypertext Transfer Protocol over Secure Socket Layer, or HTTP over SSL，安全超文本传输协议）,HTTP协议的安全版本。FTP（File Transfer Pro...原创 2020-04-22 11:17:52 · 448 阅读 · 0 评论 -
JS指南
MDN-JavaScript 指南声明var 声明一个变量，可选初始化一个值let 声明一个块作用域的局部变量，可选初始化一个值const 声明一个块作用域的只读变量var a;console.log(a); //undefinedconsole.log(b); //undefinedvar b;console.log(c); //not definedlet x;cons...原创 2020-02-20 23:23:34 · 456 阅读 · 0 评论 -
ES6中的类和对象
ES6中的类和对象类：抽象了对象的公共部分，它泛指某一大类对象：特指某一个，通过实例化一个具体得对象面向对象的思维特点：抽取（抽象）对象公共的属性和行为组织（封装）成一个类（模板）对类进行实例化，获取类的对象创建类//1. 创建类 class 创建一个 明星类var that;class Star{ //类的共有属性放到 constructor 里面 cons...原创 2020-04-22 11:10:10 · 233 阅读 · 0 评论 -
JS高级学习
JS高级回顾特点：解释执行 解释一次执行一次 慢灵活 动态性 可以随意给对象添加属性和方法头等函数 函数 在JavaScript是一等公民，类 在Java和C#是一等公民执行环境 宿主环境组成：ECMAScript -语法规范变量、数据类型、类型转换、操作符流程控制语句：判断、循环语句数组、函数、作用域、预解析对象、属性、方法、简单类型和复杂类型的区...原创 2020-07-13 09:59:03 · 280 阅读 · 0 评论 -
JS基础学习
JS数据类型内建对象ES中定义的对象string number boolean null undefined object宿主对象bom dom自定义对象使用new关键字调用的函数 是构造函数constructorJS基本数据类型的值直接在栈内存中存储对象保存到堆内存中，变量保存的是对象的内存地址函数不会检查实参的数量，如果少于 就是undefined// ...原创 2020-07-13 09:59:13 · 683 阅读 · 0 评论