Question

我正在尝试从第三方开源项目中了解一些代码。

我已经在JS中编程了一段时间，但如果它还没有熟悉面向对象或函数式编程部分。

我已经读过javascript是一种原型语言，以及设计模式可以让你'面向对象'等功能，如继承等。所以我最终会到达那里。

我正在试图弄清楚以下是什么类型的语法，这样我就可以集中精力去了解它，因为我当然需要它来进行项目的未来编程。

如果有人可以帮助我帮助确定这里使用的语法，并指出我可以在线阅读的一些参考资料，那将非常有帮助。

谢谢，哈丽特

WaveSurfer.Regions = {
    init: function (wavesurfer) {
        this.wavesurfer = wavesurfer;
        this.wrapper = this.wavesurfer.drawer.wrapper;

        /* Id-based hash of regions. */
        this.list = {};
    },

    /* Add a region. */
    add: function (params) {
        var region = Object.create(WaveSurfer.Region);
        region.init(params, this.wavesurfer);

        this.list[region.id] = region;

        region.on('remove', (function () {
            delete this.list[region.id];
        }).bind(this));

        return region;
    },

    /* Remove all regions. */
    clear: function () {
        Object.keys(this.list).forEach(function (id) {
            this.list[id].remove();
        }, this);
    },

    enableDragSelection: function (params) {
        var my = this;
        var drag;
        var start;
        var region;

        function eventDown(e) {
            drag = true;
            if (typeof e.targetTouches !== 'undefined' && e.targetTouches.length === 1) {
                e.clientX = e.targetTouches[0].clientX;
            }
            start = my.wavesurfer.drawer.handleEvent(e);
            region = null;
        }
        this.wrapper.addEventListener('mousedown', eventDown);
        this.wrapper.addEventListener('touchstart', eventDown);
        this.on('disable-drag-selection', function() {
            my.wrapper.removeEventListener('touchstart', eventDown);
            my.wrapper.removeEventListener('mousedown', eventDown);
        });
        function eventUp(e) {
            drag = false;

            if (region) {
                region.fireEvent('update-end', e);
                my.wavesurfer.fireEvent('region-update-end', region, e);
            }

            region = null;
        }
        this.wrapper.addEventListener('mouseup', eventUp);
        this.wrapper.addEventListener('touchend', eventUp);
        this.on('disable-drag-selection', function() {
            my.wrapper.removeEventListener('touchend', eventUp);
            my.wrapper.removeEventListener('mouseup', eventUp);
        });
        function eventMove(e) {
            if (!drag) { return; }

            if (!region) {
                region = my.add(params || {});
            }

            var duration = my.wavesurfer.getDuration();
            if (typeof e.targetTouches !== 'undefined' && e.targetTouches.length === 1) {
                e.clientX = e.targetTouches[0].clientX;
            }
            var end = my.wavesurfer.drawer.handleEvent(e);
            region.update({
                start: Math.min(end * duration, start * duration),
                end: Math.max(end * duration, start * duration)
            });
        }
        this.wrapper.addEventListener('mousemove', eventMove);
        this.wrapper.addEventListener('touchmove', eventMove);
        this.on('disable-drag-selection', function() {
            my.wrapper.removeEventListener('touchmove', eventMove);
            my.wrapper.removeEventListener('mousemove', eventMove);
        });
    },

    disableDragSelection: function () {
        this.fireEvent('disable-drag-selection');
    }
};

Answer 1

WaveSurfer是窗口对象的全局属性。

Regions是WaveSurfer对象上的一个对象。

使用JavaScript对象文字表示法声明Regions对象，这与JSON表示法非常相似。但是，JavaScript对象文字可以将函数作为属性值。

因此，区域可以使用以下功能...添加，清除等

WaveSurfer.Regions = {
init: function (wavesurfer) {
    this.wavesurfer = wavesurfer;
    this.wrapper = this.wavesurfer.drawer.wrapper;

    /* Id-based hash of regions. */
    this.list = {};
},

/* Add a region. */
add: function (params) {
    var region = Object.create(WaveSurfer.Region);
    region.init(params, this.wavesurfer);

    this.list[region.id] = region;

    region.on('remove', (function () {
        delete this.list[region.id];
    }).bind(this));

    return region;
},

/* Remove all regions. */
clear: function () {
    Object.keys(this.list).forEach(function (id) {
        this.list[id].remove();
    }, this);
},

enableDragSelection: function (params) {
    var my = this;
    var drag;
    var start;
    var region;

    function eventDown(e) {
        drag = true;
        if (typeof e.targetTouches !== 'undefined' && e.targetTouches.length === 1) {
            e.clientX = e.targetTouches[0].clientX;
        }
        start = my.wavesurfer.drawer.handleEvent(e);
        region = null;
    }
    this.wrapper.addEventListener('mousedown', eventDown);
    this.wrapper.addEventListener('touchstart', eventDown);
    this.on('disable-drag-selection', function() {
        my.wrapper.removeEventListener('touchstart', eventDown);
        my.wrapper.removeEventListener('mousedown', eventDown);
    });
    function eventUp(e) {
        drag = false;

        if (region) {
            region.fireEvent('update-end', e);
            my.wavesurfer.fireEvent('region-update-end', region, e);
        }

        region = null;
    }
    this.wrapper.addEventListener('mouseup', eventUp);
    this.wrapper.addEventListener('touchend', eventUp);
    this.on('disable-drag-selection', function() {
        my.wrapper.removeEventListener('touchend', eventUp);
        my.wrapper.removeEventListener('mouseup', eventUp);
    });
    function eventMove(e) {
        if (!drag) { return; }

        if (!region) {
            region = my.add(params || {});
        }

        var duration = my.wavesurfer.getDuration();
        if (typeof e.targetTouches !== 'undefined' && e.targetTouches.length === 1) {
            e.clientX = e.targetTouches[0].clientX;
        }
        var end = my.wavesurfer.drawer.handleEvent(e);
        region.update({
            start: Math.min(end * duration, start * duration),
            end: Math.max(end * duration, start * duration)
        });
    }
    this.wrapper.addEventListener('mousemove', eventMove);
    this.wrapper.addEventListener('touchmove', eventMove);
    this.on('disable-drag-selection', function() {
        my.wrapper.removeEventListener('touchmove', eventMove);
        my.wrapper.removeEventListener('mousemove', eventMove);
    });
},

disableDragSelection: function () {
    this.fireEvent('disable-drag-selection');
}
};

这是什么类型的JavaScript语法？

1 个答案: