CKEditor5——Position源码分析(三)

上一节我们学习了比较两个Position之间的关系，它们可能属于不同的根节点，它们可能完全相同，它们也可能存在前后关系。

今天我们继续学习这个类的另一个关键方法：那就是

getTransformedByOperation( operation ) → Position

getTransformedByOperation( operation ) {
	let result;

	switch ( operation.type ) {
		case 'insert':
			result = this._getTransformedByInsertOperation( operation );
			break;
		case 'move':
		case 'remove':
		case 'reinsert':
			result = this._getTransformedByMoveOperation( operation );
			break;
		case 'split':
			result = this._getTransformedBySplitOperation( operation );
			break;
		case 'merge':
			result = this._getTransformedByMergeOperation( operation );
			break;
		default:
			result = Position._createAt( this );
			break;
	}
	return result;
}

首先说明一下这个方法：

返回由给定操作转换的此位置的副本。新位置的参数会根据操作的效果进行相应更新。例如，如果在位置之前插入n个节点，则返回的位置偏移量将增加n。如果该位置在合并元素中，它将相应地移动到新元素等。这种方法可以安全地用于不存在的位置（例如在操作转换期间）。

从以上说明，我们可以看出，这个方法是当前位置应用一个给定的操作后返回一个新的位置，具体的操作有六类：insert,move,remove,reinsert,split,merge，而move,remove,reinsert又是同一种情况，我们先看看insert的情况:this._getTransformedByInsertOperation( operation );

_getTransformedByInsertOperation( operation ) {
	return this._getTransformedByInsertion( operation.position, operation.howMany );
}

_getTransformedByInsertion( insertPosition, howMany ) {
	const transformed = Position._createAt( this );

	// This position can't be affected if insertion was in a different root.
	if ( this.root != insertPosition.root ) {
		return transformed;
	}

	if ( compareArrays( insertPosition.getParentPath(), this.getParentPath() ) == 'same' ) {
		// If nodes are inserted in the node that is pointed by this position...
		if ( insertPosition.offset < this.offset || ( insertPosition.offset == this.offset && this.stickiness != 'toPrevious' ) ) {
			// And are inserted before an offset of that position...
			// "Push" this positions offset.
			transformed.offset += howMany;
		}
	} else if ( compareArrays( insertPosition.getParentPath(), this.getParentPath() ) == 'prefix' ) {
		// If nodes are inserted in a node that is on a path to this position...
		const i = insertPosition.path.length - 1;

		if ( insertPosition.offset <= this.path[ i ] ) {
			// And are inserted before next node of that path...
			// "Push" the index on that path.
			transformed.path[ i ] += howMany;
		}
	}

	return transformed;
}

我们看到insert的情况实际上分为三类，

1、如果当前位置的根节点与操作对应的位置的根节点不一致，那么直接返回当前位置，实际上可能啥都没有做，因为操作对应的位置没有啥效果

2、如果当前位置的parentPath与插入操作的位置的parentPath一致，那么这里分两种情况：

//第一种情况
// should increment offset if insertion is in the same parent and the same offset
const position = new Position( root, [ 1, 2, 3 ] );
position.stickiness = 'toNext';
const transformed = position._getTransformedByInsertion( new Position( root, [ 1, 2, 3 ] ), 2 );

expect( transformed.offset ).to.equal( 5 );
//第二种情况
//should increment offset if insertion is in the same parent and closer offset
const position = new Position( root, [ 1, 2, 3 ] );
const transformed = position._getTransformedByInsertion( new Position( root, [ 1, 2, 2 ] ), 2 );
expect( transformed.offset ).to.equal( 5 );

3、如果插入位置的parentPath在当前位置的parentPath之前，那么这种情况如下：

//should update path if insertion position parent is a node from that path and offset is before next node on that path
const position = new Position( root, [ 1, 2, 3 ] );
const transformed = position._getTransformedByInsertion( new Position( root, [ 1, 2 ] ), 2 );

expect( transformed.path ).to.deep.equal( [ 1, 4, 3 ] );

另外的其他情况的话，返回的位置都不会发生变化，因此，以上就是插入操作的情况下，可能发生新位置偏移的情况。另外move的情况比较复杂，我们以后分析。

CKEditor5——Position源码分析(二)

上一节，我们学习了Position的基础知识，包括怎么寻找它的parent属性，它的path是什么意思？

今天我们看另一个方法，两个Position之间的关系是什么，也就是这个方法：

compareWith( otherPosition ) → PositionRelation

compareWith( otherPosition ) {
	if ( this.root != otherPosition.root ) {
		return 'different';
	}

	const result = compareArrays( this.path, otherPosition.path );

	switch ( result ) {
		case 'same':
			return 'same';

		case 'prefix':
			return 'before';

		case 'extension':
			return 'after';

		default:
			return this.path[ result ] < otherPosition.path[ result ] ? 'before' : 'after';
	}
}

从以上的代码可以看出，如果两个Position的根节点不一样，它们一定是不同的。它们之间关系的比较是通过一个工具方法：compareArrays( this.path, otherPosition.path );

下面我们看看这个方法：

export default function compareArrays( a, b ) {
	const minLen = Math.min( a.length, b.length );

	for ( let i = 0; i < minLen; i++ ) {
		if ( a[ i ] != b[ i ] ) {
			// The arrays are different.
			return i;
		}
	}

	// Both arrays were same at all points.
	if ( a.length == b.length ) {
		// If their length is also same, they are the same.
		return 'same';
	} else if ( a.length < b.length ) {
		// Compared array is shorter so it is a prefix of the other array.
		return 'prefix';
	} else {
		// Compared array is longer so it is an extension of the other array.
		return 'extension';
	}
}

首先获取两个数组长度最短的值minLen，然后比较前minLen个值，如果不相同的话没救返回不相同的位置的索引；如果前minLen个值都相同，如果a的长度比b的长度小，那么返回prefix；如果a的长度大于b的长度，那么返回extension；否则长度相同，值也相同，则返回same；

有了这个工具方法，我们可以知道，两个Position的关系可能有四种same，before，after，different

如果他们的path数组的值是一样的，那么这两个Position的关系是same；

如果当前Position的path在otherPosition的path之前,那么认为当前Position在otherPosition之前，否则就是之后。

这里的一个默认值是比较它们path的第一个不相等的值对应的大小，小的在前面，大的在后面。

有了以上的比较两个Position关系的方法，我们可以看看其他的几个方法，比如：

isAfter( otherPosition ) → Boolean

isBefore( otherPosition ) → Boolean

isEqual( otherPosition ) → Boolean

isTouching( otherPosition ) → Boolean

都是调用我们以上分析的方法来实现的，这里我们重点看看最后一个：

isTouching( otherPosition ) {
	let left = null;
	let right = null;
	const compare = this.compareWith( otherPosition );

	switch ( compare ) {
		case 'same':
			return true;

		case 'before':
			left = Position._createAt( this );
			right = Position._createAt( otherPosition );
			break;

		case 'after':
			left = Position._createAt( otherPosition );
			right = Position._createAt( this );
			break;

		default:
			return false;
	}

	// Cached for optimization purposes.
	let leftParent = left.parent;

	while ( left.path.length + right.path.length ) {
		if ( left.isEqual( right ) ) {
			return true;
		}

		if ( left.path.length > right.path.length ) {
			if ( left.offset !== leftParent.maxOffset ) {
				return false;
			}

			left.path = left.path.slice( 0, -1 );
			leftParent = leftParent.parent;
			left.offset++;
		} else {
			if ( right.offset !== 0 ) {
				return false;
			}

			right.path = right.path.slice( 0, -1 );
		}
	}
}

这里我们先看看什么是touching：检查此位置是否接触给定位置。当它们之间的范围内没有文本节点或空节点时，位置接触。从技术上讲，这些位置并不相同，但在许多情况下，它们非常相似甚至无法区分。

这里我们思考一下，两个Position接触的情况有哪些：

1、两个Position一模一样。

2、第一个Position在前面，第二个Position在后面，但是它们之间没有空隙

3、第一个Position在后面，第二个Position在前面，它们之间也没有空隙。

以上的方法实现就是针对的这三种情况，感兴趣的可以去仔细分析一下。

CKEditor5——Position源码分析

前面我们介绍过CK5模型中的一个关键类，那就是Position的使用，今天我们来看看它的源码，梳理一下方便以后理解：

