2

JavaScript 中的事件委托

JavaScript 中一个重要的方法就是事件委托(又叫事件代理)。事件委托将事件侦听器添加到一个父级元素上,这样就只用添加一次事件侦听器,可以避免向 (父级元素内)很多特定的 DOM 节点添加多个事件侦听器,减少了内存消耗,从而优化程序性能。而这个添加在父元素上的事件侦听器通过事件冒泡的事件流机制以分析查找子元素的匹配项。事件委托的概念解释并不复杂,但很多人不明事件委托到底是如何的工作,本文就来解释一下事件委托的工作原理。事件冒泡(Event Bubbling)要完全理解事件委托的工作原理,必须要先了解事件冒泡。事件冒泡的事件流最先是由微软在其开发的 IE 浏览器中实现的。事件冒泡的事件流,...

阅读全文>>

3

jQuery3.6.0终于来了!全新版本有不同?

时隔将近一年, jQuery团队终于揭开了等待已久的3.6.0发布版的神秘面纱,带来了全新的、精简过的选项,以及新的主要功能、改进和bug的修复。更新后的jQuery有哪些特点?又给我们带了什么样的全新体验?今天的文章小渡就为你一探究竟!1、什么是jQueryjQuery简写jq,Query是查询的意思,jQuery顾名思义就是一个让JavaScript更加方便的查询和控制页面控件的库。很多人把jQuery定位为一个JavaScript框架,这是不严谨的。框架是解决方案的轮子,而jQuery的本质是js文件,是对原生js进行浓缩和优化后,进一步封装成的超集(库)。jQuery设计的宗旨是“Wr...

阅读全文>>

2

你真的了解ES6函数特性么?

前言 函数是所有编程语言中重要的组成部分,在Es6出现之前 JavaScript的函数语法一直没有太大的变化,从而遗留了很多问题和隐晦的做法,导致实现一些功能需要编写很多代码。函数形参默认值 JavaScript函数有一个特别的地方,就是无论在函数形参里定义了多少参数,都可以传入任意数量的参数,但是有的情况下,我们的参数只是可填,这样的话我们还在函数体呢写一堆逻辑从而导致代码冗余,还好Es6版本出现了函数默认值。我们用Es5和Es6代码来比对一下Es5处理默认参数function person(name, age) { name = typeof(name) != "undefined...

阅读全文>>

1

Js震撼人心的超酷人体模型类库Mannequin.js

简要介绍mannequin.js是一款可以通过JavaScript实现控制人体关节模型的超酷类库。mannequin.js基于经典的Three.js库,官网所展现的Demo效果令人惊奇到掉了下巴,真的是震撼!接下来说下细节。首先,它可以选择创建Male、Female、Child三种人体模型。其次,每种模型可以细分到头部、颈部、躯干、骨盆。上肢可以细分为手臂、肘部、腕部和手指,下肢可以细分为腿,膝盖和脚踝。模型还可以设置动态或者静态的姿势。通过这个类库让前端开发者开启上帝模式,随心掌控模型的一举一动。Github地址https://boytchev.github.io/mannequin.js/...

阅读全文>>

1

这4个问题可以检测出你JavaScript水平的高低

准备JavaScript面试时应了解的事项。JavaScript现在是一种非常流行的编程语言,基于该语言,派生了大量库和框架。 但是,无论高层生态系统如何发展,离不开原始的JavaScript。 在这里,我选择了4个JavaScript面试问题来测试程序员使用普通JavaScript的技能。1.实现Array.prototype.map如何手动实现Array.prototype.map方法?熟练使用数组的内置方法并不难。但是,如果您只是熟悉语法而又不了解原理,那么很难真正理解JavaScript。对于Array.prototype.map,它将创建一个新数组,其中将填充在调用数组中每个元素上调...

阅读全文>>

1

js 手动实现bind方法,超详细思路分析

在模拟bind之前,我们先了解bind的概念,这里引入MDN解释:bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。说的通俗一点,bind与apply/call一样都能改变函数this指向,但bind并不会立即执行函数,而是返回一个绑定了this的新函数,你需要再次调用此函数才能达到最终执行。我们来看一个简单的例子:var obj = { z: 1 }; var obj1 = { z: 2 }; function fn(x, y) { consol...

阅读全文>>

1

怎么在javascript中灵活运用 this

this 是什么Javascriptthis关键词指的是他所属的对象,它拥有不同的值,具体取决于使用的位置和调用方式。使用方式在方法中,它指向这个方法的拥有者在函数中,它是全局对象window严格模式下在函数中,它是undefined单独使用时,它是全局对象window在事件中,它指向触发事件的目标对象e.target不同执行模式下的差异化javascript 中的this不同于其他编程语言,在严格模式和非严格模式下, 它的值是不同的,下面举个例子。// 非严格模式 function foo() { return this } console.log(foo() === window....

阅读全文>>

1

JS的高阶函数和回调函数

高阶函数:如果一个函数的参数或者返回值为一个函数,该函数叫做高阶函数回调函数:作为参数的函数叫做回调函数例如:上述a函数的参数是个函数,为高阶函数。b函数作为a函数的一个参数,所以b函数为回调函数。函数作为返回值:上图函数c的返回值是个函数,所以c也被成为高阶函数。

阅读全文>>

1

研究JavaScript的六项基础与组织方式

一、开宗明义JS的每一个单独的文件都是一个独立的program。二、数值与数据Value and DataJS中的Value就是Data,有两种形式分别为primitive和object。其中primitive包括1)number(bigint), 2)string(interpolate)3)boolean 4) undefined and null 5) Symbol 而剩下的所有的data都是object类型,比如array与function是特殊类型的object。`typeof`检测数据的类型,但有个特殊的bug:typeof null; // "obj...

阅读全文>>

1

JS排序算法:冒泡、选择、插入、归并、快速、希尔、堆、计数

1. 冒泡排序算法实现(javascript)//冒泡排序算法(javascript) //author:Hengda //arr数组 //mode false 升序 ture 降序 function bubbleSort( arr, mode ){ var i, j, temp, len = arr.length; for( i = len - 1 ; i > 0; i-- ){ for( j = 0; j < i; j++ ){ if( mode ? arr[ j + 1 ] < arr[ j ] : arr[ ...

阅读全文>>