• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作

基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含mutationobserver,编辑器,撤销等相关知识,佚名 希望在学习及工作中可以帮助到您

MutationObserver介绍

MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件.

Mutation Observer(变动观察器)是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer会得到通知。

Mutation Observer有以下特点:

 •它等待所有脚本任务完成后,才会运行,即采用异步方式
 •它把DOM变动记录封装成一个数组进行处理,而不是一条条地个别处理DOM变动。
 •它即可以观察发生在DOM节点的所有变动,也可以观察某一类变动

MDN的资料: MutationObserver

MutationObserver是一个构造函数, 所以创建的时候要通过 new MutationObserver;

实例化MutationObserver的时候需要一个回调函数,该回调函数会在指定的DOM节点(目标节点)发生变化时被调用,

在调用时,观察者对象会 传给该函数 两个参数:

    1:第一个参数是个包含了若干个MutationRecord对象的数组;

    2:第二个参数则是这个观察者对象本身.

比如这样:

     

observer的方法

实例observer有三个方法: 1: observe  ;2: disconnect ; 3: takeRecords   ;

observe方法

observe方法:给当前观察者对象注册需要观察的目标节点,在目标节点(还可以同时观察其后代节点)发生DOM变化时收到通知;

这个方法需要两个参数,第一个为目标节点, 第二个参数为需要监听变化的类型,是一个json对象,  实例如下:

       

disconnect方法

disconnect方法会停止观察目标节点的属性和节点变化, 直到下次重新调用observe方法;

takeRecords

清空 观察者对象的 记录队列,并返回一个数组, 数组中包含Mutation事件对象;

MutationObserver实现一个编辑器的redo和undo再适合不过了, 因为每次指定节点内部发生的任何改变都会被记录下来, 如果使用传统的keydown或者keyup实现会有一些弊端,比如:

1:失去滚动, 导致滚动位置不准确;

2:失去焦点;
....
用了几小时的时间,写了一个通过MutationObserver实现的 undo 和 redo (撤销回退的管理)的管理插件 MutationJS ,   可以作为一个单独的插件引入:(http://files.cnblogs.com/files/diligenceday/MutationJS.js):


"redo" : function () {

您可能想查找下面的文章:

  • 基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
  • 基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作_html5教程技巧

相关文章

  • 2018-12-03HTML5 对各个标签的定义与规定:base
  • 2018-12-03AR技术可以通过H5实现吗?不通过APP
  • 2018-12-03总结10篇基本绘图用法实例教程
  • 2017-08-06html5使用canvas绘制太阳系效果
  • 2018-12-03HTML5中<template>标签的详细介绍(图文)
  • 2018-12-03H5的FileReader分布读取文件应该如何使用以及其方法简介
  • 2018-12-03详解强大的HTML5幻灯片系统-H5Slides
  • 2018-12-03egret 和cocos2d-x-js哪个目前更稳定更好用? ?
  • 2018-12-03HTML5游戏框架cnGameJS开发实录-核心函数模块篇的代码实例
  • 2017-08-06使用 HTML5 Canvas 制作水波纹效果点击图片就会触发

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 圆弧和扇形的加载动画该怎么写?
    • HTML页面中添加Canvas标签示例_html5教程技巧
    • 将HTML5 Canvas的内容保存为图片借助toDataURL实现
    • w3.org 结构复杂,信息量大,新人从哪里入手比较好?
    • 深入理解HTML的FormData对象
    • JS之原生数组splice方法实例
    • HTML5新特性之移动设备API
    • HTML5 canvas画图的图文代码详解
    • HTML5-canvas的使用方法介绍
    • HTML5学习笔记(四)-列表, 块和布局代码实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有