js
yumihe
这个作者很懒,什么都没留下…
展开
-
js原生实现防抖节流
共同点:都用到了setTimeout定时器,都是在指定时间间隔后执行函数,都是为了解决数据时时变化而时时请求导致性能差的问题区别:防抖在指定时间间隔里再次调用函数,会清除定时器,重新计时,直到在最新的计时时间间隔里没有调用函数,才会执行定时器里的函数。而节流会在指定时间间隔后会执行一次函数,不会清除定时器而重新计时防抖缺点:当用户在指定时间间隔里一直操作,那么setTimeout里的函数永远不会执行节流缺点:如果用户一直操作,那么setimeout里的函数会在指定时间间隔后都会执行一次,如此反复原创 2020-09-10 17:51:10 · 7881 阅读 · 0 评论 -
js - do while与while的区别
do while先执行后判断,循环至少执行一次,即便条件为falsewhile先判断后执行let i = 2do { console.log(i) // 2 i++}while(i < 2) { console.log(i) // 3}let j = 2while(j < 2) { // 没有执行 console.log(j)}...原创 2020-08-07 18:20:34 · 1008 阅读 · 0 评论 -
js - return在for 循环与forEach循环里的的区别
for循环里的return中止整个循环,循环后面的代码不会被执行。forEach循环里的return中止本次循环,继续下一次循环,循环后面的代码会被执行。forEach可以使用try catch来中止整个循环。// for循环里的return中止整个循环let test = ()=>{ for(let i=0;i<5;i++){ if(i === 3){ return } cons...原创 2020-08-07 18:18:42 · 562 阅读 · 0 评论 -
JS中使用instanceof能得到哪些类型
instanceof用来判断对象的具体类型objectName instanceof objectType其原理就是检测函数的prototype是否在被检测对象的原型链上console.log([] instanceof Array) // trueconsole.log({} instanceof Object) // trueconsole.log((()=>{}) instanceof Function) // true// instanceof用来判断数组存在误区,原...原创 2020-08-05 14:09:41 · 1032 阅读 · 0 评论 -
JS中使用typeof能得到哪些类型
typeof用于判断数据类型,返回值有6个字符串:string、number、undefined、boolean、object、functionarray、object、null、函数实例(new + 函数)通过typeof判断都为objectArray、Object、function(){}、(()=>{})、Function通过typeof判断都为functionconsole.log(typeof 'aa') // stringconsole.log(typeof 4) // .原创 2020-08-05 11:44:51 · 1232 阅读 · 0 评论 -
js - 计算elment-ui里的日期插件的结束日期与开始日期相差的年月日
需求:日一致,则相差年月日为年、月相减,不做具体天数的计算,如2020年7月1日-2020年8月1日,则相差年月日为“0年1月0日”插件:element-ui、moment,使用了moment来获取某个月份的天数// 获取到的日期格式为["yyyy-mm-dd", "yyyy-mm-dd"]<el-date-picker v-model="dateTime" type="daterange" align="left" unlink-panels range-separa原创 2020-08-10 20:41:31 · 789 阅读 · 0 评论 -
js - 循环滚动TOP10
场景:在固定高度区域里循环滚动前10条数据<div id="caseRank"> <ul id="rankList1"> <li v-for="(item,index) in platList" :key="index" > <span>{{ index + 1 }}</span> <span class="cont">{{ item.name }}</sp原创 2020-06-17 16:57:16 · 639 阅读 · 0 评论 -
sessionStorage 存、取、删除、清空数据方法封装
存数据:sessionStorageSet// 存数据export const sessionStorageSet = (name, obj) => { if (typeof obj === 'undefined') { return false } // obj为undefined或null或空字符串不能存储,布尔值可存储,但取时为字符串 if(!obj && (typeof obj === 'undefined' || typeof obj === '.原创 2020-06-17 15:53:33 · 14412 阅读 · 1 评论 -
history模式下,获取url中的参数,并解决乱码问题
encodeURIComponent 编码decodeURIComponent 解码例如:http://xxx?userId='666'&userName=’用户名‘utils.js// 获取url中的参数 history模式下export function formatUrlParams() { let url = window.location.href let obj = {} if (url.indexOf('?') !== -1) { let st.原创 2020-06-17 14:48:45 · 1594 阅读 · 0 评论 -
hash模式下,获取url中的参数,并解决乱码问题
encodeURIComponent 编码decodeURIComponent 解码例如:http://xxx?userId='666'&userName=’用户名‘utils.js// 获取url中的参数 hash模式下export function formatUrlParams() { let url = window.location.hash let obj = {} if (url.indexOf('?') !== -1) { let start.原创 2020-06-17 14:48:51 · 2222 阅读 · 0 评论 -
vue项目中mockjs的简单场景使用
安装mockjs:npm install mockjs --save-dev在vue.config.js平级创建mock.jsimport Mock from 'mockjs'// 该方法用于拦截带参数的地址let getRegExpUrl = (url) => { return RegExp(url + '.*')}Mock.mock(getRegExpUrl('/cooperate-case-server/flowRules/selectFlowRules'), { '原创 2020-06-17 14:24:43 · 787 阅读 · 0 评论 -
js - 通过锚点实现导航联动内容,通过监听容器里的滚动条,实现内容联动导航
写这篇文章的背景:接手的项目中有一个页面,通过锚点实现了导航联动内容,但是没有实现内容滚动时联动导航于是我在项目中实现这一功能之前,在本地模拟了相同的场景以下代码可以直接复制到本地查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...原创 2019-08-15 17:19:40 · 2498 阅读 · 0 评论 -
new RegExp() + scrollIntoView() 实现关键词查询,添加高亮样式
通过一个小demo实现以下功能点: (1)对内容做关键词查询,将内容中的关键词添加高亮样式,默认第一个关键词样式区别其它关键词样式 (2)点击上一个下一个按钮查找关键词,使当前关键词样式区别于其它关键词样式 (3)当前关键词通过scrollIntoView(),使其始终出现在可见区域内 (4)点击清空,清空所有关键词高亮样式,滚动条...原创 2019-08-19 15:34:05 · 402 阅读 · 0 评论 -
visibilitychange - 指定标签页可见时,刷新页面数据
三个知识点: 一通过监听浏览器页面可见性改变(visibilitychange)事件,来判断标签页是否可见 二配置路由的meta,来判断是否是指定的标签页 三调用其它模块的actions,刷新数据router.jsroutes: [ { path: "/", redirect: "index" }, { path: "/ind...原创 2019-08-08 16:31:53 · 1133 阅读 · 0 评论 -
深拷贝与浅拷贝
深拷贝: 与原数据不指向同一对象 原数据第一层数据若为基本数据类型,改变不会使原数据一同改变 原数据中包含子对象,改变不会使原数据一同改变export funtion deepCopy(obj){ var newObj = {}; if(!obj || typeof obj != 'object'){ newObj = obj; }els...原创 2019-07-24 17:27:49 · 80 阅读 · 0 评论 -
jquery 通过animate实现height: auto展开收缩动画
实现原理:当点击展开时,获取元素height: auto的高度为多少像素,由当前高度到height:auto的过渡;反之。var m_flag = true;var el = $(".case-detail-con"), curHeight = el.height();$("#casesdetail_more").click(function(){ if(m_flag){ ...原创 2018-08-27 23:30:41 · 4095 阅读 · 0 评论 -
npm安装 --save与--save-dev 区别
(1) npm install xxx --save这样安装的包,信息写入在package.json中的dependencies中, dependencies是运行时依赖.(2) npm install xxx --save-dev这样安装的包,信息写入在package.json中的devDependencies中, devDependencies是开发时的依赖.如果是默认安装,n...原创 2018-08-17 18:02:02 · 788 阅读 · 0 评论 -
js取对象中的键与值
const data = { one: 'first', two: 'second', three: 'third'}for (var i in data) { console.log('键:' + i) console.log('值:' + data[i])}结果是:原创 2018-08-15 16:21:43 · 22771 阅读 · 0 评论