export default class Position {
	/**
	 * Creates a position.
	 *
	 * @param {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment} root Root of the position.
	 * @param {Array.<Number>} path Position path. See {@link module:engine/model/position~Position#path}.
	 * @param {module:engine/model/position~PositionStickiness} [stickiness='toNone'] Position stickiness.
	 * See {@link module:engine/model/position~PositionStickiness}.
	 */
	constructor( root, path, stickiness = 'toNone' ) {
		if ( !root.is( 'element' ) && !root.is( 'documentFragment' ) ) {
			/**
			 * Position root is invalid.
			 *
			 * Positions can only be anchored in elements or document fragments.
			 *
			 * @error model-position-root-invalid
			 */
			throw new CKEditorError(
				'model-position-root-invalid',
				root
			);
		}

		if ( !( path instanceof Array ) || path.length === 0 ) {
			/**
			 * Position path must be an array with at least one item.
			 *
			 * @error model-position-path-incorrect-format
			 * @param path
			 */
			throw new CKEditorError(
				'model-position-path-incorrect-format',
				root,
				{ path }
			);
		}

		// Normalize the root and path when element (not root) is passed.
		if ( root.is( 'rootElement' ) ) {
			path = path.slice();
		} else {
			path = [ ...root.getPath(), ...path ];
			root = root.root;
		}

		/**
		 * Root of the position path.
		 *
		 * @readonly
		 * @member {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment}
		 * module:engine/model/position~Position#root
		 */
		this.root = root;

		/**
		 * Position of the node in the tree. **Path contains offsets, not indexes.**
		 *
		 * Position can be placed before, after or in a {@link module:engine/model/node~Node node} if that node has
		 * {@link module:engine/model/node~Node#offsetSize} greater than `1`. Items in position path are
		 * {@link module:engine/model/node~Node#startOffset starting offsets} of position ancestors, starting from direct root children,
		 * down to the position offset in it's parent.
		 *
		 *		 ROOT
		 *		  |- P            before: [ 0 ]         after: [ 1 ]
		 *		  |- UL           before: [ 1 ]         after: [ 2 ]
		 *		     |- LI        before: [ 1, 0 ]      after: [ 1, 1 ]
		 *		     |  |- foo    before: [ 1, 0, 0 ]   after: [ 1, 0, 3 ]
		 *		     |- LI        before: [ 1, 1 ]      after: [ 1, 2 ]
		 *		        |- bar    before: [ 1, 1, 0 ]   after: [ 1, 1, 3 ]
		 *
		 * `foo` and `bar` are representing {@link module:engine/model/text~Text text nodes}. Since text nodes has offset size
		 * greater than `1` you can place position offset between their start and end:
		 *
		 *		 ROOT
		 *		  |- P
		 *		  |- UL
		 *		     |- LI
		 *		     |  |- f^o|o  ^ has path: [ 1, 0, 1 ]   | has path: [ 1, 0, 2 ]
		 *		     |- LI
		 *		        |- b^a|r  ^ has path: [ 1, 1, 1 ]   | has path: [ 1, 1, 2 ]
		 *
		 * @readonly
		 * @member {Array.<Number>} module:engine/model/position~Position#path
		 */
		this.path = path;

		/**
		 * Position stickiness. See {@link module:engine/model/position~PositionStickiness}.
		 *
		 * @member {module:engine/model/position~PositionStickiness} module:engine/model/position~Position#stickiness
		 */
		this.stickiness = stickiness;
	}
 }

首先，我们分析构造函数，有三个关键的参数，那就是root,path，以及stickness。

首先会检查当前的position的root属性如果不是Element类型或者DocumentFragment类型，那么直接会抛出错误，其次path必须是一个数组，且长度必须大于0。

这里有一个逻辑就是如果传递的root参数不是根节点，那么需要处理归一化root和path,当root是根节点的时候，path就直接复制，如果不是根节点，那么需要将根节点的path补上合并为新的数组。

最后就是将关键的三个属性赋值保存。

这里我们需要理解的path属性，它其实是从根节点到当前位置之间所有节点在父节点中的索引，然后将这些索引构成一个数组。这一点我们只需要看对代码属性的注释就不难分析出来。

我们知道Position还有一个关键的属性offset偏移量：

get offset() {
	return this.path[ this.path.length - 1 ];
}

set offset( newOffset ) {
	this.path[ this.path.length - 1 ] = newOffset;
}

在这里，偏移量就是数组path的最后一个值。这样的话，我们就将偏移量与path建立了关系。

Position还有一个parent属性：

get parent() {
	let parent = this.root;

	for ( let i = 0; i < this.path.length - 1; i++ ) {
		parent = parent.getChild( parent.offsetToIndex( this.path[ i ] ) );

		if ( !parent ) {
			/**
			 * The position's path is incorrect. This means that a position does not point to
			 * a correct place in the tree and hence, some of its methods and getters cannot work correctly.
			 *
			 * **Note**: Unlike DOM and view positions, in the model, the
			 * {@link module:engine/model/position~Position#parent position's parent} is always an element or a document fragment.
			 * The last offset in the {@link module:engine/model/position~Position#path position's path} is the point in this element
			 * where this position points.
			 *
			 * Read more about model positions and offsets in
			 * the {@glink framework/guides/architecture/editing-engine#indexes-and-offsets Editing engine architecture guide}.
			 *
			 * @error model-position-path-incorrect
			 * @param {module:engine/model/position~Position} position The incorrect position.
			 */
			throw new CKEditorError( 'model-position-path-incorrect', this, { position: this } );
		}
	}

	if ( parent.is( '$text' ) ) {
		throw new CKEditorError( 'model-position-path-incorrect', this, { position: this } );
	}

	return parent;
}

我们知道path存在的是当前位置的到根节点的所有节点的offset值，而获取当前位置的parent属性，本质上就是从根节点一直根据索引找下去，然后就可以找到当前位置的parent属性，这里在查找的时候用到了我们前几节讲述的Element的偏移量到索引值，根据索引值找节点的方法，一直找下去，如果存在，且不是Text节点，那么就返回找到的值，否则直接抛出错误。

同时Position类还有一个index属性

get index() {
	return this.parent.offsetToIndex( this.offset );
}

从代码可以看出，其实就是调用父节点的一些方法来实现。因此，只要我们理解了如何寻找父节点，那么这些其他方法也可以循序渐进的推导出来的。好了，大概的理解就是这些，后续遇到问题再具体分析，这一节的功能都是在Node那一部分为基础的，如果不理解的话，可以查看那一部分。

欢迎讨论。

上一节我们理解了基本的CK5的模型基本信息，今天我们来学习一些模型的API。

节点说明

首先，需要理解的就是模型的节点。在这一点上，CK5的模型节点和dom的节点有点类似，也有一些不同。我会在文章中一一介绍。

节点是模型树的基本结构。它是模型中不同节点类型的一种抽象。

这里需要指出的一点是：如果一个节点从模型树中分离出来，你可以使用它的 API 来操作它。但是，非常重要的是，已经附加到模型树的节点只能通过 Writer API 进行更改。

如果您修改文档根目录中的节点，使用节点方法（如 _insertChild 或 _setAttribute）完成的更改不会记录到文档的历史操作中，这可能对某些功能造成困扰。

节点属性说明

我们来看看节点有哪些基本属性：

1、index,节点索引

就是这个节点在父元素中的索引。举个例子

<heading>
	<paragraph><$text>abc</$text></paragraph> 	//paragraph-1
	<paragraph><$text>def</$text></paragraph>	//paragraph-2
	<paragraph></paragraph>					    //paragraph-3
</heading>

在上面的模型中，我们在 <heading>中定义了两个paragraph节点paragraph-1和paragraph-2 在这种情况下paragraph-1的index值就是0而paragraph-2的index值就是1。还有一点需要注意就是index是相对于父元素，因此我们知道节点应该有另一个属性parent。

2、parent,节点父元素

节点的父元素不难理解哈，需要注意的是节点的父元素有两种类型Element | DocumentFragment。

3、root，根元素

节点的根元素就是节点最顶层的祖先元素，如果节点没有在文档树结构上是，此时的root就是一个DocumentFragment

4、previousSibling，节点的前一个元素

这个属性用于快速访问节点的前一个兄弟元素

5、nextSubling，节点的后一个元素

这个属性用于快速访问节点的后一个兄弟元素

6、offsetSize，节点所占据的偏移大小。

这个属性需要仔细说说，还是用上面的例子举例，paragraph-3是元素节点类型，它里面没有文本元素，那么它的offsetSize就是1，也就是占据一个偏移大小，而paragraph-2中的文本节点<$text>def</$text>它就要占据3个偏移大小。

