页面中展示的信息都是存储在服务器中的数据,离开数据的页面就像是一块画板的作用,如何通过数据来描述一个页面,又怎么映射数据变化和页面渲染的关系。

  当然,最直接的方法就是操作节点,页面加载之后获取节点,再将数据填充到获取的节点之上,每当数据修改,就将该数据对应的节点重新填充数据,像修改数据这样的操作只能通过页面中的操作来实现,也就是事件绑定调用ajax,成功时修改节点。这样的方式存在很大的缺陷,如多个类似的区块,几百个节点都是与页面数据相关的,再比如管理应用中数据的管理,这种情况实际应用基本不可行,对于开发维护都是一件很恐怖的操作。采用节点操作的方法来填充数据,并没有将页面数据化。

  既然要通过数据来管理页面,那么就需要将页面的数据结构抽象化,并将数据同步至结构,那么管理的这个区块就应该有自己的结构、数据和操作,这样就很容易联想到使用类的实例,也就是对象来管理页面。我们在constructor构造器中定义数据、页面结构、页面中的挂载点,页面结构使用字符串模板的形式,将数据加载到结构中,并提供render( ) 方法将页面渲染到挂载点。除此之外,页面中的行为定义到hander( )方法中,并且把事件绑定放在hander( )之中。由于所有的页面都包含render( )和hander( )操作,所以定义init( )方法,依次执行render和hander,就可已初步完成页面的加载。当数据发生修改,修改完成后调用init( ) 重新生成新的节点并绑定事件。这样的做法将页面的各功能模块独立出来,并采用集中管理的模式,减少了很多重复的操作。并且数据被抽象成对象的模式,方法被击中在handle( )中,便于维护和管理。由于每次修改数据都要重新渲染,增加浏览器的压力,并且这样的管理模式仍然不够直观,数据的修改和re-render( ) 还是通过每个事件绑定来完成的,那么怎样才能让数据的变化更加智能化呢?

  既然是以对象来描述数据,那么想要知道每次数据的修改是什么时候发生的,那么可以使用set( )方法定义对象的属性,每次数据发生修改,那么就调用处理该数据与视图之间联系的方法,达到修改数据节点的re-render( ),并且数据的获取采用get( ) 可以很轻松的管理数据,实现视图与数据的响应。

  首先定义数据,通过对象管理需要定义一个管理的类:

class Data {
  constructor(props) {
    this.data = props.data;
    this.template = props.template;
    this.el = props.el;
}

  具体应用的相关数据通过实例化参数传递实现:

const data = new Data({
  data: {
    title: "现在数字为:",
    count: 1
  },
  template: `
    <h1 data-on="title"></h1>
    <h1 data-on="count"></h1>
    <input type="number" i-model="count" />
 `,
  el: "#app"
})

  其中data是页面中需要的数据,包括标题和数字两个属性,template用于描述页面的结构,标签采用data-自定义属性绑定对应的数据,而表单元素通过i-model来绑定,这样就首先建立数据与视图的关系,el为该模块的挂载点,这就要求html结构中首先有id为app的元素。

  首次数据的加载:

  loadData() {
    const _this = this;
    return {
      // 相关数据的观察列表,记录那些数据需要响应的响应的办法
      watchers: {},
      // 视图和数据的描述,数据将会加载到对应的节点,并将视图和数据的管理操作封装到观察列表中
      subsciribe(key, value) {
        // 文本标签的加载
        document
          .querySelector(_this.el)
          .querySelectorAll(`[data-on=${key}]`)
          .forEach(item => {
            function doLoad(value) {
              item.innerHTML = value;
            }
            doLoad(value);
            if (this.watchers[key]) {
              this.watchers[key].push(doLoad)
            } else {
              this.watchers[key] = [doLoad];
            }
          })
        // 表单元素的加载和监察
        document
          .querySelector(_this.el)
          .querySelectorAll(`[i-model=${key}]`)
          .forEach(item => {
            function doLoad(value) {
              item.value = value;
            }
            doLoad(value);
            item.oninput = function () {
              _this.data[key] = this.value
            };
            if (this.watchers[key]) {
              this.watchers[key].push(doLoad)
            } else {
              this.watchers[key] = [doLoad];
            }
          })
      },
      // 对于数据修改后的具体操作,将会锁定到观察列表中的内容
      emit(key, value) {
        this.watchers[key].forEach(doLoad => doLoad(value))
      }
    }
  }

  由于文本节点和表单节点数据的加载方式不同,所以需要分开处理数据。将数据加载到节点,并且将加载的方式加入到watchers对象中,暴露emit( ) 方法实际操作数据和视图,那么什么时候应当重新加载视图,那么肯定是在属性的set( ) 方法中。电泳loadData( )方法将会获得一个完成的描述对象,那么在对其设置定义为响应的方式即可,实例获得的对象交给this.ob(如下)。

setData() {
    const _this = this;
    for (let key in this.data) {
      let value = this.data[key]
      Object.defineProperty(this.data, key, {
        get() {
          return value;
        },
        set(_value) {
          if (value !== _value) {
            value = _value;
            _this.ob.emit(key, _value);
          }
        }
      })
      this.ob.subsciribe(key, value);
    }
  }

  这样数据和视图的关联性就完整地表现出来,只需要依次执行页面加载、对象描述和属性定义设置即可,再在constructor( )中调用init( ),页面的相响应数据就能够实现了。

  init() {
    document
      .querySelector(this.el)
      .innerHTML = this.template;
    this.ob = this.loadData()
    this.setData();
  }

