javascript - 这个js观察者模式代码我看不懂求指点
高洛峰
高洛峰 2017-04-11 11:44:53
[JavaScript讨论组]

慕课复制过来的,看不太懂; 这个[].slice是啥 求稍微讲下

var Observer = (function(slice) {

    function bind(event, fn) {
        var events = this.events = this.events || {},
            parts = event.split(/\s+/),  
            i = 0,
            num = parts.length,
            part;

        if (events[event] && events[event].length) return this;

        for (; i < num; i++) {
            events[(part = parts[i])] = events[part] || [];
            events[part].push(fn);
        }
        return this;
    }

    function one(event, fn) {
        this.bind(event, function fnc() {
            fn.apply(this, slice.call(arguments));
            this.unbind(event, fnc);
        });
        return this;
    }

    function unbind(event, fn) {
        var events = this.events,
            eventName, i, parts, num;

        if (!events) return;

        parts = event.split(/\s+/);
        for (i = 0, num = parts.length; i < num; i++) {
            if ((eventName = parts[i]) in events !== false) {
                events[eventName].splice(events[eventName].indexOf(fn), 1);
                if (!events[eventName].length) { //修正没有事件直接删除空数组
                    delete events[eventName];
                }
            }
        }
        return this;
    }

    function trigger(event) {
        var events = this.events,
            i, args, falg;

        if (!events || event in events === false) return;

        args = slice.call(arguments, 1);
        for (i = events[event].length - 1; i >= 0; i--) {
            falg = events[event][i].apply(this, args);
        }
        return falg; //修正带返回
    }

    return function() {
        this.on =
            this.subscribe = bind; //订阅
        this.off =
            this.unsubscribe = unbind; //退订
        this.trigger =
            this.publish = trigger; //发布
        this.one = one;
        return this;
    };
})([].slice);
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
PHPz

[].slice 就是 Array.prototype.slice

意思是将这个方法传给闭包,供下一次调用

伊谢尔伦

[].slice 是一个函数,其实就是Array.prototype.slice。

把[].slice方法函数作为参数传到闭包内部,内部就可以用slice来实现Array.prototype.slice的功能了。

由于函数的arguments并不是一个真正的数组,所以需要slice.call(arguments).

这段代码就是实现jq里的事件绑定,on,off,trigger。

补充内容:
events[(part = parts[i])] = events[part] || []执行情况:
联系上下文:
events可以想象成{};parts想象成['click','hover'],part初始化为undefined;
在for循环里:
循环之前part为defined,
第一次循环时part = 'click' ;events['click'] = events['click'] || [];
第二次循环时part = 'hover' ;events['hover'] = events['hover'] || [];

当然events可能是个空对象{}也可能不是,上面的赋值就是避免覆盖原来的值;

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号