![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
zzzmj_
NYOJ主页
https://acm.nyist.edu.cn/JudgeOnline/profile.php?userid=Leida_%E6%9C%B1%E6%A8%A1%E5%81%A5
展开
-
H5 挽留弹窗方案设计与实现
H5 挽留弹窗的设计与实现背景运营提出想在用户点击退出,返回的时候,弹窗挽留用户,并通过挽留弹窗引流一些产品,提高转换率,因此挽留弹窗需要实现以下功能,用户点击返回的时候,弹出挽留弹窗。方案初步设计经过本人的调研,浏览器没有直接提供类似用户退出的事件监听,因此端外实现的方案都是比较hack的方案。主要借助history这个API,使用到以下两个方法history.pushState():往浏览器里插一条历史记录window.addEventListener(‘popstate’, (e) =原创 2021-11-26 10:32:32 · 2622 阅读 · 0 评论 -
使用JS去除字符串中的HTML标签
背景有时候我们经常需要删除掉字符串中的一些HTML标签下面我推荐两个办法正则表达式str.replace(/<[^>]+>/g, '')使用innerHTML(推荐)有时候网上的一些正则可能不符合你的需求,此时我们可以通过HTML自带的textContent来解决const deleteTag = (str) => { const el = document.createElement('div') el.innerHTML = str return el.原创 2021-11-24 19:13:11 · 2764 阅读 · 0 评论 -
iframe高度自适应方案总结
1. 背景iframe能将一个网页嵌入到另一个网页中,有个缺陷是高度不能随内容而撑开,需要手动设置。如果内容高度是动态的,就会存在问题。在网上查了不少方案都存在一些问题,总结了一下2. 思路整体而言思路是:通过scrollHeight获取iframe的滚动高度,动态将iframe.height设置为scrollHeight即可但是要考虑到两个问题如果内容是动态改变的,就不能仅仅在window.onload后做一次高度改变要考虑撑开后又高度又缩小的情况3. 代码为了解决上述的两个问题,原创 2020-10-27 16:18:58 · 10696 阅读 · 4 评论 -
js 数组reduce()方法详解
1. 前言reduce是一个很美妙的函数,不仅因为它好用,也因为它也蕴含了Redux的哲学,对理解Redux中的reducer也有很大的帮助2. 思考先抛出一个问题,如何实现数组求和?const arr = [1, 3, 5, 9, 20] // 求和问题很简单,一个简单的解决方案如下:let sum = 0for (let i = 0; i < arr.length; i+...原创 2019-06-15 17:52:46 · 240 阅读 · 0 评论 -
React全家桶搭建大众点评Webapp
1. 项目简介项目预览地址:http://47.100.2.47/dianping该项目使用React全家桶搭建了大众点评Webapp其实项目还是有点难度的,为了仿真app体验,是重度使用了Redux,将所有的状态都保存在Redux中,方便做缓存,增加用户体验,但也增加了项目的复杂度2. 使用方法将本仓库clone到本地在根目录下输入yarn install命令,安装依赖yarn ...原创 2019-07-26 23:48:40 · 230 阅读 · 0 评论 -
js 中 new 与 Object.create()的区别
前言在js中,创建对象有三种方式{} // 对象字面量new Object()Object.create()1和2的区别很小,1不能传参,2可以传参。new Object() 和Object.create() 区别就比较大了1. new关键字new 关键字做了几件事创建一个新对象将新对象的原型指向构造函数的原型执行构造函数,绑定this返回这个对象比如创建一个Ca...原创 2019-08-23 21:39:27 · 471 阅读 · 0 评论 -
on-event事件处理器与addEventListener区别
1. on-event我们通常将通过on-event函数绑定的叫事件处理器(handler event)on-event 属于 DOM level 0 events,最早提出的规范这种事件处理方式,是将指定的事件注册到元素上实现的,作为一个元素属性var t = document.getElementById('demo')t.onclick = function() { }因为是作...原创 2019-08-16 14:00:20 · 4146 阅读 · 0 评论 -
js垃圾回收机制
1. 垃圾回收机制简言之,垃圾回收就是把我们不需要再用到的对象释放内存那怎么判断对象是否不再需要呢?主要有两种方法引用计数法标记清除法2. 引用计数法以前的垃圾回收机制主要是用引用计数法这种方法判断对象是否不再需要 是通过判断对象是否被引用来实现的在内存环境里,对象如果被其他对象引用了,说明这个对象我们还需要它,反之则不需要它注意,这里的对象不只是js对象,也包括函数作用域...原创 2019-08-17 13:59:26 · 160 阅读 · 0 评论 -
深拷贝的终极二次探索(99%的前端都不知道)
1. 前言很多前端er认为深拷贝很难,其实我觉得主要是网上很多文章代码虽然实现了深拷贝,但代码冗余度很高,确实是不利于阅读。2. 难点在哪?首先我给出下面这个对象var obj = { name: "muyiy", book: { title: "You Don't Know JS", price: "45", b: { ...原创 2019-08-17 21:24:16 · 426 阅读 · 8 评论 -
从零手写一个Promise
手写一个promise分五步走解决基本状态,即Promise三个状态pending, fulfilled, rejected的转换解决then方法支持异步操作支持链式调用all和race1. 解决基本状态看一段promise代码const promise = new Promise((resolve, reject) => { con...原创 2019-09-08 20:37:12 · 222 阅读 · 0 评论 -
用d3.js画一个柱状图
1. 前言涉及到的比较重要的点Scale(比例尺)Update、Enter、Exit2. 比例尺重点在于比例尺的应用线性比例尺domain是定义域,range是值域可以将定义域放大或者缩写什么意思呢? 假设我们的数据长度是[0, 1000],但是1000这个高度太高了,放不下我们就可以将其缩小5倍var y = d3.scaleLinear() .domain([...原创 2019-09-14 16:54:13 · 562 阅读 · 0 评论 -
js实现拖拽效果(二):面向对象封装
1. 前言在上一篇文章中,已经实现了拖拽的效果,但并不利用复用,我们使用面向对象的方式,将代码重构一遍。2. 代码(function() { function Drag(selector) { // 传进来的如果是DOM对象则不用再查找 this.elem = typeof selector == 'object' ? selector : docum...原创 2019-06-14 14:47:28 · 295 阅读 · 0 评论 -
js实现拖拽效果(一):原理实现
1. 原理JS 拖拽一个元素的原理:首先要明白三个值鼠标的位置A = {x, y}盒子的位置B = {x, y}鼠标在盒子内的距离C = {A.x - B.x, A.y - B.y}涉及到三个鼠标事件鼠标按下时,mousedown鼠标移动时,mousemove鼠标松开时,mouseup然后就可以开始讲明实现过程了鼠标按下的时候,计算出C,鼠标在盒子里距离(鼠标位置 ...原创 2019-06-14 12:56:51 · 349 阅读 · 0 评论 -
js获取元素的left和top值方法总结
方法一:使用obj.style.left和obj.style.top该方法获取到的样式可读可写但是这种方法有局限性,仅能获取行内样式中的left,right。如果写在了style标签里,或者link引入的css文件中,则获取不到方法二:使用window.getComputedStyle该方法接收两个参数第一个参数是,要获取样式的元素第二个是可选参数,要匹配的伪元素的字符串用法...原创 2019-06-14 10:49:27 · 14486 阅读 · 1 评论 -
用JavaScript解决八皇后问题
1. 背景在8 x 8的的国际棋盘中,放置八个皇后,要求任意皇后之间不能处于同一行,同一列,同对角线,有多少种放置方法2. 思路经过思考,不难发现,每行每列恰好各放置一个皇后如果用map[row][col]表示第row行第col列,则问题就变成了全排列的问题比较巧妙的地方是如何去判断当前皇后与之前的皇后是否冲突,行不用判断,因为我们是逐行放置,列的判断比较容易对角线的判断比较巧妙,...原创 2019-01-05 16:51:31 · 587 阅读 · 0 评论 -
JavaScript函数中this的四种绑定策略
this的四种绑定策略默认绑定隐式绑定显示绑定new绑定1. 默认绑定当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象// 第一个例子var foo = function() { console.log(this.a);}var a = 2foo() // 2// 第二个迷惑性的...原创 2019-01-01 15:09:33 · 1308 阅读 · 2 评论 -
var self=this, 箭头函数与传统方法对比
解决隐式丢失问题的解决办法其实一开始只想写箭头函数的, 后来又写到了显示绑定…所以先列了一下箭头函数的使用办法在es6中, 箭头函数将this与词法作用域联系起来了, 所以它的作用并不只是减少代码量1. 语法如果你的函数没有参数var f = () =&amp;amp;amp;amp;gt; 3.14;// 等同于var f = function() { return 3.14;};如果你的函数有...原创 2019-01-01 16:34:30 · 755 阅读 · 0 评论 -
JS中typeof和instanceof的区别
区别:typeof运算符用来检测基本数据类型使用方法:typeof opera或者typeof(operand)instanceof运算符用来检测对象类型(引用类型)准确些可以说:来判断某个对象是否是某个类的一个实例是则返回true,否则返回false使用方法:variable instanceof constructor1. 基本数据类型typeof用来检测五种基本数据类型s...原创 2019-01-03 15:07:57 · 162 阅读 · 0 评论 -
判断属性是否存在于原型中
function hasPrototypeProperty(object, name) { return !object.hasOwnProperty(name) && (name in object)}原理:hasOwnproperty()方法会返回一个布尔值,检测属性是否存在于对象中(实例),但不能检测原型中的属性in操作符 如果指定的属性在指定的对象或其原型...原创 2019-01-12 22:27:20 · 542 阅读 · 0 评论 -
JavaScript中模拟实现call()和apply()
1. 区别call方法调用一个函数,并指定函数的this和参数列表apply方法调用一个函数,并指定函数的this和参数数组call和apply的区别就是 一个接收参数列表,一个接收参数数组2. 分析因为两者差不多,所以先分析call()var obj = { name: 'zmj'}function sayName() { console.log(this.na...原创 2019-02-02 23:42:10 · 99 阅读 · 0 评论 -
那些年,踩过的 setTimeout 坑
1. 前言众所周知,在JavaScript中,我们可以使用setTimeout()函数设置定时器,时间到了之后,执行一个函数或者一段代码2. 基本用法setTimeout(func|code, delay)第一个参数接受一个函数或者一段代码第二个参数是延迟执行的时间举例:funtion say() { console.log('早上好')}setTimeout(say, 1...原创 2019-01-23 14:14:41 · 598 阅读 · 0 评论 -
ES6 Promise对象的基本用法
什么是PromisePromise像一个容器, 里面保存着异步操作的结果但它事实上是一个对象,可以通过统一的api, 来获取这些异步操作的结果例如使用ajax操作的例子var promise = ajax.get('/v1/get');promise.then(function(result) { //成功时的处理}).catch(function(error) { /...原创 2019-02-13 18:31:21 · 170 阅读 · 0 评论 -
ES6 迭代器和生成器的基本用法
迭代器: Iterator迭代器的作用是为了方便遍历集合等数据结构, 如Array, Map, Set所有的迭代器对象都带有一个next()方法, 它返回一个包含两个属性的结果对象一个是value, 表示下一个结果的值一个是done, 标记迭代是否结束return { value, done}迭代器的实现原理var createIterator = funct...原创 2019-02-13 22:02:35 · 230 阅读 · 1 评论 -
从ES5 的角度看 ES6中的 class
前言ES6的 class 是语法糖, 相当好用, 介绍主要几个关键的概念仿类结构类的声明静态成员类的继承1. ES5 中的仿类结构在ES6之前没有class语法, 我们仿写一个类结构var Person = function() { this.name = name}Person.prototype.sayName = function() { conso...原创 2019-03-02 10:45:46 · 134 阅读 · 0 评论 -
React中的虚拟DOM和diff算法
虚拟DOMReact原理我们来想一下如何实现React第一种方案:1. state 数据2. JSX 模板3. 数据 + 模板 结合, 生成真实的DOM, 来显示4. state 发生改变5. 数据 + 模板 结合, 生成真实的DOM, 替换原始的DOM但这种方案在第五步有着很大的性能缺陷用新生成的DOM去替换原始的DOM, 非常消耗性能第二种方案1. state 数据...原创 2019-03-02 15:34:46 · 139 阅读 · 0 评论 -
js 获取 iframe 内的元素
今天在写爬虫的时候,用选择器的时候发现选择不到元素。。后来才发现这是iframe内的元素,因为iframe包裹的内容相当于另一个页面了,所以用当前页面的document是选不到的选取方法// 1. 先选择iframevar iframe = document.querySelector('#iframe_id').contentWindow// 2. 选择iframe内的元素var e...原创 2019-05-30 13:03:47 · 4796 阅读 · 0 评论 -
for 循环中的setTimeout(function(){})异步问题
阅读这段代码for (let i = 1; i &amp;lt;= 5; i++) { setTimeout(function timer() { console.log(i); }, i*1000)}预期是分别输出数字1-5, 每秒1次,每次1个结果却是每秒一次输出了5个61. setTimeout的执行原理setTimeout()是一个异步方法, 传递一个...原创 2018-12-28 08:25:54 · 1834 阅读 · 0 评论