  这里的loadData( )调用获得数据处理的描述对象并需交给this.ob,保证生成的观察者对象的唯一性。

完整代码:

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script type="text/javascript">
    class Data {
      constructor(props) {
        this.data = props.data;
        this.template = props.template;
        this.el = props.el;
        this.init();
      }
      init() {
        document
          .querySelector(this.el)
          .innerHTML = this.template;
        this.ob = this.loadData()
        this.setData();
      }
loadData() { const _this = this; return { watchers: {}, subsciribe(key, value) { document .querySelector(_this.el) .querySelectorAll(`[data-on=${key}]`) .forEach(item => { function doLoad(value) { item.innerHTML = value; } doLoad(value); if (this.watchers[key]) { this.watchers[key].push(doLoad) } else { this.watchers[key] = [doLoad]; } }) document .querySelector(_this.el) .querySelectorAll(`[i-model=${key}]`) .forEach(item => { function doLoad(value) { item.value = value; } doLoad(value); item.oninput = function () { _this.data[key] = this.value }; if (this.watchers[key]) { this.watchers[key].push(doLoad) } else { this.watchers[key] = [doLoad]; } }) }, emit(key, value) { this.watchers[key].forEach(doLoad => doLoad(value)) } } }
setData() { const _this = this; for (let key in this.data) { let value = this.data[key] Object.defineProperty(this.data, key, { get() { return value; }, set(_value) { if (value !== _value) { value = _value; _this.ob.emit(key, _value); } } }) this.ob.subsciribe(key, value); } } }
const data = new Data({ data: { title: "this is a title", count: 1 }, template: ` <h1 data-on="title"></h1> <h1 data-on="title"></h1> <h1 data-on="count"></h1> <input type="number" i-model="count" />   `, el: "#app" }) </script> </body> </html>

JS响应数据的更多相关文章

  1. jQuery-1.9.1源码分析系列(十六)ajax——响应数据处理和api整理

    ajax在得到请求响应后主要会做两个处理:获取响应数据和使用类型转化器转化数据 a.获取响应数据 获取响应数据是调用ajaxHandleResponses函数来处理. ajaxHandleRespon ...

  2. MetricGraphics.js – 时间序列数据的可视化

    MetricsGraphics.js 是建立在D3的基础上,被用于可视化和布局的时间序列数据进行了优化.它提供以产生一个原则性的,一致的和响应式的方式的图形常见类型的简单方法.该库目前支持折线图,散点 ...

  3. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  4. server的响应数据

    前言 如果使用了MVC框架(比方,struts2). server的响应数据.分3种情况 1.响应数据是结果页面 2.响应数据是json格式的数据 3.响应数据是json格式的数据,然后再又一次发出一 ...

  5. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  6. 用 jQuery.ajaxSetup 实现对请求和响应数据的过滤

    不知道同学们在做项目的过程中有没有相同的经历呢?在使用 ajax 的时候,需要对请求参数和响应数据进行过滤处理,比如你们觉得就让请求参数和响应信息就这么赤裸裸的在互联网里来回的穿梭,比如这样: 要知道 ...

  7. ASP.NET Core 中文文档 第四章 MVC(2.3)格式化响应数据

    原文:Formatting Response Data 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:许登洋(Seay) ASP.NET Core MVC 内建支持对相应数据( ...

  8. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  9. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

随机推荐

  1. Dapper学习笔记(一)

    https://github.com/StackExchange/dapper-dot-net Dapper是对IDbConnection的扩展,需要使用Dapper提供的扩展只需要把SqlMappe ...

  2. Spark on Yarn 学习(一)

    最近看到明风的关于数据挖掘平台下实用Spark和Yarn来做推荐的PPT,感觉很赞,现在基于大数据和快速计算方面技术的发展很快,随着Apache基金会上发布的一个个项目,感觉真的新技术将会不断出现在大 ...

  3. Java中的JDK动态代理

    所谓代理,其实就是相当于一个中间人,当客户端需要服务端的服务时,不是客户直接去找服务,而是客户先去找代理,告诉代理需要什么服务,然后代理再去服务端找服务,最后将结果返回给客户. 在日常生活中,就拿买火 ...

  4. nodejs2

    jade@1.11.0 严格注意缩进 extends layout block content h1= title p Welcome to #{title} - var a='abc'; p his ...

  5. const type&amp; 与 type&amp; 的区别

    const type& 与 type& 是C/C++编程中容易混淆的两个知识点,现在以 cont int& 与 int& 为例讲解: 1.int& 讲解 int ...

  6. POJ 3678 Katu Puzzle (2-SAT,常规)

    题意:给出n个点,每个点上有一个数字可以0或1,然后给出m条限制,要求a和b两个点上的数字满足 a op b = c,op和c都是给定.问是否能够有一组解满足所有限制?(即点上的数字是0是1由你决定) ...

  7. 【转】iOS实时卡顿监控

    转自http://www.tanhao.me/code/151113.html/ 在移动设备上开发软件,性能一直是我们最为关心的话题之一,我们作为程序员除了需要努力提高代码质量之外,及时发现和监控软件 ...

  8. Hortonworks 用于做 Sentimental Analysis的Hiveddl.sql 文件

    The hiveddl.sql script has performed the following steps to refine the data: Converted the raw Twitt ...

  9. PictureBox从本地上传图片和保存在磁盘目录

    private void mypicbox_Click(object sender, EventArgs e) { try { OpenFileDialog ofdPic = new OpenFile ...

  10. centos7上修改主机名

    centos7上修改主机名 2017-10-09   13:45:17 个人原创,转载请注明,否则追究法律责任 1,临时修改: 和centos5,centos6 一样,重启失效 2,永久修改: 命令: ...