JAVAScript
文章平均质量分 51
mmjinglin
这个作者很懒,什么都没留下…
展开
-
this
this指向运行时上下文1.作为对象方法调用时,this指向对象本身2.作为普通函数调用时,this指向父域。在全局作用域下调用,指向window。在函数内部调用,则指向父函数内部作用域3.隐式调用时,则会丢到绑定对象。它会指向默认绑定,全局对象或者undefined。function foo(){ console.log(this.a);}var obj ={a:2,foo:foo};var bar = obj.foo;var a = "oops,global"bar();原创 2021-01-27 15:14:47 · 84 阅读 · 0 评论 -
高性能JS总结
代码执行过程会阻塞浏览器的其他进程,比如页面绘制、讲脚本放在页面底部合并脚本,减少script标签数。压缩脚本使用无阻塞下载。例如defer属性,xhr对象下载。SSR服务端渲染使用CDN,设置HTTP响应头来缓存JS数据存储位置对性能的影响数据存储份字面量,变量,数组项,对象成员。字面量和局部变量访问速度快,访问数组元素和对象成员相对较慢。嵌套对象,原型链属性,层次越深,访问速度越慢。DOM渲染减少回流、重排减少使用影响重排的属性,(居中查询),例如getComputedS原创 2021-01-27 15:05:22 · 178 阅读 · 0 评论 -
JavaScript之map与parseInt的陷阱
问题来源 这个问题的来源是学习廖雪峰老师JS教程。问题如下:小明希望利用map()把字符串变成整数,他写的代码很简洁: 'use strict'; var arr = ['1', '2', '3']; var r; r = arr.map(parseInt); console.log(r); // [1, NaN, NaN]为什么不...转载 2019-06-17 15:13:52 · 170 阅读 · 0 评论 -
js事件冒泡和事件捕获详解
Javascript与HTML之间的交互是通过事件实现。一、事件流事件,是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流,描述的是页面中接受事件的顺序。IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式。事件冒泡事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中...转载 2019-05-29 16:42:00 · 217 阅读 · 0 评论 -
编写更优雅的 JavaScript 代码
总结下对 JavaScript 代码编写的认识,写尽可能优雅的代码。代码技巧ES2015+ 新特性写法熟练使用 ES6 新特性可以优化代码,更加简洁,代码对比// 箭头函数function foo(){ console.log('hello world')}const foo = () => console.log('hello world')// 数组去重co...转载 2019-01-09 10:15:10 · 156 阅读 · 0 评论 -
JavaScript 复杂判断的更优雅写法
前提我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你试一下。举个例子先看一段代码/** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行...转载 2019-01-08 19:49:44 · 120 阅读 · 1 评论 -
优雅的 JavaScript 排序算法(ES6)
面试官:小伙子排序算法了解吗?回答:我能写出来四种冒泡排序,两种选择排序,两种插入排序,两种哈希排序,两种归并排序,两种堆排序,四种快速排序。用我自己的方式。本文中常使用 swap 函数,在这里提前列出来,以下就省略了。function swap(arr, indexA, indexB) { [arr[indexA], arr[indexB]] = [arr[indexB], ar...转载 2019-01-09 09:52:01 · 6410 阅读 · 1 评论 -
使用HTML5的History API
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的URL来反应出页面内容的变化,这时该功能可以派上用场。举个例子,当用户从首页进入帮助页面时,我们通过Ajax来加载帮助页面的内容。然后这个用户又转到产品页面,我们需要再一次通过Ajax请求来替换页面...转载 2019-01-24 15:46:45 · 923 阅读 · 0 评论 -
requestAnimationFrame 使用方法
requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在 requestAnimationFrame 的回调函数里绘制动画会有一个问题。是什么问题呢?要理解这个问题,我们先要了解 requestAnimationFrame 的一个知识点。requestAnimationFrame 不管理回调函数这个知识点就是 reques...转载 2019-01-12 12:38:52 · 2946 阅读 · 0 评论 -
被誉为神器的requestAnimationFrame
前面的话与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔。这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详细介绍HTML5新增的定时器requestAnimationFrame引入计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间...转载 2019-01-11 17:40:32 · 194 阅读 · 0 评论 -
小福利---前端小技巧
将彻底屏蔽鼠标右键,无右键菜单<body oncontextmenu=window.event.returnvalue=false>也可以用于网页中Table框架中<table border oncontextmenu=return(false)><td>no</table>取消选取、防止复制转载 2019-01-10 14:18:43 · 207 阅读 · 0 评论 -
浏览器的线程
基本概念js的执行过程是单线程的模式,也就是同步进行,只有前面的代码执行完了才会往下面执行但是执行js代码也只是浏览器的线程之一所负责的事情,这个线程被称为js引擎,浏览器还具有其他线程:界面渲染线程(UI)、浏览器事件触发线程(控制交互,响应用户)、http请求线程(处理请求,而ajax发送请求则会委托浏览器新开一个http线程)、EventLoop轮询线程(负责轮询消息队列)...转载 2019-01-10 12:58:39 · 521 阅读 · 0 评论