Office-Js Word插件：检测文档变更及BindingDataChanged功能用法

一、绑定文档编辑变更事件 #

你提到的BindingDataChanged事件需要先创建覆盖整个文档的绑定才能生效，而非直接绑定到文档对象。具体实现步骤如下：

1. 在Office环境初始化完成后，检查是否已存在全文档绑定
2. 为绑定添加变更事件处理逻辑

// 等待Office环境加载完成后执行初始化
Office.initialize = function(reason) {
  setupDocumentChangeListener();
  initDocumentCache();
};

function setupDocumentChangeListener() {
  // 先检查是否已存在指定ID的绑定
  Office.context.document.bindings.getByIdAsync("WholeDocBinding", function(checkResult) {
    if (checkResult.status === Office.AsyncResultStatus.Failed) {
      // 创建覆盖整个文档的文本绑定
      Office.context.document.bindings.addFromDocumentAsync(
        Office.BindingType.Text,
        { id: "WholeDocBinding" },
        function(createResult) {
          if (createResult.status === Office.AsyncResultStatus.Succeeded) {
            // 绑定成功后添加变更事件（使用防抖后的处理函数）
            createResult.value.addHandlerAsync(Office.EventType.BindingDataChanged, debouncedContentHandler);
          }
        }
      );
    } else {
      // 绑定已存在，直接添加事件
      checkResult.value.addHandlerAsync(Office.EventType.BindingDataChanged, debouncedContentHandler);
    }
  });
}

二、缓存文档变更前后状态 #

通过全局变量存储上一次的文档内容，在事件触发时对比当前内容即可实现状态缓存：

// 全局变量存储上一次的文档内容
let lastDocumentContent = "";

// 初始化时获取文档初始内容作为缓存基准
function initDocumentCache() {
  Office.context.document.bindings.getByIdAsync("WholeDocBinding", function(bindingResult) {
    if (bindingResult.status === Office.AsyncResultStatus.Succeeded) {
      bindingResult.value.getDataAsync(function(dataResult) {
        if (dataResult.status === Office.AsyncResultStatus.Succeeded) {
          lastDocumentContent = dataResult.value;
        }
      });
    }
  });
}

// 原始的内容变更处理函数
function contentChangeHandler(eventArgs) {
  Office.context.document.bindings.getByIdAsync("WholeDocBinding", function(bindingResult) {
    if (bindingResult.status === Office.AsyncResultStatus.Succeeded) {
      bindingResult.value.getDataAsync(function(dataResult) {
        if (dataResult.status === Office.AsyncResultStatus.Succeeded) {
          const currentContent = dataResult.value;
          // 对比变更前后状态，执行自定义逻辑
          console.log("变更前内容:", lastDocumentContent);
          console.log("变更后内容:", currentContent);
          // 更新缓存内容为当前最新状态
          lastDocumentContent = currentContent;
          // 这里添加你的高级查找替换等业务逻辑
        }
      });
    }
  });
}

注意：若文档内容较大，全局变量存储可能占用较多内存，可按需只缓存关键区域内容，或使用Office.context.settings进行持久化存储（注意该存储有大小限制）。

三、实现防抖/节流避免频繁触发 #

直接在JS层面实现防抖或节流函数，包装事件处理逻辑即可：

防抖实现（停止编辑N毫秒后执行一次） #

适合批量处理场景（如用户停止输入后执行查找替换）：

function debounce(func, delay = 500) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 用防抖函数包装原始处理逻辑，设置500ms延迟
const debouncedContentHandler = debounce(contentChangeHandler, 500);

节流实现（固定时间内仅执行一次） #

适合实时预览类场景：

function throttle(func, delay = 1000) {
  let lastExecuteTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastExecuteTime >= delay) {
      func.apply(this, args);
      lastExecuteTime = now;
    }
  };
}

// 用节流函数包装原始处理逻辑，设置1秒执行间隔
const throttledContentHandler = throttle(contentChangeHandler, 1000);

内容的提问来源于stack exchange，提问作者Amber Miller