而paragraph-2的offsetSize就是它的子元素的offsetSize之和。这里有没有问题？欢迎大家讨论？

7、startOffset，节点的起始偏移值

这个值用于指示节点的开始位置相对于父元素的偏移，它等于它之前所有兄弟的 offsetSize 的总和。

8、endOffset，节点的结束偏移值

这个值用于指示节点的结束位置相对于父元素的偏移，它等于该节点的起始偏移量和节点偏移量大小之和。

为了说明上面的问题，我新建了一个模型如上图所示，我们看看第一个paragraph的startOffset,endOffset以及offsetSize

可以看到对于元素节点类型，它的startOffset和endOffset的值是0和1，而它有一个maxOffset值来记录它的子元素占据的offsetSize。

对于文本节点类型，它的startOffset和endOffset的值是0和4，offsetSize是4,它有一个path，实际上就是节点的起始位置，有了这个位置，我们可以结合其他API来进行相应的创建位置，创建范围，创建选择区等等。这个我们以后再讨论。

节点方法说明

节点有很多判断属性和获取属性的方法，比较简单，我们就不详细说明啦。我们只看看几个比较重要且关键的方法。

1、getAncestors() ,返回祖先元素

这个方法用于返回节点的祖先元素数组

2、getCommonAncestor(node) ,返回共同祖先元素

这个方法用于返回参数节点和调用节点共同祖先元素。

3、getPath() ,获取节点的路径

这是一个最重要的方法，它返回节点的路径。路径是一个数组，其中包含此节点的连续祖先的起始偏移量，从根开始，一直到此节点的起始偏移量。该路径可用于创建 Position 实例。

为了说明问题，我还是举一个例子

const abc = new Text( 'abc' );
const foo = new Text( 'foo' );
const h1 = new Element( 'h1', null, new Text( 'header' ) );
const p = new Element( 'p', null, [ abc, foo ] );
const div = new Element( 'div', null, [ h1, p ] );
//generate dom
<div>
	<h1>header</h1>
	<p>abcfoo</p>
</div>
foo.getPath(); // Returns [ 1, 3 ]. `foo` is in `p` which is in `div`. `p` starts at offset 1, while `foo` at 3.
h1.getPath(); // Returns [ 0 ].
div.getPath(); // Returns [].

通过上面的例子，我想大家应该很容易理解这个方法了吧

4、is( type ) → Boolean

检查节点是否是指定类型。此方法在处理未知类型的模型对象时很有用。例如，一个函数可能返回一个 DocumentFragment 或一个可以是文本节点或元素的节点。此方法可用于检查返回的对象类型。还需要注意的是

这个方法会被它的很多子类覆盖重写。

总结

今天我们对模型的节点这个类的属性和方法进行了基本的分析和介绍，特别是几个重点属性和方法，如果掌握清楚啦，对未来的CK学习将会有很大的帮助作用。欢迎各位留言讨论。

CKEditor5——Node,Element,NodeList源码分析

前面大概知道了模型的基本组成，包括一个抽象类Node,两个实现类Text和Element，以及还有一个关键的类就是NodeList。

为了容易展开这个话题，我首先提出一个问题，那就是为什么是Node类是一个抽象类？先看看这个类的具体代码：

export default class Node {
	/**
	 * Creates a model node.
	 *
	 * This is an abstract class, so this constructor should not be used directly.
	 *
	 * @abstract
	 * @param {Object} [attrs] Node's attributes. See {@link module:utils/tomap~toMap} for a list of accepted values.
	 */
	constructor( attrs ) {
		/**
		 * Parent of this node. It could be {@link module:engine/model/element~Element}
		 * or {@link module:engine/model/documentfragment~DocumentFragment}.
		 * Equals to `null` if the node has no parent.
		 *
		 * @readonly
		 * @member {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment|null}
		 */
		this.parent = null;

		/**
		 * Attributes set on this node.
		 *
		 * @private
		 * @member {Map} module:engine/model/node~Node#_attrs
		 */
		this._attrs = toMap( attrs );
	}
}

我们看这个类，首先，这个类应该能够存储属性，因此它有一个Map属性叫做this._attrs，此外还有一个属性叫做this.parent，因此有了这个属性之后，就可以用Node节点构成一个类似树形结构。

有了这个基础知识以后，看看一个具体的方法：

get index() {
	let pos;

	if ( !this.parent ) {
		return null;
	}

	if ( ( pos = this.parent.getChildIndex( this ) ) === null ) {
		throw new CKEditorError( 'model-node-not-found-in-parent', this );
	}

	return pos;
}

注意到没有，这个类的所有实现都是代理到了它的父节点的方法，在this.parent这个属性的类型有三类：Element,DocumentFragment,null,因此，可以大胆猜想，除了null之外，其他的类一定要实现具体方法。

用获取某个节点的索引来举例，实现的逻辑就是，判断当前节点在父节点中的索引位置就是具体的索引值。因此，我们可以看看Element.getChildIndex()这个方法：

Element类

export default class Element extends Node {
	/**
	 * Creates a model element.
	 *
	 * **Note:** Constructor of this class shouldn't be used directly in the code.
	 * Use the {@link module:engine/model/writer~Writer#createElement} method instead.
	 *
	 * @protected
	 * @param {String} name Element's name.
	 * @param {Object} [attrs] Element's attributes. See {@link module:utils/tomap~toMap} for a list of accepted values.
	 * @param {module:engine/model/node~Node|Iterable.<module:engine/model/node~Node>} [children]
	 * One or more nodes to be inserted as children of created element.
	 */
	constructor( name, attrs, children ) {
		super( attrs );

		/**
		 * Element name.
		 *
		 * @readonly
		 * @member {String} module:engine/model/element~Element#name
		 */
		this.name = name;

		/**
		 * List of children nodes.
		 *
		 * @private
		 * @member {module:engine/model/nodelist~NodeList} module:engine/model/element~Element#_children
		 */
		this._children = new NodeList();

		if ( children ) {
			this._insertChild( 0, children );
		}
	}
}

从Element类可以看出，这个类除了能保存属性值之外，还有两个属性就是名称和子节点，而子节点的实现就是NodeList。

我们继续看getChildIndex()

getChildIndex( node ) {
	return this._children.getNodeIndex( node );
}

这个方法的具体实现其实是代理给了NodeList这个类。

export default class NodeList {
	/**
	 * Creates an empty node list.
	 *
	 * @protected
	 * @param {Iterable.<module:engine/model/node~Node>} nodes Nodes contained in this node list.
	 */
	constructor( nodes ) {
		/**
		 * Nodes contained in this node list.
		 *
		 * @private
		 * @member {Array.<module:engine/model/node~Node>}
		 */
		this._nodes = [];

		if ( nodes ) {
			this._insertNodes( 0, nodes );
		}
	}
}

而NodeList类其实就是Node数组的一个封装。

getNodeIndex()

getNodeIndex( node ) {
	const index = this._nodes.indexOf( node );
	return index == -1 ? null : index;
}

这下逻辑很清晰了吧，获取某个节点在数组中的位置，然后判断，如果不存在的话，返回null，否则返回具体的索引。知道理清楚了Node，NodeList，Element之间的关系，就能明白每一个方法是怎样实现的。

好了，剩余的其它方法都可以按照上面的逻辑来进行梳理和分析。

我们再看看一个属性叫做offsetSize，这个属性表示当前节点占据的偏移量值的大小，普通节点的值是1，而文本节点的大小就是文本的长度。

Text

get offsetSize() {
	return this.data.length;
}

Node

get offsetSize() {
	return 1;
}

另一个属性就是maxOffset

这个属性是只有Element，其实表示的就是当前节点占据的偏移量的大小。

get maxOffset() {
	return this._children.maxOffset;
}

NodeList

get maxOffset() {
	return this._nodes.reduce( ( sum, node ) => sum + node.offsetSize, 0 );
}

这里的逻辑就是将子节点的offsetSize相加即可。注意一点的是，这里的偏移量一定是相对于父节点的。

'insertContent', 'deleteContent', 'modifySelection''insertContent', 'deleteContent', 'modifySelection', 'getSelectedContent', 'applyOperation'今天我们来深入学习一下CK5的模型。

我们先看看model.js的源码：

