Question

我正在尝试使用变异观察器，但我发现在没有浏览器减速的情况下实施起来非常困难。也许这只是我的实施，但我希望有人看看，看看是否有任何可以改进的东西。

我也在尝试检查p标签的突变，但我似乎无法弄明白。现在我正在检查document.body的突变，因为我无法弄清楚如何实现p。

var arrayOfP = $("p").text(); //Get p tags
var observer = new WebKitMutationObserver(function(mutations) {

    tempArrayOfP = $("p").text(); //Get p after mutation
    tempArrayOfP = tempArrayOfP.replace(arrayOfP,''); //Get the difference between before and after mutation (this line doesn't seem to work...
    arrayOfP = $("p").text(); //Store new case of current p tags
    chrome.runtime.sendMessage(tempArrayOfP, manageResponse); //Send p tags to other file in chrome extension

});
observer.observe(document.body, { attributes: true, childList: true, characterData: true });

有什么想法吗？ tempArrayOfP替换似乎不起作用，目前我的chrome扩展程序在发送邮件时重做页面上的所有内容。

感谢帮助。感谢。

Answer 1

传递给回调的突变可以提供旧值和新值，这将使您不必为每个突变遍历DOM。

<p>hello world</p>

/// <reference path="../../typings-custom/_custom.d.ts" />

import {Component, View, LifecycleEvent} from 'angular2/angular2';

@Component({
    selector: 'counter',
    lifecycle: [LifecycleEvent.onInit, LifecycleEvent.onChange, LifecycleEvent.onCheck, LifecycleEvent.onAllChangesDone]
})
@View({
    template: '<button (click)="increment()">Increase Component {{count}}</button>'
})

export class Counter {

    count: number = NaN;

    constructor()
    {
        this.count = 0;
    }

    increment()
    {
        ++this.count;
    }

    onInit()
    {
        console.log('onInit');
    }

    onCheck()
    {
        console.log('onCheck');
    }

    onChange(changes)
    {
        console.log('onChange');
        console.log(changes);
    }

    onAllChangesDone()
    {
        console.log('onAllChangesDone');
    }
}

至于提取旧文本和新文本之间的差异，您的方法假设突变未删除任何文本，或在现有文本之间插入文本。如果发生这种情况，替换中的字符串将不匹配任何内容。

Answer 2

var elems = [].slice.call(document.getElementsByTagName("p"));

var text = elems.map(function(el) {
  return el.textContent
})

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.target.nodeName === "P") {
      var index = elems.indexOf(mutation.target);
      console.log("mutation type:", mutation.type + "\n"
                 , "new text:", mutation.addedNodes[0].nodeValue + "\n"
                 , "old text:", text[index]);
    }
  });
})

observer.observe(document.body, {
  childList: true,
  characterData: true,
  subtree: true
});

document.getElementsByTagName("p")[0].textContent = 123;
document.getElementsByTagName("p")[1].textContent = 456;

<p>abc</p>
<p>def</p>

使变异观察者更快，资源更少？

2 个答案: