|
我們還可以看一組使用 Range 方法和屬性的統(tǒng)計數(shù)據(jù)，對于 2/8 原則的實踐或許有幫助：
/**
* Resource reference : http://kb.operachina.com/node/147
*
* collapse 51,435
* setStartBefore 43,138
* setStartAfter 40,270
* selectNodeContents 37,027
* collapsed 12,862
* selectNode 4,636
* deleteContents 3,935
* setStart 3,171
* startOffset 3,150
* setEnd 3,086
* detach 2,732
* startContainer 2,659
* endOffset 2,647
* insertNode 2,321
* cloneContents 2,261
* endContainer 2,236
* cloneRange 1,993
* setEndAfter 1,911
*
*/
下面我們簡單討論一下 Range 的 insertNode() 方法的模擬實現(xiàn)：
The insertNode() method inserts the specified node into the Range’s context tree. The node is inserted at the start boundary-point of the Range, without modifying it.
If the start boundary point of the Range is in a Text node, the insertNode operation splits the Text node at the boundary point. If the node to be inserted is also a Text node, the resulting adjacent Text nodes are not normalized automatically; this operation is left to the application.
The Node passed into this method can be a DocumentFragment. In that case, the contents of the DocumentFragment are inserted at the start boundary-point of the Range, but the DocumentFragment itself is not. Note that if the Node represents the root of a sub-tree, the entire sub-tree is inserted.
從上面的引用得知 insertNode() 方法用來在選區(qū)的開頭插入節(jié)點，固我們先獲取 Range 對象的 startContainer（Range 是從那個節(jié)點中開始的，即選區(qū)中第一個節(jié)點的父節(jié)點） 和 startOffset（在 startContainer 中 Range 開始的偏移位置） 屬性。
var sc = this.startContainer,
so = this.startOffset;
注： 如果 startContainer 是文本節(jié)點、注釋節(jié)點或者是 CData 節(jié)點，startOffset 是指 Range 開始前的字符數(shù)，否則，偏移是 Range 中的第一個節(jié)點在其父節(jié)點中的索引。
接下來，我們需將情況分為下面兩種：
第一種情形：startContainer 節(jié)點為文本節(jié)點、注釋節(jié)點或者是 CData 節(jié)點�！皊tartOffset 是指 Range 開始前的字符數(shù)”。
- 如果 startOffset 等于 0，則表示 Range 是從 startContainer 起始位置開始，應(yīng)將 node 插入到 startContainer 節(jié)點之前 sc.parentNode.insertBefore(node, sc);
- 如果 startOffset 大于等于 startContainer 本身的節(jié)點長度，則表示 Range 是從 startContainer 末尾位置開始，應(yīng)將 node 插入到 startContainer 節(jié)點之后，即如果存在下一節(jié)點，則插入到下一之前 sc.parentNode.insertBefore(node, sc.nextSibling);，如果不存在下一節(jié)點，則加入到 startContainer父節(jié)點最后 sc.parentNode.appendChild(node);
- 如果 startOffset 在 startContainer 本身的節(jié)點長度之內(nèi)，我們通過oSplitNode = object.splitText( [iIndex])將節(jié)點在startOffset 一分為二 nn = sc.splitText(so);，分為兩個節(jié)點，則應(yīng)將 node 插入到新生成的第二個節(jié)點之前 sc.parentNode.insertBefore(node, nn);。
出處：
責任編輯：bluehearts
上一頁 模擬實現(xiàn)Range的insertNode()方法 [1] 下一頁 模擬實現(xiàn)Range的insertNode()方法 [3]
◎進入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 2 頁 模擬實現(xiàn)Range的insertNode()方法 [2]