export default class Model {
	constructor() {
		
		this.markers = new MarkerCollection();


		this.document = new Document( this );


		this.schema = new Schema();

		this._pendingChanges = [];

		this._currentWriter = null;

		[ 'insertContent', 'deleteContent', 'modifySelection', 'getSelectedContent', 'applyOperation' ]
			.forEach( methodName => this.decorate( methodName ) );

		this.on( 'applyOperation', ( evt, args ) => {
			const operation = args[ 0 ];

			operation._validate();
		}, { priority: 'highest' } );

		// Register some default abstract entities.
		this.schema.register( '$root', {
			isLimit: true
		} );

		this.schema.register( '$block', {
			allowIn: '$root',
			isBlock: true
		} );

		this.schema.register( '$text', {
			allowIn: '$block',
			isInline: true,
			isContent: true
		} );

		this.schema.register( '$clipboardHolder', {
			allowContentOf: '$root',
			allowChildren: '$text',
			isLimit: true
		} );

		this.schema.register( '$documentFragment', {
			allowContentOf: '$root',
			allowChildren: '$text',
			isLimit: true
		} );

		this.schema.register( '$marker' );
		this.schema.addChildCheck( ( context, childDefinition ) => {
			if ( childDefinition.name === '$marker' ) {
				return true;
			}
		} );

		injectSelectionPostFixer( this );


		this.document.registerPostFixer( autoParagraphEmptyRoots );

	}
}

从上面的源码，我们可以看出。模型部分包含的功能比较多，主要的有一下几点：

1、一个存储marker的集合

2、一个模型文档属性。比如<root><paragraph></paragraph></root>。主要是ck的模型数据

3、一个存储schema的属性，并且定义一些基本元素，比如$root，$block，$text，$clipboardHolder，$documentFragment，$marker

4、一个存储模型变化操作的回调函数。

5、一个用于操作修改模型的writer

6、装饰一些可以在外部监听的方法：比如'insertContent', 'deleteContent', 'modifySelection', 'getSelectedContent', 'applyOperation'等

7、注册了一个模型后处理器。

8、绑定了一个监听applyOperation事件的监听函数，用于验证操作的合法性。

在这里，我们重点分析一下：model.change(callback)这个方法：

change( callback ) {
	try {
		if ( this._pendingChanges.length === 0 ) {
	
			this._pendingChanges.push( { batch: new Batch(), callback } );
			return this._runPendingChanges()[ 0 ];
		} else {
	
			return callback( this._currentWriter );
		}
	} catch ( err ) {
		CKEditorError.rethrowUnexpectedError( err, this );
	}
}

_runPendingChanges() {
	const ret = [];

	this.fire( '_beforeChanges' );

	while ( this._pendingChanges.length ) {

		const currentBatch = this._pendingChanges[ 0 ].batch;
		this._currentWriter = new Writer( this, currentBatch );
		//当有嵌套调用的时候，这里实际上会形成一个递归调用
		const callbackReturnValue = this._pendingChanges[ 0 ].callback( this._currentWriter );
		ret.push( callbackReturnValue );

		this.document._handleChangeBlock( this._currentWriter );

		this._pendingChanges.shift();
		this._currentWriter = null;
	}

	this.fire( '_afterChanges' );

	return ret;
}
//举个例子
model.change( writer => {
	 writer.insertText( 'foo', paragraph, 'end' ); // foo.
	 
	 model.change( writer => {
	 	writer.insertText( 'bar', paragraph, 'end' ); // foobar.
	 } );
	 
	  writer.insertText( 'bom', paragraph, 'end' ); // foobarbom.
} );

可以看到：在例子中，外层调用的时候,this._pendingChanges为空，这个时候会执行

this._pendingChanges.push( { batch: new Batch(), callback } );
return this._runPendingChanges()[ 0 ];

这时，会创建一个叫做Batch的对象，同时运行一个叫做_runPendingChanges()的函数。

这个函数的逻辑就是创建一个模型writer来处理模型文档块改变的业务逻辑。同时还触发了两个事件_beforeChanges和_afterChanges，注意，这个writer的batch属性是最外层调用时候创建的，因此内层的函数调用时候使用的这个writer将共享这个Batch，因此，外层和内层实际上是用一个Batch。当调用结束以后，这个this._pendingChanges会被移除掉。

我们再看看另一个方法：enqueueChange([ batchOrType ], callback)

enqueueChange( batchOrType, callback ) {
	try {
		if ( typeof batchOrType === 'string' ) {
			batchOrType = new Batch( batchOrType );
		} else if ( typeof batchOrType == 'function' ) {
			callback = batchOrType;
			batchOrType = new Batch();
		}

		this._pendingChanges.push( { batch: batchOrType, callback } );

		if ( this._pendingChanges.length == 1 ) {
			this._runPendingChanges();
		}
	} catch ( err ) {
		// @if CK_DEBUG // throw err;
		/* istanbul ignore next */
		CKEditorError.rethrowUnexpectedError( err, this );
	}
}

可以看到，这个方法多了一个参数就是batchOrType，这个参数可能是string，或者Batch类型，当属于没有参数，或者参数类型为string时，我用下面的例子说明

model.change( writer => {
	console.log( 1 );

	model.enqueueChange( writer => {
		console.log( 2 );
	} );

	console.log( 3 );
} ); // Will log: 1, 3, 2.

从上面的代码可以看出，只有在this._pendingChanges == 1时，才会执行enqueueChanges()的回调函数，实际上上面的逻辑就是最后一个执行，所以以上代码会最后打印出2。

当这个参数是从最外层的调用而来的时候，此时这个回调函数将共享这个batch，实际上就是起到了自己将定义的操作放到某个Batch的作用。

好了，今天分享了模型的相关属性和修改模型的方法原理，欢迎分享讨论。

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的时候，为什么子节点不需要渲染呢？

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

CKEditor5——Template理解(二)

在上一节我们分析了类Template的构造函数，今天我们继续学习其他的方法：

我们先看看render()方法

render() {
	const node = this._renderNode( {
		intoFragment: true
	} );

	this._isRendered = true;

	return node;
}
// const domNode = new Template( { ... } ).render(); 然后将此节点添加到某个dom，然后
// 就可以操作此dom节点啦。

这个方法的主要作用就是渲染出来一个dom节点，然后设置当前的模板this._isRendered = true，并且返回当前节点。为了理解这个方法，我们需要理解this._renderNode(data)

_renderNode( data ) {
	let isInvalid;

	if ( data.node ) {
		// When applying, a definition cannot have "tag" and "text" at the same time.
		isInvalid = this.tag && this.text;
	} else {
		// When rendering, a definition must have either "tag" or "text": XOR( this.tag, this.text ).
		isInvalid = this.tag ? this.text : !this.text;
	}

	if ( isInvalid ) {
		/**
		 * Node definition cannot have the "tag" and "text" properties at the same time.
		 * Node definition must have either "tag" or "text" when rendering a new Node.
		 *
		 * @error ui-template-wrong-syntax
		 */
		throw new CKEditorError(
			'ui-template-wrong-syntax',
			this
		);
	}

	if ( this.text ) {
		return this._renderText( data );
	} else {
		return this._renderElement( data );
	}
}

从这个方法，我们可以看出，首先会判断节点的数据是否合法，这里有一个逻辑就是tag和text属性不能同时存在，如果同时存在就认为是不合法的，并且还有一点需要注意的是：这个方法会被render(data)和apply(data)调用，它们的判断逻辑是不一样的。剩下的逻辑就是如果当前的节点是text，那么就调用this._renderText( data )，否则调用this._renderElement( data )。

下面我们看看this._renderText( data )

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

	// Save the original textContent to revert it in #revert().
	if ( node ) {
		data.revertData.text = node.textContent;
	} else {
		node = data.node = document.createTextNode( '' );
	}

	// Check if this Text Node is bound to Observable. Cases:
	//
	//		text: [ Template.bind( ... ).to( ... ) ]
	//
	//		text: [
	//			'foo',
	//			Template.bind( ... ).to( ... ),
	//			...
	//		]
	//
	if ( hasTemplateBinding( this.text ) ) {
		this._bindToObservable( {
			schema: this.text,
			updater: getTextUpdater( node ),
			data
		} );
	}
	// Simply set text. Cases:
	//
	//		text: [ 'all', 'are', 'static' ]
	//
	//		text: [ 'foo' ]
	//
	else {
		node.textContent = this.text.join( '' );
	}

	return node;
}

我们看这个方法，可以知道，首先会将文本节点的数据存在在一个叫做data.revertData.text，这个属性revertData属性的作用我们暂时不用理解，后面介绍apply和revert方法的时候才来学习这个属性。如果node不存在就创建一个文本节点，并且将文本属性这是到node.textContent。这里还有一个逻辑就是检查当前的文本节点是否绑定了Observable，如果有这样的绑定，那么需要执行对文本节点的绑定添加事件，this._bindToObservable( { schema: this.text, updater: getTextUpdater( node ), data } );

