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

CKEditor5——Template理解(三)

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

CKEditor5——Template理解(三)

上一节我们分析了render()方法中关键的_renderText(),我们再来看看另一个方法就是renderElement()

_renderElement( data ) {
	let node = data.node;

	if ( !node ) {
		node = data.node = document.createElementNS( this.ns || xhtmlNs, this.tag );
	}

	this._renderAttributes( data );
	this._renderElementChildren( data );
	this._setUpListeners( data );

	return node;
}

从这里可以看出,渲染元素节点和文本节点有差别,那就是渲染元素节点,分为三步:

1、渲染节点的属性

2、渲染元素的子元素

3、设置当前元素的事件监听器。

在此之前需要判断当前数据是否存在node属性,一般来说,如果是render()方法调用,那么是没有node属性的,需要根据tag来创建一个节点,然后才开始渲染;而apply方法是直接有node属性,可以直接渲染。

我们再来看看this._renderAttributes( data )

_renderAttributes( data ) {
	let attrName, attrValue, domAttrValue, attrNs;

	if ( !this.attributes ) {
		return;
	}

	const node = data.node;
	const revertData = data.revertData;

	for ( attrName in this.attributes ) {
		// Current attribute value in DOM.
		domAttrValue = node.getAttribute( attrName );

		// The value to be set.
		attrValue = this.attributes[ attrName ];

		// Save revert data.
		if ( revertData ) {
			revertData.attributes[ attrName ] = domAttrValue;
		}

		// Detect custom namespace:
		//
		//		class: {
		//			ns: 'abc',
		//			value: Template.bind( ... ).to( ... )
		//		}
		//
		attrNs = ( isObject( attrValue[ 0 ] ) && attrValue[ 0 ].ns ) ? attrValue[ 0 ].ns : null;

		// Activate binding if one is found. Cases:
		//
		//		class: [
		//			Template.bind( ... ).to( ... )
		//		]
		//
		//		class: [
		//			'bar',
		//			Template.bind( ... ).to( ... ),
		//			'baz'
		//		]
		//
		//		class: {
		//			ns: 'abc',
		//			value: Template.bind( ... ).to( ... )
		//		}
		//
		if ( hasTemplateBinding( attrValue ) ) {
			// Normalize attributes with additional data like namespace:
			//
			//		class: {
			//			ns: 'abc',
			//			value: [ ... ]
			//		}
			//
			const valueToBind = attrNs ? attrValue[ 0 ].value : attrValue;

			// Extend the original value of attributes like "style" and "class",
			// don't override them.
			if ( revertData && shouldExtend( attrName ) ) {
				valueToBind.unshift( domAttrValue );
			}

			this._bindToObservable( {
				schema: valueToBind,
				updater: getAttributeUpdater( node, attrName, attrNs ),
				data
			} );
		}

		// Style attribute could be an Object so it needs to be parsed in a specific way.
		//
		//		style: {
		//			width: '100px',
		//			height: Template.bind( ... ).to( ... )
		//		}
		//
		else if ( attrName == 'style' && typeof attrValue[ 0 ] !== 'string' ) {
			this._renderStyleAttribute( attrValue[ 0 ], data );
		}

		// Otherwise simply set the static attribute:
		//
		//		class: [ 'foo' ]
		//
		//		class: [ 'all', 'are', 'static' ]
		//
		//		class: [
		//			{
		//				ns: 'abc',
		//				value: [ 'foo' ]
		//			}
		//		]
		//
		else {
			// Extend the original value of attributes like "style" and "class",
			// don't override them.
			if ( revertData && domAttrValue && shouldExtend( attrName ) ) {
				attrValue.unshift( domAttrValue );
			}

			attrValue = attrValue
				// Retrieve "values" from:
				//
				//		class: [
				//			{
				//				ns: 'abc',
				//				value: [ ... ]
				//			}
				//		]
				//
				.map( val => val ? ( val.value || val ) : val )
				// Flatten the array.
				.reduce( ( prev, next ) => prev.concat( next ), [] )
				// Convert into string.
				.reduce( arrayValueReducer, '' );

			if ( !isFalsy( attrValue ) ) {
				node.setAttributeNS( attrNs, attrName, attrValue );
			}
		}
	}
}

