秋来九月八

本文介绍了CSS的position: sticky粘性定位特性及其常见问题，包括父容器限制、层级和兼容性等。针对不适用场景，提供了两种JavaScript替代方案：1）通过监听scroll事件动态切换fixed定位；2）使用Intersection Observer API优化性能。后者通过监控锚点元素实现更高效的粘性效果，但需要维护两份DOM结构。两种方案各有优劣，开发者可根据性能需求和兼容性要求进行选择。

会用正则的都是大佬，甚至碰到一些面试题，要求用正则解能给更高分。学习所有正则用法，开始大佬之旅。

刚学习前端的时候，vue还没用vue-devtools，react还没用 React Developer Tools，我们经常通过console.log和debug来检查代码的运行情况。但好像除了console.log 以外，我们鲜少用上console的其它属性，但console的其它属性也很有趣。

三分钟学会如何获取当前页面最高z-index？有什么用？

获取input type=file的文件将其转为base64 赋值给img 的src将整个img交给canvas重绘，通过canvas的toDataURL方法重新转为base64，将base64赋值给img的src通过上面的方式真的能压缩图片么？先看一下vue的测试代码<template> <form action="/upload" enctype="multipart/form-data" method="post"> <input ty.

浏览器回退，不知道历史记录是否有上一页怎么处理

window.history我们可以通过window.history的两个方法来控制浏览器的路由改变，但不会让浏览器刷新页面。pushState会追加浏览器的路由历史，但不会刷新页面，可以用这种方式来实现前端路由的控制。history.pushState(state, title[, url])可以传递三个参数，state，需要传递的参数，当监听到浏览器的路由活动历史记录条目更改时，可以获取到这个参数。title 当前大多数浏览器都忽略此参数，在此处传递空字符串应该可以防止将来对方法的更改。

关于promise的知识点，暂且分为 青铜、白银、黄金、铂金、钻石、星耀、王者这几个段位。可能是王者玩多了吧，你到哪一个段位了？将关于promise的青铜你已经用过promise解决过异步编程了，并知道通过调用.then()和.catch()来处理回调函数。基本用法const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value);

