首页 > JavaScript的事件模型是如何实现的?

JavaScript的事件模型是如何实现的?

JavaScript作为一种基于事件驱动的脚本语言,很多书本都介绍了它的事件模型,

例如:如何去绑定事件,如何取消绑定等···

而对它的底层实现却没怎么提到!所以想问问大神们,它的底层是怎么实现的?或者有什么书本推荐?

JavaScript的事件都是在未来的某一时刻发生的,网上有些说是把事件处理函数放到一个队列里面,那是不是只有一个队列?


看看backbone的events 的实现吧


    var Emitter=function(){
        this._listeners={};
    };

    //注册事件
    Emitter.prototype.on=function(eventName,callback){
        var listeners=this._listeners[eventName]||[];
        listeners.push(callback);
        this._listeners[eventName]=listeners;
    }

    //触发事件
    Emitter.prototype.emit=function(eventName){
        var args=Array.prototype.slice.apply(arguments).slice(1),
            listeners=this._listeners[eventName],
            self=this;

        if(!Array.isArray(listeners))return;

        listeners.forEach(function(callback){
            try{
                callback.apply(this,args);
            }catch(e){
                console.error(e);
            }
        });
    }

    //实例
    var emitter=new Emitter();

    emitter.on('event',function(arg1,arg2){
        console.log('get event',arg1,arg2);
    })

    console.log('emit event');
    emitter.emit('event','arg1','arg2');

老问题了,简单说就是每次执行完当前的JavaScript代码之后,引擎就会检查消息队列,如果有消息的话就取出一条来,检查有没有绑定这个消息的代码,有的话就不管别的了直接去执行绑定好的代码。这段代码执行完之后就再去看消息队列,如果消息队列没有消息了,就一直等待直到有新消息到来。

至于消息的来源自然是浏览器的其他线程比如UI线程、定时器、网络模块等。
(定时器是在event loop中处理的,没有专门的定时器线程,之前说错了)。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

【热门文章】
【热门文章】