JS专场
Joy__Yue
这个作者很懒,什么都没留下…
展开
-
锚点联动
什么是锚点联动?1、锚点定位:点击导航栏nav,定位到content里的不同div2、锚点反向联动:滚动content,根据当前显示的div定位到相应的nav解决方法:1、锚点定位:方法一:a标签自带锚点属性<!--点击a标签,根据href定位到id为a2的div处--><a href="#a2">2&amp原创 2018-10-01 10:29:18 · 1106 阅读 · 0 评论 -
一篇文章彻底说清JS的深拷贝and浅拷贝
这篇文章的受众第一类,业务需要,急需知道如何深拷贝JS对象的开发者。 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者。https://segmentfault.com/a/1190000012828382...转载 2019-01-14 17:11:41 · 147 阅读 · 0 评论 -
js onerror事件
官方文档上对这个事件的解释是:onerror 事件会在文档或图像加载过程中发生错误时被触发。在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄。那么它是用在什么地方,怎么用的?举个栗子:在开发中,有通过接口传来的图片,但该图片不一定能读出来(也就是报404错误)。这时如果不做处理,在Chrome下图片会不显示,在ie下会出现一个图片缺省的样子(很丑...)。测试小姐...原创 2018-12-13 17:48:03 · 1375 阅读 · 0 评论 -
同步与异步 || async/await 和 promise 的执行顺序
通俗理解下:多个异步请求几乎是同时进行的;多个同步请求会等请求1结束后,再调请求2,以此类推...怎么让请求同步?async await参考这篇文章:ES6系列文章 异步神器async-await那么就要谈到第二个话题:async/await 和 promise 的执行顺序,请看下面文章,讲的比较清晰8 张图帮你一步步看清 async/await 和 promise 的执行...转载 2018-12-13 15:53:01 · 492 阅读 · 0 评论 -
JS中this是什么
要搞清楚this到底是个什么,怎么用的,在JS中还是非常重要的(即使现在ES6能解决this带来的一部分问题),它和JS面向对象的思想有着密不可分的关系,最近看到两篇文章可以参考来学习:JavaScript 的这个难点,毁掉了多少程序员?(这篇文章是从没学过面向对象编程的读者角度切入讲this的)秒懂this(这篇文章对this作了一个汇总)...转载 2018-11-30 18:33:44 · 993 阅读 · 0 评论 -
ES6 核心特性
ES6 虽提供了许多新特性,但我们实际工作中用到频率较高并不多,根据二八法则,我们应该用百分之八十的精力和时间,好好专研这百分之二十核心特性,将会收到事半功倍的奇效下面这篇文章就详细介绍了一部分核心特性,目录如下:https://mp.weixin.qq.com/s/MghF85KhDPBSdaE1GXWjQg 开发环境配置:babel 编译 ES6 语法,如何用 webpack 实...转载 2018-11-30 17:24:51 · 134 阅读 · 0 评论 -
关于JS事件循环机制
早些时候因为看到一个JS面试题,在这篇文章(实例理解promise、macro-task、micro-task)中有谈到过一些事件循环机制的问题,但是因为找了多方资料整理出来的,某些概念说的还是不清楚看到下面这篇文章,对事件循环机制介绍的思路很清晰,值得存档学习https://mp.weixin.qq.com/s/9_hZX_xWSr3Gd1X_2_WOsA文章最后的答案附在下面,不过...转载 2018-11-30 09:31:35 · 118 阅读 · 0 评论 -
JS对象继承方式的六种写法
一、对象冒充其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 Children 的方法,然后调用它。Children 就会收到 Parent 的构造函数中定义的属性和方法。例如,用下面的方式定义 Parent 和 Children:原理:就是把 Parent 构造函数放到 Child...转载 2018-11-17 10:24:18 · 1349 阅读 · 0 评论 -
JavaScript正则表达式之语法--诙谐易懂
正则表达式可以用来做表单校验,也可以用来搜索关键字,匹配字符等等,功能非常强大,但是刚开始看到正则的语法就头大,什么代码,明明乱码好嘛?!但是这么好用的东西怎么能不学习,偶然看到师父转发的文章,简直让我这初学者醍醐灌顶,作者讲的很通俗易懂。在文章开始前,要了解es6字符串操作方法Regex专题:语法(也有一篇微信文章转载复述了此文,附上链接:一次性搞懂JavaScript正则表达式之语法)...转载 2018-11-15 20:45:57 · 148 阅读 · 0 评论 -
JavaScript 复杂判断的更优雅写法
写代码总会碰到需要复杂判断的地方,我们第一反应就是各种if else或者switch case,但是判断多的话代码会显得很臃肿,下面这篇文章用例子一步步介绍了复杂判断的优雅写法,用到es6的语法等。转载来学习https://mp.weixin.qq.com/s?__biz=MzIyMDkwODczNw==&mid=2247484253&idx=1&sn=f98199386...转载 2018-11-15 19:56:33 · 490 阅读 · 0 评论 -
优雅的链式取值
整理微信上看到的文章,推荐学习在调数据接口时,都会遇到链式取值的问题,如:res.data.goods.list[0].price为了良好的处理报错(Uncaught TypeError: Cannot read property ‘goods’ of undefined),我们一般会判断取值是否为空,即if (res.data.goods.list[0] && res....转载 2018-11-04 10:06:00 · 450 阅读 · 0 评论 -
字符串的扩展
1、for…of循环遍历字符串for (let codePoint of 'foo') { console.log(codePoint)}// "f"// "o"// "o"2、includes(), startsWith(), endsWith()–includes():返回布尔值,表示是否找到了参数字符串–startsWith():返回布尔值,表示参数字符串是否在原字符串..原创 2018-11-01 16:29:43 · 161 阅读 · 0 评论 -
原生单选按钮样式更改遇到的问题
首先说明,这个单选按钮样式更改用到了elementUI的样式,项目引入element的样式包后,直接在相应的标签上加element定义好的class名,具体如何改的这里不作赘述(照着源码写就可以)。重点是遇到的问题:elementUI的单选按钮在选中后会加一个class名is-checked,这个class名决定了选中的样式,如下:自然而然想到在js中给单选按钮绑定点击事件,用addClas...原创 2018-10-31 19:06:22 · 407 阅读 · 0 评论 -
变量的解构赋值及用途
一、数组的解构赋值1、基本用法:完全解构:let a = 1;let b = 2;let c = 3; 可以写成 let [a, b, c] = [1, 2, 3];不完全解构:等号左边的模式,只匹配一部分的等号右边的数组,解构依然成功2、默认值:解构解析允许指定默认值如:let [x, y = ‘b’] = [‘a’]; // x=‘a’, y=‘b’注...原创 2018-10-29 19:51:47 · 273 阅读 · 0 评论 -
移动端h5开发分辨率自适应
在做H5开发时,都会遇到屏幕分辨率自适应问题,那么怎么更好地让页面自适应?这里介绍一种用js计算屏幕宽度+rem单位的方法(网易新闻在用)不同手机有不同的分辨率,UI在做设计图的时候大都会以iPhone6/7/8的分辨率为标准,即375667,像素比为2,所以我们这里计算屏幕宽度,并以750(3752)为标准,修改页面的font-size。js实现如下:这样在项目中所有的单位都用rem(r...原创 2018-10-23 16:50:05 · 2411 阅读 · 0 评论 -
let、const命令
let命令暂时性死区是什么意思?当变量赋值或引用在变量声明(let)之前,浏览器会报错,即在变量声明前都是“死区”。块级作用域内层块级作用域可以定义外层作用域的同名变量。避免在块级作用域内声明函数。如果确实需要,应该用函数表达式,而不是函数声明语句。只有在大括号内才能允许声明函数,否则会报错。const命令const一旦声明变量,必须初始化,不能二次赋值。const实际保证的是该...原创 2018-10-29 11:20:58 · 181 阅读 · 0 评论 -
实例理解promise、macro-task、micro-task
setTimeout(function(){ console.log(1);}, 0);new Promise(function executor(resolve){ console.log(2); for(var i=0; i<10000; i++){ i == 999 && resolve(); } console.log(3);}).then(fun...原创 2018-10-29 15:53:51 · 478 阅读 · 0 评论 -
ES6-数值的扩展
1、Number.parseInt(), Number.parseFloat()// ES5的写法parseInt('12.34') // 12parseFloat('123.45#') // 123.45// ES6的写法Number.parseInt('12.34') // 12Number.parseFloat('123.45#') // 123.452、指数运算符 ...原创 2019-01-21 19:08:59 · 217 阅读 · 0 评论