这个方法的逻辑比较多,但是总的来说分为两种情况,对普通属性的处理和对有bind.to()或者bind.if()

我们具体来看看:

1、首先是将当前节点的属性值取出来进行迭代,如果不存在直接返回,同时拿出当前数据的revertData数据用于记录之前的状态。

2、其次在迭代中判断属性是否为TemplateBinding,如果是的话需要设置响应的Observable监听,这里的监听我们在上一节已经分析过,感兴趣的可以去看看。

3、如果属性的名称是style,也就是css的style属性,那么需要调用单独的this._renderStyleAttribute

这个方法的处理和属性处理类似

4、最后一种情况就是普通属性的处理,因为属性的值一般都是数组,因此将这些属性联结起来后设置到节点上即可。

 

我们再看看第二方法this._renderElementChildren( data )

_renderElementChildren( data ) {
	const node = data.node;
	const container = data.intoFragment ? document.createDocumentFragment() : node;
	const isApplying = data.isApplying;
	let childIndex = 0;

	for ( const child of this.children ) {
		if ( isViewCollection( child ) ) {
			if ( !isApplying ) {
				child.setParent( node );

				// Note: ViewCollection renders its children.
				for ( const view of child ) {
					container.appendChild( view.element );
				}
			}
		} else if ( isView( child ) ) {
			if ( !isApplying ) {
				if ( !child.isRendered ) {
					child.render();
				}

				container.appendChild( child.element );
			}
		} else if ( isNode( child ) ) {
			container.appendChild( child );
		} else {
			if ( isApplying ) {
				const revertData = data.revertData;
				const childRevertData = getEmptyRevertData();

				revertData.children.push( childRevertData );

				child._renderNode( {
					node: container.childNodes[ childIndex++ ],
					isApplying: true,
					revertData: childRevertData
				} );
			} else {
				container.appendChild( child.render() );
			}
		}
	}

	if ( data.intoFragment ) {
		node.appendChild( container );
	}
}

这里渲染子节点的的时候也分为两种情况,render调用和apply调用:

1、如果是render()调用,那么此时会data.intoFragment为true,根据逻辑,会创建一个documentFragment

将这个节点作为container,然后分为三种情况处理节点:第一种情况是如果子节点是ViewCollection,此时就直接将节点的element添加到container;第二种情况是如果子节点是View,那么需要渲染后才能添加子节点的element;最后一种情况是节点是一个Node,此时直接添加就可以啦;

2、如果是apply()调用,那么这里实际上就是一种递归调用,然后将渲染后的子节点添加到container

具体的逻辑大家可以参考源代码进行分析,如果有啥问题,欢迎讨论哈。

最后我们看看这个方法this._setUpListeners( data )

_setUpListeners( data ) {
	if ( !this.eventListeners ) {
		return;
	}

	for ( const key in this.eventListeners ) {
		const revertBindings = this.eventListeners[ key ].map( schemaItem => {
			const [ domEvtName, domSelector ] = key.split( '@' );

			return schemaItem.activateDomEventListener( domEvtName, domSelector, data );
		} );

		if ( data.revertData ) {
			data.revertData.bindings.push( revertBindings );
		}
	}
}

如果大家看看上一篇的TemplateBinding的分析,就会对这里有所理解,这个方法的主要作用就是看看当前节点是否存在eventListeners,如果不存在直接返回,如果存在的话,那么迭代此监听器,这个迭代的值

this.eventListeners[key]实际上就是TemplateBinding类型,这里的逻辑就是从key中获取事件名称和dom元素选择器,调用activateDomEventListener绑定dom节点事件,返回值也是一个函数,这个函数的作用就是取消绑定,从这里不难看出revertBindings是一个取消绑定的函数,而这个值会被添加到data.revertData.bindings这个数组中,在revert()方法调用恢复以前的状态的时候会取消dom事件的绑定。

好了,这个渲染dom的逻辑基本上就分析结束了。

这里提一个问题,在渲染子节点的时候,如果child是ViewCollection的时候,为什么子节点不需要渲染呢?

这里我们之前分析的时候其实已经理解过,欢迎大家讨论学习。

 

 

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

X

欢迎加群学习交流

联系我们