敲碎时间,铸造不朽的个人专栏
上一篇

CKEditor5——View理解

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

CKEditor5——View理解

今天我们继续学习ck5UI中的一个基础类View,这个类是所有视图的基础类,我们先看看这个类的代码:

export default class View {
	/**
	 * Creates an instance of the {@link module:ui/view~View} class.
	 *
	 * Also see {@link #render}.
	 *
	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
	 */
	constructor( locale ) {
		
		this.element = null;

		this.isRendered = false;

		this.locale = locale;
 
		this.t = locale && locale.t;

		this._viewCollections = new Collection();

		this._unboundChildren = this.createCollection();

		// Pass parent locale to its children.
		this._viewCollections.on( 'add', ( evt, collection ) => {
			collection.locale = locale;
		} );

		/**
		 * Template of this view. It provides the {@link #element} representing
		 * the view in DOM, which is {@link #render rendered}.
		 *
		 * @member {module:ui/template~Template} #template
		 */

		/**
		 * Cached {@link module:ui/template~BindChain bind chain} object created by the
		 * {@link #template}. See {@link #bindTemplate}.
		 *
		 * @private
		 * @member {Object} #_bindTemplate
		 */

		this.decorate( 'render' );
	}
}
 
 
mix( View, DomEmitterMixin );
mix( View, ObservableMixin );

从这个类的构造函数可以看出,这个类是一个dom事件类,也是一个可观察对象。它接收一个locale对象作为参数。视图类包含一个element元素,这个是实际的dom元素,从视图到dom元素节点需要一个渲染的过程,因此有一个判断视图是否渲染的boolean属性;还有一个存储子节点视图的集合元素,这个集合用于给当前的视图节点添加子节点。this._unboundChildren这个属性用于我们注册子节点的时候存储子节点视图。还有一个是装饰了render方法,方便我们在视图渲染的时候添加一些自定义的功能。

这个类有一个关键的属性:this._bindTemplate

get bindTemplate() {
	if ( this._bindTemplate ) {
		return this._bindTemplate;
	}

	return ( this._bindTemplate = Template.bind( this, this ) );
}

这个属性主要用于给视图绑定事件,或者配置一些dom节点的class或者style等属性。

createCollection( views ) {
	const collection = new ViewCollection( views );

	this._viewCollections.add( collection );

	return collection;
}

以上方法是主要用于添加子视图View

另外的一个关键方法就是:

setTemplate( definition ) {
	this.template = new Template( definition );
}
extendTemplate( definition ) {
	Template.extend( this.template, definition );
}

这个方法的作用是配置视图的模板,主要用于渲染的时候使用。另一个就是扩展模板视图,类似于对当前的模板进行装饰作用。

剩下的就是渲染了:

render() {
	if ( this.isRendered ) {
		/**
		 * This View has already been rendered.
		 *
		 * @error ui-view-render-already-rendered
		 */
		throw new CKEditorError( 'ui-view-render-already-rendered', this );
	}

	// Render #element of the view.
	if ( this.template ) {
		this.element = this.template.render();

		// Auto–register view children from #template.
		this.registerChild( this.template.getViews() );
	}

	this.isRendered = true;
}

从这个方法不难看出,这里的渲染主要是调用模板的渲染方法来实现,将渲染过程代理给了Template这个类。同时还将模板的视图注册到了子节点。

总结起来说就是:

1、配置视图的模板,然后进行渲染。

2、给当前视图添加子视图。

3、还有一个就是注册子节点(这里很简单,就是添加到视图的一个集合)。

有一点需要重点注意的是,这里渲染功能和绑定功能都是委托到了Template这个类来完成的,因此,Template会成为我们分析的重点。我们下一节对这个类进行学习。

欢迎讨论

 

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

X

欢迎加群学习交流

联系我们