Proxy代理， 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。使用proxy对对象进行改写，用来满足普通对象无法实现的功能或者业务逻辑。proxy代理最简单的运用const person = { name: 'dx', age: 18 }const handler = { get(target, key, receiver) { console.log(target) // 原来的

单例模式无论执行多少次，返回的始终都是同一个对象或实例。// 构造函数function Person(name,age) { this.name = name; this.age = age; this.setName = (changeName) => { this.name = changeName }}Person.prototype.getName = function () { return this.name}// 单例模式函数(自执行函数,将r

简单把m个同样的苹果，放在n个同样的盘子里，允许有的盘子空着不放，问共有多少种不同的分法 7个苹果，三个盘子， 5，1，1和 1，5，1是同一种分法数据范围 0 < m <= 10 1 <= n <= 10如果有1个空盘子，转换为 m个苹果和n - 1 个盘子如果全部放满，转换为 m - n个苹果 和 n个盘子function divideApple(apples, plates) { if (apples === 0 || plates === 0) { r

forEach 是一个用于数组的迭代方法，通常用于对数组的每个元素执行一个函数。与传统的 for 循环不同，forEach 不提供直接的方法来跳出循环。它会迭代数组的每个元素，而且无法在循环过程中中途终止。

call 是 JavaScript 函数的一个方法，用于在指定的上下文中调用函数。它的语法是 function.call(thisArg, arg1, arg2, ...)，其中 thisArg 是要将函数调用应用到的上下文，后面的参数 arg1, arg2, ... 是传递给函数的参数。使用 call 方法可以立即调用一个函数，并且可以在调用时指定函数内部的 this 值，从而改变函数的执行上下文。

moment数据转为其它格式我们在使用部分ui库的时候，经常发现，时间选择器回调函数给我们的数据返回的是一个moment形式的数据。import moment from 'moment';const Moment1 = moment()// 将Moment1转为 yyyy-MM-DD 记得 月份和日期要大写const time = moment(Moment1).format('yyyy-MM-DD')// 将Moment1转为 yyyy-MM-DD hh：mm：ss 记得 月份和日期要大写

Iterator介绍遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构Iterator的遍历过程是这样的。（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。（2）第一次调用指针对象的next方法，可以将指针指向

JavaScript提供三种不同的值比较操作严格相等比较 (也被称作"strict equality", “identity”, “triple equals”)，使用 ===抽象相等比较 (“loose equality”，“double equals”) 使用==以及 Object.is （ECMAScript 2015/ ES6 新特性）严格相等 ===全等操作符比较两个值是否相等，两个被比较的值在比较前都不进行隐式转换。1、如果类型不同，就[不相等]2、如果两个都是数值，并且是同一个值

ResizeObserver 是一个 JavaScript API，用于监视元素的大小变化。它可以观察一个或多个 DOM 元素，以便在元素的大小或形状发生变化时触发回调函数。ResizeObserver 是为了更有效地处理元素尺寸变化而引入的，特别适用于响应式设计和自适应布局。

前端实现动画的方式有多种，每种方式适用于不同的场景和需求。以下是一些常见的前端动画实现方式：css动画、js动画库、web动画、js帧动画等等

JavaScript需要解决不同浏览器的兼容性问题，因为不同浏览器在实现JavaScript标准时存在差异，这导致同一段JavaScript代码在不同浏览器上可能表现出不同的行为或错误。这些差异主要包括以下几个方面：JavaScript标准的不一致性：虽然JavaScript有一套标准（ECMAScript），但不同浏览器对这些标准的实现程度和方式各有不同。一些浏览器可能支持最新的标准，而另一些浏览器可能仍在支持旧版本的标准，这导致了不一致性。浏览器特有的扩展和API：一些浏览器引入了自己的扩展和非

window.print()是调用浏览器打印的方法。但默认是打印window当前所在页的整个页面，那有没有办法，只打印某一块区域，或者说，只打印某一个Dom元素内的元素呢。function BrowserPrint （Dom）{ window.document.body.innerHTML = Dom.innerHTML; window.print(); // 打印完成以后一定要重新刷新页面，因为window被要打印的Dom取代了 window.location.reload(

前端时间开发的过程中，遇到一个鼠标拖拽dom的需求，这个需求还是十分常见的，与大家一起分享我的想法。解决这个需求有两种思路，其中一种是通过H5原生的拖拽事件ondragstart、ondragend，另一种则是通过监听鼠标的onmousedown、onmousemove、onmouseup事件。ondragstart、ondragend详解1.首先确认需要被拖拽的dom，在上面加上属性draggable为true，否则ondragstart和ondragend和ondrag事件都无法生效。<d

小程序有许多种，微信小程序、钉钉小程序、uni-app、Taro之类的。页面监视 在小程序中是有生命周期的。当你搜索小程序生命周期，就能发现 onShow 和onHide这两个方法，一共用来监视页面是否显示，一个用来监视页面是否隐藏。但有的时候，我们无法使用小程序的生命周期。比如我手中的一个项目， 使用的是vue + vant 的方式来写小程序页面，vue组件中如何检测某个组件是否显示呢通过路由？路由守卫？只要跳转到那个页面，必定会触发路由守卫里面的函数，这的确是一种方法，但总感觉有点麻烦。

一、a标签download下载后端返回一个可下载的url文件，或者前端本地保存的文件，通过路径引入下载。（1）将资源放入前端本地保存，打包后随一起上传自服务器// 本地资源下载，引入路径即可,这里的路径指的是打包后文件与代码文件的相对路径<a href="./import-template.xlsx" download target="_blank"> 下载上传模板 </a>（2）请求服务器，返回的url放入a标签的href属性中，下面是伪代码，实现的步骤 先获

html head头部介绍地址http://fex.baidu.com/blog/2014/10/html-head-tags/

html2canvas官方地址http://html2canvas.hertzen.com/安装npm install --save html2canvas或yarn add html2canvas代码示例 /** 点击下载简历 */const onClickDownResume = () => {// 调用html2canvas方法，传入dom节点(想要截屏的那部分的dom元素) html2canvas(document.getElementById('resume-detai

深浅拷贝，只有引用类型的数据才会出现这个问题。浅拷贝不等于赋值。一张解释赋值，浅拷贝，深拷贝的关系。赋值(两个地址指向一个对象)let obj = {name:'dx',age:'18'}let obj1 = obj浅拷贝 (适用于第一层为基本数据类型的对象)1、es6扩展运算let obj = {name:'dx',age:'18'}let obj1 = {...obj}obj,age = 16console.log(obj.age) // 16console.log(obj

路由转码的两组方法encodeURI 和 decodeURIencodeURIComponent 和 decodeURIComponent这两组方法都可以用来对路由进行转码处理，掌握它们的细微差别，在面对不同的需求时合理取舍。encodeURI('http://jb51.net/my test.asp/中文词组?name=stle&car=saab')上面代码的转码结果：http://jb51.net/my%20test.asp/%E4%B8%AD%E6%96%87%E8%AF%8D%E

所谓锚点，就是设置同一页面的快捷点，通过点击固定在屏幕上的本页导航栏，从而迅速跳转到页面的某个位置。锚点的运用十分广泛，一般出现在某个网站的首页，或者内容较多的网页中介绍几种实现锚点的方式实现第一种 通过a标签设置锚点（会改变当前地址的路由！！！）a标签除了跳转页面以外，还可以设置锚点，通过给a标签的href属性，给对应的元素绑定同样的id值，就可以同一页面内的跳跃。对应的元素标签也可以是a标签，给a标签设置对应的name值，实现同一页面内的跳跃。上代码//快捷导航设置//a标签的hre

看到stringify最容易让人想到JSON.stringify.两种方法都是数据类型的转换。言归正传，qs.stringify,将对象数据转为字符串，并用&进行拼接。看到&，就知道了qs.stringify的作用，用于前后端参数传递的时候。前端通过这个方法，将要传递的对象转换成字符串，拼接成带参数的请求地址。安装qsnpm install qs yarn add qs按需加载，如果你只需要用到qs中的stringify的话。import stringify from 'qs/

Promise十分好用，当出现一个异步的请求或者方法，可以使用Promise 通过then或者catch执行接下来的代码。当然也可以用过async await的方式，，将异步转为同步的方式处理。可当你遇到一个这样的需求：必须要等多个异步方法或者操作执行完成之后，执行下一步操作，该怎么办？比如多张图片的上传，如果用一个promise链（在一个promise.then里面再调用一个promise）这样非常麻烦，而且不科学。Promise.all的使用场景就诞生了展示一个promise.all()上传多张

url相关去除掉url所有的参数，只保留域名端口号和路由window.location.href.replace(/[?]+.*/g,'')

“http://abc.com:8080/dir/index.html?id=255&m=hello#top”window.location.hash——从井号 (#) 开始的 URL（锚） #topwindow.location.host ——主机名 abc.comwindow.location.href ——完整的 URL http://abc.com:8080/d...

前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。第一个形参被获取样式的元素,第二个形参样式的名称，用来获取css上的样式具体的值。

常见的几种数字排序的方式 冒泡排序，插入排序，快排，希尔排序，选择排序

首先声明一下，这不是我的原创，只是借用别人的东西，放在这里以供自己查阅和大家一起分享，如果原作者看不到了，可以留言与我联系，要求删除js中数组常用方法总结前言从事前端到现在也有快两年了，平时也会收集整理一些笔记放在印象笔记，不过收集过之后就在没有看过，经大佬指点，真正掌握一个知识点，最好的方式就是用自己的话把内容讲明白，就开始将以前零散的东西整合一下，和各位道友一起提高。操作数组印象中数...

你可以编写递归函数来遍历 DOM 树的各个节点，访问它们的属性和执行操作。这些方法提供了多种方式来遍历 DOM 节点，你可以根据需要选择最适合你的方法。注意，一些方法可能返回文本节点等非元素节点，因此需要小心处理。在 JavaScript 中，遍历 DOM 节点（文档对象模型）的方法有多种。允许你通过 CSS 选择器选择特定的节点或一组节点。分别用于根据元素的 ID 和类名来获取节点。这些方法可以快速定位到特定节点。你可以使用这些属性来遍历父节点和子节点。属性可以访问节点的下一个兄弟节点和上一个兄弟节点。

字符串常用方法，越往后用得越少1.concat(v1,v2…)concat() 方法用于连接两个或多个字符串，此方法不改变现有的字符串，返回拼接后的新的字符串。2.indexOf(substr, [start])indexOf方法搜索并(如果找到)返回字符串中搜索到的字符或子字符串的索引。如果没有找到，则返回-1。Start是一个可选参数，指定字符串中开始搜索的位置，默认值为0。3.la...

数据类型分为 基础数据类型和引用（对象）数据类型基础数据类型： number string boolean undefined null常见的引用数据类型： funciton object array常见的判断数据类型的方法有三种第一种，当数据类型是undefined null 时，可以用 ===来进行判断undefined === undefinednull === null第二...

首先说明，js继承的方式有很多，原型继承，构造函数继承，拷贝继承，接下来只做组合继承和寄生组合继承。因为这两种的继承方式比较完美组合继承，即构造函数的继承和原型的继承相结合// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){...

1.类的内部所有定义的方法，都是不可枚举的（但是在es5中prototype的方法是可以进行枚举的）2.类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行3.Class不存在变量提升（hoist），这一点与ES5完全不同4.ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply...