Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。Allows you to build scalable network applications usingJavaScript on the server-side.
对于上面这段官方的引用大家应该都看过,nodejs是基于事件驱动和非阻塞I/O的方式来设计运行的,那么作为实现事件驱动的核心模块Events就成了深入学习node.js的关键。在node中大部分的模块的实现都继承了Events类。 比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。
简单来说,就是通过监听事件的状态变化来做出相应的操作。比如读取一个文件,文件读取完毕,或者文件读取错误,那么就触发对应的状态,然后调用对应的回掉函数来进行处理。
我们来简单的看几段代码来回忆一下:
const fs = require('fs');
let rs = fs.createReadStream('1.txt');
// 监听文件打开操作
rs.on('open', function() {
console.log('open');
});
// 监听数据流读取
rs.on('data', function(data) {
console.log(data);
});
// 监听错误
rs.on('error', function() {
console.log('error');
});
// 监听读取结束操作
rs.on('end', function() {
console.log('end');
});
// 监听文件关闭操作
rs.on('close', function() {
console.log('close');
});
上面这段在创建文件读取流的操作上,针对文件的打开,数据,错误,结束,关闭等几个状态进行了监听的回调处理,这也应征了我们上面的定义通过监听事件的状态变化来做出相应的操作。
那么这些监听事件又是如何触发的呢?它是通过Events类中的emit方法去发射事件的。那么下面我们来看一下Events是如何实现这样的监听操作的。
下面来看一下代码,看看是怎么使用的
const events = require('events');
const EventsEmitter = new events();
//===============事件监听部分===============
EventsEmitter.on('open', function() {
console.log('open');
});
EventsEmitter.on('data', function(data) {
console.log(data);
});
EventsEmitter.on('error', function() {
console.log('error');
});
EventsEmitter.on('end', function() {
console.log('end');
});
EventsEmitter.on('close', function() {
console.log('close');
});
//=============事件触发部分=================
// 触发open事件
EventsEmitter.emit('open');
// 触发data事件,并传递一个字符串参数'test'
EventsEmitter.emit('data','test');
// 触发error事件
EventsEmitter.emit('error');
// 触发end事件
EventsEmitter.emit('end');
// 触发close事件
EventsEmitter.emit('close');
看完上面这段代码是不是更进一步的理解了呢。我们回顾最最上面的那段文件流监听的代码,其实就是文件在不同的状态下去发射相应的emit事件。 而在那段代码中我们并没有去引入events这个node提供的模块,是因为文件流中继承了events模块,所以rs这个变量也就拥有了相应的rs.on()这个方法了。
看到这里我想应该都了解的差不多了。那么下面来试着实现一下Events这个类,加深理解。
class Events {
constructor() {
this.events = {};
}
}
module.exports = Events;
on方法接收两个参数:
将对应的事件先存放在一个对象中,分两种情况:
/**
* 事件监听
* @param {*} type 监听的事件类型
* @param {*} listener 回调函数
*/
on(type, listener) {
if (this.events[type]) {
this.events[type].push(listener);
} else {
this.events[type] = [listener];
}
}
这里在补充一下,同一个监听事件是可以添加多个的,所以这里才会this.events[type]才会给一个数组来存储
接收两个参数:
/**
* 事件触发
* @param {*} type 要触发的事件类型
* @param {...any} rest 接收到的若干个参数,这个参数会作为参数被传递到对应事件的回调函数中
*/
emit(type, ...rest) {
if (this.events[type]) {
this.events[type].forEach(listener => {
listener.apply(this, rest);
});
}
}
写到这里,我们之前的代码就能够引入自己写的这个Events模块来执行了
这个方法是用来删除对应事件的某个监听函数,那么我们只需要把该事件从this.events[type]中删除即可
接收两个参数:
/**
* 删除指定事件中的监听函数
* @param {*} type 对应的事件
* @param {*} listener 要删除的监听函数
*/
removeListener(type, listener) {
if (this.events[type]) {
this.events[type].filter(l => l !== listener);
}
}
这个方法和on一样,唯一的区别就是它只会执行一次,即便多次调用emit去触发相同的事件监听,它也只会执行一次。
/**
* 事件监听,但是只执行一次
* @param {*} type 监听的事件类型
* @param {*} listener 回调函数
*/
once(type, listener) {
const wraper = (...rest) => {
listener.apply(this, rest);
this.removeListener(type, wraper);
};
this.on(type, wrapper);
}
class Events {
constructor() {
this.events = {};
}
/**
* 事件监听
* @param {*} type 监听的事件类型
* @param {*} listener 回调函数
*/
on(type, listener) {
if (this.events[type]) {
this.events[type].push(listener);
} else {
this.events[type] = [listener];
}
}
/**
* 事件监听,但是只执行一次
* @param {*} type 监听的事件类型
* @param {*} listener 回调函数
*/
once(type, listener) {
const wraper = (...rest) => {
listener.apply(this, rest);
this.removeListener(type, wraper);
};
this.on(type, wrapper);
}
/**
* 事件触发
* @param {*} type 要触发的事件类型
* @param {...any} rest 接收到的若干个参数,这个参数会作为参数被传递到对应事件的回调函数中
*/
emit(type, ...rest) {
if (this.events[type]) {
this.events[type].forEach(listener => {
listener.apply(this, rest);
});
}
}
/**
* 删除指定事件中的监听函数
* @param {*} type 对应的事件
* @param {*} listener 要删除的监听函数
*/
removeListener(type, listener) {
if (this.events[type]) {
this.events[type].filter(l => l !== listener);
}
}
}
module.exports = Events;
Events模块是node非常核心的模块,它对你深入去学习node有很大的帮助,上面我只写了几个方法,内部还有几个API以及一些非常细节的地方可以自己试着去扩展,我这里就不一个一个的去写了
我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...
在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发
事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标
何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件
js keyup、keypress和keydown事件都是有关于键盘的事件,当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target
我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。
js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!