我们再看看以上的这个方法，不过呢？我们先看看hasTemplateBinding( )这个方法

function hasTemplateBinding( schema ) {
	if ( !schema ) {
		return false;
	}

	// Normalize attributes with additional data like namespace:
	//
	//		class: {
	//			ns: 'abc',
	//			value: [ ... ]
	//		}
	//
	if ( schema.value ) {
		schema = schema.value;
	}

	if ( Array.isArray( schema ) ) {
		return schema.some( hasTemplateBinding );
	} else if ( schema instanceof TemplateBinding ) {
		return true;
	}

	return false;
}

这里的逻辑比较简单，我拿this.text来举例哈，如果此属性包含类似：

text: [
	//			'foo',
	//			Template.bind( ... ).to( ... ),
	//			...
	//		
]

比如，以上就是一个包含TemplateBinding的数组，因此这样的情况就需要处理绑定方法：

_bindToObservable( { schema, updater, data } ) {
	const revertData = data.revertData;

	// Set initial values.
	syncValueSchemaValue( schema, updater, data );

	const revertBindings = schema
		// Filter "falsy" (false, undefined, null, '') value schema components out.
		.filter( item => !isFalsy( item ) )
		// Filter inactive bindings from schema, like static strings ('foo'), numbers (42), etc.
		.filter( item => item.observable )
		// Once only the actual binding are left, let the emitter listen to observable change:attribute event.
		// TODO: Reduce the number of listeners attached as many bindings may listen
		// to the same observable attribute.
		.map( templateBinding => templateBinding.activateAttributeListener( schema, updater, data ) );

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

这个方法看着比较复杂，但是我们分三步来看：

1、首先拿出revertData属性，然后将此属性的bindings添加一个revertBindings，这个是个啥呢,我告诉你，这个实际上就是一个数组，并且数组中包含的值是函数。

2、其次就是syncValueSchemaValue这个方法，作用就是初始化一些值，

3、最后就是对参数的schema进行处理，首先过滤掉一些为false的对象，然后再筛选出包含observable的schema，最后就是剩下的templateBinding执行添加属性监听器。

我们先看看syncValueSchemaValue这个函数

function syncValueSchemaValue( schema, updater, { node } ) {
	let value = getValueSchemaValue( schema, node );

	// Check if schema is a single Template.bind.if, like:
	//
	//		class: Template.bind.if( 'foo' )
	//
	if ( schema.length == 1 && schema[ 0 ] instanceof TemplateIfBinding ) {
		value = value[ 0 ];
	} else {
		value = value.reduce( arrayValueReducer, '' );
	}

	if ( isFalsy( value ) ) {
		updater.remove();
	} else {
		updater.set( value );
	}
}
function getValueSchemaValue( schema, node ) {
	return schema.map( schemaItem => {
		// Process {@link module:ui/template~TemplateBinding} bindings.
		if ( schemaItem instanceof TemplateBinding ) {
			return schemaItem.getValue( node );
		}

		// All static values like strings, numbers, and "falsy" values (false, null, undefined, '', etc.) just pass.
		return schemaItem;
	} );
}
function getTextUpdater( node ) {
	return {
		set( value ) {
			node.textContent = value;
		},

		remove() {
			node.textContent = '';
		}
	};
}

我们需要理解这个参数updater这个有函数getTextUpdater知道这个实际上是一个对象，包含两个方法，设置值和移除值，就是对当前的文本节点设置值和将当前节点的值设置为空字符串。我们根据逻辑知道

getValueSchemaValue这个函数返回的值为false，则将当前节点的文本属性设置为空，否则就将此值修改为新的值。同时我们也知道这个返回值是一个数组，这个数组的值是怎么来的呢？

有getValueSchemaValue的具体实现可以看出，如果schemaItem只是普通文本,那么直接返回，如果是TemplateBinding,那么需要获取新的值，然后对这些值进行处理后设置。设置的时候分为数组长度为1或者数组长度大于1的情况，数组长度为1的时候就直接取第一个值，否则就是将这这些值连起来。

比如：

{
    text: [
		'aaa'
    ]
}
//以上就是数组是一个值的情况
{
    text: [
		'aaa',
		'bbb'
    ]
}
//以上就是数组是多个值的情况

为了理解以上情况，我们需要知道什么是TemplateBinding

export class TemplateBinding {
	/**
	 * Creates an instance of the {@link module:ui/template~TemplateBinding} class.
	 *
	 * @param {module:ui/template~TemplateDefinition} def The definition of the binding.
	 */
	constructor( def ) {
		Object.assign( this, def );

		/**
		 * An observable instance of the binding. It either:
		 *
		 * * provides the attribute with the value,
		 * * or passes the event when a corresponding DOM event is fired.
		 *
		 * @member {module:utils/observablemixin~ObservableMixin} module:ui/template~TemplateBinding#observable
		 */

		/**
		 * An {@link module:utils/emittermixin~Emitter} used by the binding to:
		 *
		 * * listen to the attribute change in the {@link module:ui/template~TemplateBinding#observable},
		 * * or listen to the event in the DOM.
		 *
		 * @member {module:utils/emittermixin~EmitterMixin} module:ui/template~TemplateBinding#emitter
		 */

		/**
		 * The name of the {@link module:ui/template~TemplateBinding#observable observed attribute}.
		 *
		 * @member {String} module:ui/template~TemplateBinding#attribute
		 */

		/**
		 * A custom function to process the value of the {@link module:ui/template~TemplateBinding#attribute}.
		 *
		 * @member {Function} [module:ui/template~TemplateBinding#callback]
		 */
	}

	/**
	 * Returns the value of the binding. It is the value of the {@link module:ui/template~TemplateBinding#attribute} in
	 * {@link module:ui/template~TemplateBinding#observable}. The value may be processed by the
	 * {@link module:ui/template~TemplateBinding#callback}, if such has been passed to the binding.
	 *
	 * @param {Node} [node] A native DOM node, passed to the custom {@link module:ui/template~TemplateBinding#callback}.
	 * @returns {*} The value of {@link module:ui/template~TemplateBinding#attribute} in
	 * {@link module:ui/template~TemplateBinding#observable}.
	 */
	getValue( node ) {
		const value = this.observable[ this.attribute ];

		return this.callback ? this.callback( value, node ) : value;
	}

	/**
	 * Activates the listener which waits for changes of the {@link module:ui/template~TemplateBinding#attribute} in
	 * {@link module:ui/template~TemplateBinding#observable}, then updates the DOM with the aggregated
	 * value of {@link module:ui/template~TemplateValueSchema}.
	 *
	 * @param {module:ui/template~TemplateValueSchema} schema A full schema to generate an attribute or text in the DOM.
	 * @param {Function} updater A DOM updater function used to update the native DOM attribute or text.
	 * @param {module:ui/template~RenderData} data Rendering data.
	 * @returns {Function} A function to sever the listener binding.
	 */
	activateAttributeListener( schema, updater, data ) {
		const callback = () => syncValueSchemaValue( schema, updater, data );

		this.emitter.listenTo( this.observable, 'change:' + this.attribute, callback );

		// Allows revert of the listener.
		return () => {
			this.emitter.stopListening( this.observable, 'change:' + this.attribute, callback );
		};
	}
}

export class TemplateToBinding extends TemplateBinding {
	/**
	 * Activates the listener for the native DOM event, which when fired, is propagated by
	 * the {@link module:ui/template~TemplateBinding#emitter}.
	 *
	 * @param {String} domEvtName The name of the native DOM event.
	 * @param {String} domSelector The selector in the DOM to filter delegated events.
	 * @param {module:ui/template~RenderData} data Rendering data.
	 * @returns {Function} A function to sever the listener binding.
	 */
	activateDomEventListener( domEvtName, domSelector, data ) {
		const callback = ( evt, domEvt ) => {
			if ( !domSelector || domEvt.target.matches( domSelector ) ) {
				if ( typeof this.eventNameOrFunction == 'function' ) {
					this.eventNameOrFunction( domEvt );
				} else {
					this.observable.fire( this.eventNameOrFunction, domEvt );
				}
			}
		};

		this.emitter.listenTo( data.node, domEvtName, callback );

		// Allows revert of the listener.
		return () => {
			this.emitter.stopListening( data.node, domEvtName, callback );
		};
	}
}

export class TemplateIfBinding extends TemplateBinding {
	/**
	 * @inheritDoc
	 */
	getValue( node ) {
		const value = super.getValue( node );

		return isFalsy( value ) ? false : ( this.valueIfTrue || true );
	}

	/**
	 * The value of the DOM attribute or text to be set if the {@link module:ui/template~TemplateBinding#attribute} in
	 * {@link module:ui/template~TemplateBinding#observable} is `true`.
	 *
	 * @member {String} [module:ui/template~TemplateIfBinding#valueIfTrue]
	 */
}

以上是TemplateBinding的实现代码，我们可以看出它有两个关键方法activateAttributeListener和getValue方法，同时这个类有两个继承类，TemplateToBinding对应的实际上就是bind.to()，而TemplateIfBinding对应的就是bind.if()

我们这里需要先看看构造函数：

构造函数里实际上包含多个属性：observable，emitter，attribute，callback，在执行activateAttributeListener的时候，实际上就是监听observable的属性的变化，如果属性有变化，那么这个变化就会同步到dom节点上去。并且返回一个函数，这个函数就是为了取消这种监听。前面我们提到了返回的是一个函数数组，在那里的函数实际上就是这里的返回函数，作用就是revert的时候取消这样的监听。

同时这个类有一个getValue方法，这个方法就是首先获得observable的属性值，如果有回调函数，那么就调用回调函数，否则直接返回属性的值。

{
	text: bind.to( 'b', ( value, node ) => value.toUpperCase() )
}
//这里就是有对调函数的情况，获取的值是通过对调函数来实现的。

好了，今天我们讲解了render()方法中的_renderText()的具体实现，并且简单介绍了绑定是怎么实现的。

另外一个就是_renderElement方法的实现，我打算下一节来继续分析。欢迎讨论。

CKEditor5——Template理解

上一节，我们学习并大致理解了CK5的UI中最重要的一个类，那就是View，可以看出这个类其实有点像一个门面，而很多实际的功能包括render和bind等都是委托给Template这个类来实现的，因此，我们今天来靴子这个类。

export default class Template {
	/**
	 * Creates an instance of the {@link ~Template} class.
	 *
	 * @param {module:ui/template~TemplateDefinition} def The definition of the template.
	 */
	constructor( def ) {
		Object.assign( this, normalize( clone( def ) ) );

		/**
		 * Indicates whether this particular Template instance has been
		 * {@link #render rendered}.
		 *
		 * @readonly
		 * @protected
		 * @member {Boolean}
		 */
		this._isRendered = false;

		/**
		 * The tag (`tagName`) of this template, e.g. `div`. It also indicates that the template
		 * renders to an HTML element.
		 *
		 * @member {String} #tag
		 */

		/**
		 * The text of the template. It also indicates that the template renders to a DOM text node.
		 *
		 * @member {Array.<String|module:ui/template~TemplateValueSchema>} #text
		 */

		/**
		 * The attributes of the template, e.g. `{ id: [ 'ck-id' ] }`, corresponding with
		 * the attributes of an HTML element.
		 *
		 * **Note**: This property only makes sense when {@link #tag} is defined.
		 *
		 * @member {Object} #attributes
		 */

		/**
		 * The children of the template. They can be either:
		 * * independent instances of {@link ~Template} (sub–templates),
		 * * native DOM Nodes.
		 *
		 * **Note**: This property only makes sense when {@link #tag} is defined.
		 *
		 * @member {Array.<module:ui/template~Template|Node>} #children
		 */

		/**
		 * The DOM event listeners of the template.
		 *
		 * @member {Object} #eventListeners
		 */

		/**
		 * The data used by the {@link #revert} method to restore a node to its original state.
		 *
		 * See: {@link #apply}.
		 *
		 * @readonly
		 * @protected
		 * @member {module:ui/template~RenderData}
		 */
		this._revertData = null;
	}
}

我们首先看构造函数，这个函数实际上就是将一些属性复制到当前模板对象，因此，我们看看具体的方法：

我们先看看clone方法

function clone( def ) {
	const clone = cloneDeepWith( def, value => {
		// Don't clone the `Template.bind`* bindings because of the references to Observable
		// and DomEmitterMixin instances inside, which would also be traversed and cloned by greedy
		// cloneDeepWith algorithm. There's no point in cloning Observable/DomEmitterMixins
		// along with the definition.
		//
		// Don't clone Template instances if provided as a child. They're simply #render()ed
		// and nothing should interfere.
		//
		// Also don't clone View instances if provided as a child of the Template. The template
		// instance will be extracted from the View during the normalization and there's no need
		// to clone it.
		if ( value && ( value instanceof TemplateBinding || isTemplate( value ) || isView( value ) || isViewCollection( value ) ) ) {
			return value;
		}
	} );

	return clone;
}

看看这个方法可以知道，并不是所有的属性都需要拷贝，如果遇上Template.bind,View等都直接返回原始的引用，而不用再拷贝一份新的实例。主要有四类属性不用拷贝，至于为什么？大家可以思考一下，我们后文再分析。

拷贝完成之后，我们需要归一化，也就是这个方法：normalize()

function normalize( def ) {
	if ( typeof def == 'string' ) {
		def = normalizePlainTextDefinition( def );
	} else if ( def.text ) {
		normalizeTextDefinition( def );
	}

	if ( def.on ) {
		def.eventListeners = normalizeListeners( def.on );

		// Template mixes EmitterMixin, so delete #on to avoid collision.
		delete def.on;
	}

	if ( !def.text ) {
		if ( def.attributes ) {
			normalizeAttributes( def.attributes );
		}

		const children = [];

		if ( def.children ) {
			if ( isViewCollection( def.children ) ) {
				children.push( def.children );
			} else {
				for ( const child of def.children ) {
					if ( isTemplate( child ) || isView( child ) || isNode( child ) ) {
						children.push( child );
					} else {
						children.push( new Template( child ) );
					}
				}
			}
		}

		def.children = children;
	}

	return def;
}

从这个归一化的方法，可以看出对模板的def处理主要分成几类：

1、如果def是一个字符该怎么处理，实际上就是作为一个文本出行返回

function normalizePlainTextDefinition( def ) {
	return {
		text: [ def ]
	};
}
// "foo" ---> { text: [ 'foo' ] }

2、如果def是一个对象，且存在一个text属性，那么处理方法如下

function normalizeTextDefinition( def ) {
	def.text = toArray( def.text );
}
// children: [
//			{ text: 'def' },
//			{ text: {@link module:ui/template~TemplateBinding} }
//]

// become 
children: [
//			{ text: [ 'def' ] },
//			{ text: [ {@link module:ui/template~TemplateBinding} ] }
//		]

实际上就是将def的text属性的值转化为数组

3、如果def是一个对象，且存在一个on属性，那么处理如下：

// Normalizes "on" section of {@link module:ui/template~TemplateDefinition}.
//
//		on: {
//			a: 'bar',
//			b: {@link module:ui/template~TemplateBinding},
//			c: [ {@link module:ui/template~TemplateBinding}, () => { ... } ]
//		}
//
// becomes
//
//		on: {
//			a: [ 'bar' ],
//			b: [ {@link module:ui/template~TemplateBinding} ],
//			c: [ {@link module:ui/template~TemplateBinding}, () => { ... } ]
//		}
function normalizeListeners( listeners ) {
	for ( const l in listeners ) {
		arrayify( listeners, l );
	}

	return listeners;
}
function arrayify( obj, key ) {
	obj[ key ] = toArray( obj[ key ] );
}

可以看出实际上就是将对象listeners的值转化成数组，同时返回这个对象，并添加到def属性上。

4、如果def.text不存在，那么就是处理def的属性和子节点

// Normalizes "attributes" section of {@link module:ui/template~TemplateDefinition}.
//
//		attributes: {
//			a: 'bar',
//			b: {@link module:ui/template~TemplateBinding},
//			c: {
//				value: 'bar'
//			}
//		}
//
// becomes
//
//		attributes: {
//			a: [ 'bar' ],
//			b: [ {@link module:ui/template~TemplateBinding} ],
//			c: {
//				value: [ 'bar' ]
//			}
//		}
function normalizeAttributes( attributes ) {
	for ( const a in attributes ) {
		if ( attributes[ a ].value ) {
			attributes[ a ].value = toArray( attributes[ a ].value );
		}

		arrayify( attributes, a );
	}
}

这里的处理就是将属性的值转化为数组，处理子节点就是将子节点打开放到一个数组当中。

归一化之后，将这些属性复制到this对象，然后设置一些基本的值之后就算完成构造函数。让复制完成之后，我们知道当然的this对象可能有的属性包括，注意，为什么归一化方法没有处理tag属性？

tag属性，attributes属性，children属性，text属性，eventListeners属性这些属性会成为我们后文分析的重点，一定要掌握这些属性的作用。另外值得一提的是还有一个this._revertData属性，这个属性暂时没有用到，因此可以略过，后文分析方法的时候会介绍。最后一个就是模板是否渲染的boolean属性，用于判断是否已经模板渲染到dom。

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会成为我们分析的重点。我们下一节对这个类进行学习。

欢迎讨论

CKEditor5——UI理解

今天我们开始认识CK5中的UI，首先我们还是认识一些基础类，今天开始认识的第一个类比较简单，那就是

ViewCollection,首先我们看看代码：

export default class ViewCollection extends Collection {
 	constructor( initialItems = [] ) {
		super( initialItems, {
			// An #id Number attribute should be legal and not break the `ViewCollection` instance.
			// https://github.com/ckeditor/ckeditor5-ui/issues/93
			idProperty: 'viewUid'
		} );

		// Handle {@link module:ui/view~View#element} in DOM when a new view is added to the collection.
		this.on( 'add', ( evt, view, index ) => {
			this._renderViewIntoCollectionParent( view, index );
		} );

		// Handle {@link module:ui/view~View#element} in DOM when a view is removed from the collection.
		this.on( 'remove', ( evt, view ) => {
			if ( view.element && this._parentElement ) {
				view.element.remove();
			}
		} );

		/**
		 * A parent element within which child views are rendered and managed in DOM.
		 *
		 * @protected
		 * @member {HTMLElement}
		 */
		this._parentElement = null;
	}
}

我们之前分析过Collection类，我们的ViewCollection类继承自Collection，因此它具有Collection的一切功能，此外就是增添了往集合添加或者删除View元素的时候的逻辑。

首先，我们需要明白的是这个集合是管理View的一个集合，因此这个集合需要有一个所有集合的父元素，可以看见this._parentElement这个属性就是存储集合的父元素，其次，应该不难猜想构造函数initialItems

应该是一个包含View的数组或者可迭代对象。

我们还是重点看看this._renderViewIntoCollectionParent( view, index )

_renderViewIntoCollectionParent( view, index ) {
	if ( !view.isRendered ) {
		view.render();
	}

	if ( view.element && this._parentElement ) {
		this._parentElement.insertBefore( view.element, this._parentElement.children[ index ] );
	}
}

其实这个方法主要就是渲染指定的view元素，并且将此元素添加到父元素中。因此我们可以知道只要往集合中添加元素，它会立即渲染到视图。

我们再来看看另一个代理方法：delegate( ...events )

delegate( ...events ) {
	if ( !events.length || !isStringArray( events ) ) {
		/**
		 * All event names must be strings.
		 *
		 * @error ui-viewcollection-delegate-wrong-events
		 */
		throw new CKEditorError(
			'ui-viewcollection-delegate-wrong-events',
				this
		);
	}

	return {
	  /**
		* Selects destination for {@link module:utils/emittermixin~Emitter#delegate} events.
		*
		* @memberOf module:ui/viewcollection~ViewCollection#delegate
	    * @function module:ui/viewcollection~ViewCollection#delegate.to
	    * @param {module:utils/emittermixin~Emitter} dest An `Emitter` instance which is
		* the destination for delegated events.
		*/
		to: dest => {
			// Activate delegating on existing views in this collection.
			for ( const view of this ) {
				for ( const evtName of events ) {
					view.delegate( evtName ).to( dest );
				}
			}

			// Activate delegating on future views in this collection.
			this.on( 'add', ( evt, view ) => {
				for ( const evtName of events ) {
					view.delegate( evtName ).to( dest );
				}
			} );

			// Deactivate delegating when view is removed from this collection.
			this.on( 'remove', ( evt, view ) => {
				for ( const evtName of events ) {
					view.stopDelegating( evtName, dest );
				}
			} );
		}
	};
}

这个方法的作用就是将集合中的每个View的指定事件代理给其他外部的View元素。同时在添加元素和删除View元素的时候也要代理或者取消代理相关的事件。看看例子

const viewA = new View();
const viewB = new View();
const viewC = new View();

const views = parentView.createCollection();

views.delegate( 'eventX' ).to( viewB );
views.delegate( 'eventX', 'eventY' ).to( viewC );

views.add( viewA );

viewA.fire( 'eventX', customData );

viewA.fire( 'eventY', customData );

这里需要注意的是，事件的触发是由集合中的View触发的，并且被代理的视图需要监听事件才有作用。

最后一个有意思方法就是

setParent( elementOrDocFragment ) {
	this._parentElement = elementOrDocFragment;

	// Take care of the initial collection items passed to the constructor.
	for ( const view of this ) {
		this._renderViewIntoCollectionParent( view );
	}
}

这个方法的作用就是修改集合视图的父元素，并且将子节点渲染到新的父元素之下。这个有啥作用呢?我的猜想就是可以提高集合视图的复用效果，比如我写了一个不错的集合视图UI，当我需要把它切换到新的节点位置的时候，我只需要修改父节点就OK。

CKEditor5——Uitls(DomEmitterMixin类理解)

今天开始研究在CK5的Utils包中的另一个比较重要的类，这个类就是DomEmitterMixin，我们先看看这个类的代码：

const DomEmitterMixin = extend( {}, EmitterMixin, {
	listenTo( emitter, event, callback, options = {} ){
	},
	stopListening(){
	},
	_getProxyEmitter() {
	},
	_getAllProxyEmitters(){
	}
}

通过上面的代码，我们不难看出，这个类是继承字基础类EmitterMixin，然后扩展并且重写了基类的两个方法，它们分别是:listenTo和stopListening。思考一下，这在设计模式中是什么模式呢？是不是就是装饰器模式。如果猜测没错的话，这个装饰器增强的功能就是为dom节点绑定事件和删除事件。接下来，我们分析关键的方法listenTo：

listenTo( emitter, event, callback, options = {} ) {
	// Check if emitter is an instance of DOM Node. If so, use corresponding ProxyEmitter (or create one if not existing).
	if ( isNode( emitter ) || isWindow( emitter ) ) {
		const proxyOptions = {
			capture: !!options.useCapture,
			passive: !!options.usePassive
		};

		const proxyEmitter = this._getProxyEmitter( emitter, proxyOptions ) || new ProxyEmitter( emitter, proxyOptions );

		this.listenTo( proxyEmitter, event, callback, options );
	} else {
		// Execute parent class method with Emitter (or ProxyEmitter) instance.
		EmitterMixin.listenTo.call( this, emitter, event, callback, options );
	}
}

注意到没，这里开始对emitter进行判断，如果是Window对象或者Node对象，那么就采用增加的业务逻辑，否则调用基类的方法进行绑定，因此，我们之间的猜测是正确的。

这里增强的业务逻辑也比较简单，就是根据emitter和配置对象proxyOptions要么创建一个ProxyEmitter，要么采用已经创建好的proxyEmitter进行事件的绑定。

这里我们重点关注这行代码：

this.listenTo( proxyEmitter, event, callback, options );

我们知道这行代码会调用添加事件监听器的事件，因此，我们猜想ProxyEmitter一定会重写添加事件监听器的方法，否则无法绑定dom事件，也就是说具体的装饰增强实际上是在ProxyEmitter 中实现的；所以我们需要看看ProxyEmitter的具体实现：

class ProxyEmitter {
	/**
	 * @param {Node} node DOM Node that fires events.
	 * @param {Object} [options] Additional options.
	 * @param {Boolean} [options.useCapture=false] Indicates that events of this type will be dispatched to the registered
	 * listener before being dispatched to any EventTarget beneath it in the DOM tree.
	 * @param {Boolean} [options.usePassive=false] Indicates that the function specified by listener will never call preventDefault()
	 * and prevents blocking browser's main thread by this event handler.
	 */
	constructor( node, options ) {
		// Set emitter ID to match DOM Node "expando" property.
		_setEmitterId( this, getProxyEmitterId( node, options ) );

		// Remember the DOM Node this ProxyEmitter is bound to.
		this._domNode = node;

		// And given options.
		this._options = options;
	}
}

extend( ProxyEmitter.prototype, EmitterMixin, {
	/**
	 * Collection of native DOM listeners.
	 *
	 * @private
	 * @member {Object} module:utils/dom/emittermixin~ProxyEmitter#_domListeners
	 */

	/**
	 * Registers a callback function to be executed when an event is fired.
	 *
	 * It attaches a native DOM listener to the DOM Node. When fired,
	 * a corresponding Emitter event will also fire with DOM Event object as an argument.
	 *
	 * **Note**: This is automatically called by the
	 * {@link module:utils/emittermixin~EmitterMixin#listenTo `EmitterMixin#listenTo()`}.
	 *
	 * @method module:utils/dom/emittermixin~ProxyEmitter#attach
	 * @param {String} event The name of the event.
	 */
	attach( event ) {
		// If the DOM Listener for given event already exist it is pointless
		// to attach another one.
		if ( this._domListeners && this._domListeners[ event ] ) {
			return;
		}

		const domListener = this._createDomListener( event );

		// Attach the native DOM listener to DOM Node.
		this._domNode.addEventListener( event, domListener, this._options );

		if ( !this._domListeners ) {
			this._domListeners = {};
		}

		// Store the native DOM listener in this ProxyEmitter. It will be helpful
		// when stopping listening to the event.
		this._domListeners[ event ] = domListener;
	},

	/**
	 * Stops executing the callback on the given event.
	 *
	 * **Note**: This is automatically called by the
	 * {@link module:utils/emittermixin~EmitterMixin#stopListening `EmitterMixin#stopListening()`}.
	 *
	 * @method module:utils/dom/emittermixin~ProxyEmitter#detach
	 * @param {String} event The name of the event.
	 */
	detach( event ) {
		let events;

		// Remove native DOM listeners which are orphans. If no callbacks
		// are awaiting given event, detach native DOM listener from DOM Node.
		// See: {@link attach}.

		if ( this._domListeners[ event ] && ( !( events = this._events[ event ] ) || !events.callbacks.length ) ) {
			this._domListeners[ event ].removeListener();
		}
	},

	/**
	 * Adds callback to emitter for given event.
	 *
	 * @protected
	 * @method module:utils/dom/emittermixin~ProxyEmitter#_addEventListener
	 * @param {String} event The name of the event.
	 * @param {Function} callback The function to be called on event.
	 * @param {Object} [options={}] Additional options.
	 * @param {module:utils/priorities~PriorityString|Number} [options.priority='normal'] The priority of this event callback. The higher
	 * the priority value the sooner the callback will be fired. Events having the same priority are called in the
	 * order they were added.
	 */
	_addEventListener( event, callback, options ) {
		this.attach( event );
		EmitterMixin._addEventListener.call( this, event, callback, options );
	},

	/**
	 * Removes callback from emitter for given event.
	 *
	 * @protected
	 * @method module:utils/dom/emittermixin~ProxyEmitter#_removeEventListener
	 * @param {String} event The name of the event.
	 * @param {Function} callback The function to stop being called.
	 */
	_removeEventListener( event, callback ) {
		EmitterMixin._removeEventListener.call( this, event, callback );
		this.detach( event );
	},

	/**
	 * Creates a native DOM listener callback. When the native DOM event
	 * is fired it will fire corresponding event on this ProxyEmitter.
	 * Note: A native DOM Event is passed as an argument.
	 *
	 * @private
	 * @method module:utils/dom/emittermixin~ProxyEmitter#_createDomListener
	 * @param {String} event The name of the event.
	 * @returns {Function} The DOM listener callback.
	 */
	_createDomListener( event ) {
		const domListener = domEvt => {
			this.fire( event, domEvt );
		};

		// Supply the DOM listener callback with a function that will help
		// detach it from the DOM Node, when it is no longer necessary.
		// See: {@link detach}.
		domListener.removeListener = () => {
			this._domNode.removeEventListener( event, domListener, this._options );
			delete this._domListeners[ event ];
		};

		return domListener;
	}
} );

我们首先看构造函数，首先设置一个id，然后将dom节点和配置参数存储起来。关键的方法是看扩展的这个类的原型，我们看到了一个关键的方法就是_addEventListener首先调用attach()

这个关键的attach就是增强的关键方法，为dom节点添加事件：

首先判断事件是否存在，如果存在就不需要添加了。

其次创建一个domListener回调函数，然后在dom节点上绑定对应的事件，并且在回调函数上添加了一个移除监听器的方法，用于销毁创建的监听器。

将新建的回调函数绑定到this._domListeners[event]

有了以上的三个步骤，就完成了给dom节点添加事件的功能，因此增加后的节点可以认为是一个domEmitter。

同时需要注意的是，除了调用attach()方法之外，其实还调用了基类的方法来绑定事件。

以上基本分析了绑定事件的全部过程，至于如果为节点创建id啥的，这部分对主流程影响不大，有兴趣的可以自行分析，移出事件的过程也是类似的道理。这个类的增强将装饰器设计模式的使用发挥到了淋漓尽致的地步，需要仔细体会才能看到代码的精妙之处。

欢迎讨论。

CKEditor5——Utils(Collection类理解)

今天我们学习CK5的Utils工具包中比较重要且常用的一个关键类:Collection，先贴出比较关键的代码：

export default class Collection {
 	constructor( initialItemsOrOptions = {}, options = {} ) {
		const hasInitialItems = isIterable( initialItemsOrOptions );

		if ( !hasInitialItems ) {
			options = initialItemsOrOptions;
		}

		/**
		 * The internal list of items in the collection.
		 *
		 * @private
		 * @member {Object[]}
		 */
		this._items = [];

		/**
		 * The internal map of items in the collection.
		 *
		 * @private
		 * @member {Map}
		 */
		this._itemMap = new Map();

		/**
		 * The name of the property which is considered to identify an item.
		 *
		 * @private
		 * @member {String}
		 */
		this._idProperty = options.idProperty || 'id';

		/**
		 * A helper mapping external items of a bound collection ({@link #bindTo})
		 * and actual items of this collection. It provides information
		 * necessary to properly remove items bound to another collection.
		 *
		 * See {@link #_bindToInternalToExternalMap}.
		 *
		 * @protected
		 * @member {WeakMap}
		 */
		this._bindToExternalToInternalMap = new WeakMap();

		/**
		 * A helper mapping items of this collection to external items of a bound collection
		 * ({@link #bindTo}). It provides information necessary to manage the bindings, e.g.
		 * to avoid loops in two–way bindings.
		 *
		 * See {@link #_bindToExternalToInternalMap}.
		 *
		 * @protected
		 * @member {WeakMap}
		 */
		this._bindToInternalToExternalMap = new WeakMap();

		/**
		 * Stores indexes of skipped items from bound external collection.
		 *
		 * @private
		 * @member {Array}
		 */
		this._skippedIndexesFromExternal = [];

		// Set the initial content of the collection (if provided in the constructor).
		if ( hasInitialItems ) {
			for ( const item of initialItemsOrOptions ) {
				this._items.push( item );
				this._itemMap.set( this._getItemIdBeforeAdding( item ), item );
			}
		}

		/**
		 * A collection instance this collection is bound to as a result
		 * of calling {@link #bindTo} method.
		 *
		 * @protected
		 * @member {module:utils/collection~Collection} #_bindToCollection
		 */
	}
}

从上面的代码可以看出有两个关键的字段就是: this._items,this._itemMap一个数组和一个Map，所以可以猜测collection可以方便的插入数据和快速查询。

从构造函数可以看出，它接收两个值，第一个值是一个可以迭代的对象，另一个是配置对象。我们看看它的具体用法：

const collection = new Collection( [ { id: 'John' }, { id: 'Mike' } ] );

console.log( collection.get( 0 ) ); // -> { id: 'John' }
console.log( collection.get( 1 ) ); // -> { id: 'Mike' }
console.log( collection.get( 'Mike' ) ); // -> { id: 'Mike' }
// or add item
const collection = new Collection();

collection.add( { id: 'John' } );
console.log( collection.get( 0 ) ); // -> { id: 'John' }
//这里是往connection添加了数组对象

//这里是通过最后一个参数来配置一些属性比如集合的idProperty属性，这样在查找的时候就可以
//根据这个属性进行查找
const emptyCollection = new Collection( { idProperty: 'name' } );
emptyCollection.add( { name: 'John' } );
console.log( collection.get( 'John' ) ); // -> { name: 'John' }

const nonEmptyCollection = new Collection( [ { name: 'John' } ], { idProperty: 'name' } );
nonEmptyCollection.add( { name: 'George' } );
console.log( collection.get( 'George' ) ); // -> { name: 'George' }
console.log( collection.get( 'John' ) ); // -> { name: 'John' }

我们再来看看另外两个关键的属性：this._bindToInternalToExternalMap，this._bindToInternalToExternalMap这是两个有意思的属性，根据字面意思猜测这两个属性是用在bindTo这个方法中的，而且这两个Map构成了一个双向映射。即从内部到外部的映射和从外部到内部的映射。