javascript
文章平均质量分 84
YaoDeBiAn
这个作者很懒,什么都没留下…
展开
-
原生 js 如何获取定位
foreword(前言)本篇文章作为前面一篇文章(原生js如何获取宽高)的后续,主要分析原生 javascript 获取元素定位的 api 以及一些优化。JS 定位都有哪些获取方式呢clientLeft & clientTopoffsetLeft & offsetTopscrollLeft & scrollTop以下则会针对 clientTop、offsetTop、scrollTop 作为讲解。clientLeft & clientTopThe widt原创 2020-11-01 20:15:52 · 1201 阅读 · 0 评论 -
有趣的 Destructuring
foreword(前言)最近,我的学弟他在我们的一个群里问了一个问题:“数组解构和对象解构在性能上有什么区别呢,哪种方式会更好?”。当时,我的第一反应是,当时是数组了,而且为什么会有这样的问题呢,一个是针对数组的解构,一个是针对对象的解构,这两个有可比性吗,对比他们有意义吗?当然,只是我的第一反应,为了验证它们是否是有比较的意义,我大致花了一天多的时间简单研究了一下。test(自我测试,直接 coding 测试不就行了)于是我写了以下的一些代码用于测试:arr_normal.js: 使用 es5原创 2020-10-31 11:46:16 · 271 阅读 · 0 评论 -
原生js如何获取宽高
foreword(前言)最近项目中需要获取 dom 元素的尺寸,所以借此对比分析一下 js 所有获取尺寸的方法,以及相关的 dom 定位方式。JS 尺寸、定位都有哪些获取方式呢JS 尺寸获取方法:clientWidth & clientHeightoffsetWidth & offsetHeightscrollWidth & scrollHeightgetComputedStyle...原创 2020-10-25 21:08:21 · 1400 阅读 · 1 评论 -
总结一些前端笔试面试
1.关于购物的一道题,题目很简单:最近不是双十一吗,小美想要尽可能多的买各种商品,但小美只有一定数额的钱,规定每件商品只能买一件,问最后小美花了多少钱?用例:输入购买上限mPrice:188 输入一串以空格分隔的字符串,代表不同的商品的价格pStr:50 42 9 15 105 63 14 30 输出:160注:mPrice最大不超过一万。解:// 获取应买物品的总价格f...原创 2018-12-03 20:27:37 · 605 阅读 · 0 评论 -
js事件绑定的几种方式
1.首先是直接在标签中绑定事件,如:<button onclick="clickme()"></button>;2.通过节点元素进行绑定,如:el.onclick = function () {console.log(111)};3.通过addEventListener与attachEvent来绑定事件;另外写了几个关于事件的小demo:(里面)yaodeb...原创 2018-12-03 20:30:10 · 572 阅读 · 0 评论 -
谈谈个人对js事件循环的理解
知乎文章地址:https://zhuanlan.zhihu.com/p/50003943在这之前,首先谈谈js的单线程机制:众所周知,js是单线程的语言,也就是说同一时间只能做一件事情。不过,现在这个年代还不能多线程开发吗?答案肯定是否定的,而关于为什么js选择用单线程,只要举一个栗子就好了:比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个...原创 2018-12-03 20:32:42 · 545 阅读 · 0 评论 -
一步步实现Promise代码封装
知乎文章地址:https://zhuanlan.zhihu.com/p/51373575ES6中加入了Promise的一个概念,使得非阻塞式语句的同步变得简单起来,但是具体它是怎样实现的,接下来一步步地实现它。一.Promise基本结构new Promise((resolve, reject) => { setTimeout(() => { resolve('...原创 2018-12-03 20:40:44 · 1543 阅读 · 2 评论 -
兼容getElementsByClassName与classList(ie8及以上)
知乎文章地址:https://zhuanlan.zhihu.com/p/52423430之前面试的时候考到对html元素的class进行增删改,然后有前辈说如果使用classList并且通过原型实现兼容,会非常满意,由此想到对getElementsByClassName与classList这两个接口进行浏览器兼容。不过目前仅兼容到ie8,下面是具体的一些方案:兼容getElementsBy...原创 2018-12-17 12:57:43 · 1315 阅读 · 0 评论 -
代码调试系列之前端代码调试的几种基本方法
github文章地址:https://github.com/yaodebian/blog/issues/2知乎文章地址:https://zhuanlan.zhihu.com/p/56231646针对前端代码的调试,我们更多的是对javascript代码的调试,我们常用的可能就是向alert、console等方式,同样的对于DOM元素变化的js脚本也可以进行监听调试,然后就是简单的HTML元...原创 2019-02-03 21:59:40 · 5151 阅读 · 1 评论 -
ajax跨域总结
之前在看云上总结的一些ajax跨域解决方案,在这里分享给大家:原生ajax基础性原理 · javascript之ajax运用及跨域解决 · 看云www.kancloud.cn原创 2018-12-03 20:21:00 · 215 阅读 · 0 评论 -
如何使用纯css实现轮播图
知乎文章地址:https://zhuanlan.zhihu.com/p/48350702轮播图一直是一个很有意思的东西,之前没有好好总结,导致一要写的时候就要重新开始思考过程然后编码,这是个特别烦的问题,今天就好好总结一下。关于轮播器的一些demo,请看:yaodebian/Carouselgithub.com因为考虑到方法实在是太多了,这里就以css的实现方式来进行记录。yao...原创 2018-12-03 20:19:36 · 2619 阅读 · 0 评论 -
如何在页面上实现一个圆形的可点击区域
知乎文章地址:https://zhuanlan.zhihu.com/p/48168812以下涉及的demo代码请查看:yaodebian/ClickableAreagithub.com这个问题确实从没想过,也是今天前端面试中被问倒的问题之一,接下来做一个简单的总结吧。这个问题确实从没想过,也是今天前端面试中被问倒的问题之一,接下来做一个简单的总结吧。 一.border-rad...原创 2018-12-03 20:14:27 · 2654 阅读 · 0 评论 -
js笔记:Js封装库——css选择器
Js封装库——css选择器在css中我们可以很简单地使用css选择器来对节点对象进行选择,并对其进行style设置。现在,我们想通过js对html的css样式进行动态设置,想以css的形式进行设置,例如我们想通过$(‘#box p’)来选中id为’box’的节点对象的子节点中的p节点,我们应该怎么来实现呢?1.首先,创建几个文件:index.html、index.js、base.js原创 2017-08-21 17:27:41 · 713 阅读 · 0 评论 -
js笔记:Number()、parseInt() 和 parseFloat() 的区别
原文地址:http://www.cnblogs.com/yi0921/p/6196841.htmlNumber()、parseInt() 和 parseFloat() 的区别一:Number()如果是Boolean值,true和false值将分别被转换为1和0。如果是数字值,只是简单的传入和返回。如果是null值,返回0。如果是undefined,返回NaN。如转载 2017-08-24 15:17:08 · 423 阅读 · 0 评论 -
js笔记:js正则表达式语法(es5)
一.什么是正则表达式正则表达式(regular expression)是一种模型,用于表示某种状态(或者说某种形式比较贴切)的字符串,可以说正则表达式里面的内容就是一系列的条件,使用正则就是对这些条件的匹配问题。二.那么如何创建正则?又如何使用正则来对字符串进行匹配呢?在es5语法中,有两种创建正则的方法:通过new运算符来创建,或者通过直接赋值的方式进行创建(也就是我们所说的字面量形式)n...原创 2017-08-22 17:12:34 · 1778 阅读 · 0 评论 -
js日常:用js构造一个轮播器的思考
用js构造一个轮播器的思考最近用纯js编写了一个轮播器,期间遇到了很多问题,由此记录下这篇文章。一.轮播器结构设计轮播器就是一个用于承载图片并实现图片动态滚动效果的模块,首先县分析一下其基本组成结构:一个容器(我用的是div块)+图片容器(img)+轮播器图片信息与操作栏(一个div模块,然后其中放置一个span用于描述图片信息+一个图片列表项ul)。结构图如下: 二.轮播器的原创 2017-09-17 12:59:04 · 366 阅读 · 0 评论 -
js笔记:如何解决mouseover与mouseout的多次触发问题
如何解决mouseover与mouseout的多次触发问题首先我们要了解的是为什么mouseover与mouseout会出现多次触发的问题?这就要看它们作用的对象如何。1.假如其作用的对象没有子代:比如这是一个没有子节点(当然指的是元素节点),那么多次触发的现象是不会出现的。2.假如其有子代,不仅它本身会触发事件,同样的其子代也会触发事件,这就是多次触发的原因。 解决方法,我们原创 2017-09-02 22:37:08 · 3406 阅读 · 0 评论 -
requestAnimationFrame笔记总结
知乎文章地址:https://zhuanlan.zhihu.com/p/45201506一.什么是requestAnimationFrame首先看张图:相当一部分的浏览器的显示频率是16.5ms,就是上图第一行的节奏,表现就是“我和你一步两步三步四步往前走……”。如果我们火力搞猛一点,例如搞个10ms setTimeout,就会是下面一行的模样——每第三个图形都无法绘制(红色箭头指...翻译 2018-09-23 17:41:29 · 1162 阅读 · 0 评论 -
抽奖九宫格Demo
写在前面最近做了一下网易游戏的笔试题,最后一道题是叫你设计一个抽奖九宫格动画,当时有思路但是有很大的瑕疵,故而有了这次git。开发环境vuejs框架 ajax用的是axios思路首先必须将UI设计好; 声明一个list对象用于存放九宫格中的内容列表,包括奖项、抽奖按钮、谢谢参与等,然后通过v-for将这些项填充到九宫格中; 声明一个activeIndex来标记当前被选中的项...原创 2018-09-19 10:03:04 · 3912 阅读 · 1 评论 -
尬谈Js对象的深拷贝与浅拷贝
知乎文章地址:https://zhuanlan.zhihu.com/p/44944466JS 中的浅拷贝与深拷贝,只是针对复杂数据类型(Object,Array)的复制问题。浅拷贝与深拷贝都可以实现在已有对象上再生出一份的作用。但是对象的实例是存储在堆内存中然后通过一个引用值去操作对象,由此拷贝的时候就存在两种情况了:拷贝引用和拷贝实例,这也是浅拷贝和深拷贝的区别。浅拷贝:浅拷贝是拷贝引用...原创 2018-09-19 21:11:31 · 4268 阅读 · 0 评论 -
js笔记:js中的call()和apply()用法与区别
最近碰到call方法的使用,甚是头疼,然后度娘大大给我提供了一篇大佬的文章,很详细:http://blog.csdn.net/ithomer/article/details/6592082以下是我整理的内容:call和apply,它们的作用都是将函数绑定到另外一个对象上去运行两者的格式和参数定义:call( thisArg [,arg1,arg2,… ] );转载 2017-08-19 17:47:30 · 470 阅读 · 0 评论