CKEditor5 Observable——装饰方法

上一节我们学习了在CK5中,如何绑定多个属性以及绑定多个Observable对象,今天我们学习如何装饰方法。

 

首先,我们提出一个问题,为什么会有装饰方法呢?以及什么叫做装饰?

所谓装饰,就是在不改变原来方法功能的前提下,增加方法的功能,众所周知在java的IO流中,就有很多地方用到了装饰。

 

而在CK5中,装饰是什么意思呢?请看下面这段话:

Decorating object methods transforms them into event–driven ones without changing their original behavior.

大概意思就是在不改变原方法行为的同时,将方法转化成基于事件驱动的。下面我们用代码来说明:

import {View} from 'ckeditor5/src/ui';
export default class DecorateButton extends View {
    constructor() {
        super();
        this.type = 'button';

        const bind = this.bindTemplate;

        // this.label is observable but undefined.
        this.set( 'label' );

        // this.isOn is observable and false.
        this.set( 'isOn', false );

        // this.isEnabled is observable and true.
        this.set( 'isEnabled', true );

        this.setTemplate( {
            tag: 'button',
            attributes: {
                class: [
 
                    bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
      
                    bind.if( 'isEnabled', 'ck-disabled', value => !value )
                ],
                type: this.type
            },
            children: [
                {
                    
                    text: bind.to( 'label' )
                }
            ]
        } );
        this.decorate( 'focus' );
    }
    focus( force ) {
        console.log( `Focusing button, force argument="${ force }"` );

        // Unless forced, the button will only focus when not already focused.
        if ( force || document.activeElement != this.element ) {
            this.element.focus();
            return true;
        }
        return false;
    }
}

在上面的代码中,focus方法被装饰后,DecorateButton 继承自View,因此是一个Observable对象,focus被装饰后,变成了基于事件驱动的。那么它基于事件驱动以后,究竟有什么作用呢?我们一一说明:

装饰方法的作用

1、从外部阻止方法的执行

const button = new DecorateButton();
// Render the button to create its #element.
button.render();
// The logic controlling the behavior of the button.
        button.on( 'focus', ( evt, [ isForced ] ) => {
            // Disallow forcing the focus of this button.
            if ( isForced === true ) {
                evt.stop();
            }
        }, { priority: 'high' } );
button.focus(); // -> 'Focusing button, force argument="undefined"'
button.focus( true ); // Nothing is logged, the execution has been stopped.

这里打印出的日志信息如下:

可以看出只有button.focus()方法调用的时候,代码执行啦,第二个button.focus(true)执行的时候,被我们自己定义的监听器拦截后,通过调用evt.stop()阻止了后续方法的执行。

 

2、改变返回的值

const button = new DecorateButton();
// Render the button to create its #element.
button.render();
// The logic controlling the behavior of the button.
button.on( 'focus', ( evt, [ isForced ] ) => {
 // Pretend the button wasn't focused if the focus was forced.
            if ( isForced === true ) {
                evt.return = false;
            }
} );
console.log( button.focus() ); // -> true
console.log( button.focus( true ) ); // -> false

这里打印出来的日志信息如下:

从日志可以看出,当button.focus()不传值的时候,返回值是原始的返回值,而当button.focus(true)执行的时候,返回的是拦截器返回的值。从日志可以看出,原始方法和监听方法都得到了执行。

我们在监听器方法中增加一个日志:

console.log('execute listener');

添加日志信息后,日志信息如下:

从日志可以看出是先执行原始方法,然后执行监听器方法,最后返回值。

3、修改及时参数值

const button = new Button();
// Render the button to create its #element.
button.render();
// The logic controlling the behavior of the button.
button.on( 'focus', ( evt, args ) => {
   // Always force the focus.
   args[ 0 ] = true;
}, { priority: 'high' } );
button.focus(); // -> 'Focusing button, force="true"'
button.focus( true ); // -> 'Focusing button, force="true"'

这种情况下,打印出来的日志信息如下:

不管是否传递参数,在一个高级别的监听器中,都强制修改成了true。

 

版权声明:著作权归作者所有。

相关推荐

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo

Mac OS X完整卸载Node.js,并重新安装的方法

Mac OS X完整卸载Node.js,根据使用的工具不同,分为两种情况:对于使用brew的用户, OSX:卸载Node.jsbrew uninstall node; # 或者 `brew uninstall --force node`  这个会删除所有的版本brew cleanup;rm -f /usr/local/bin/npm /usr/local/lib/dtrace/node.

MacOS 安装yarn几种方式

macOS有几种安装yarn的方式,如下:使用homebrew安装yarnbrew install yarn使用homebrew安装,如果node.js没有安装,那么它会自动安装node.js使用MacPorts安装yarnsudo port install yarnMacPorts也会自动按node.js使用脚本安装yarnmacOS属于Unix系统的分支,在Unix环境下,使用脚本安装是很方便

Celery多种的安装方式

Celery提供了多种的安装方式:通过pip安装通过easy_install直接使用源码安装使用pip安装celery$ pip install Celery使用easy_install安装celery$ easy_install Celery直接使用源码安装1、从pypi下载celery2、执行以下命令安装$ tar xvfz celery-0.0.0.tar.gz$ cd celery-0.0

Java 9:Observer和Observable废弃原因及解决方案

Observer和Observable在Java 9标记为废弃。废弃原因Observer和Observable有几个原因:1、不能序列化Observable没有实现Serializable接口,它的内部成员变量都是私有的,子类不能通过继承它来对Observable的成员变量处理。所以子类也不能序列化。参考:Why is java.util.Observable&nbs