一,基本原理  

  我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义。

  我们首先定义一个函数:

    var obj = { };

  其次,为obj对象定义一个test的访问器属性:

    Object.defineProperty(obj, 'test', {

        get: ()=>{console.log('get被调用了')},

        set: ()=>{console.log('set被调用了')}

    })

  可以像普通属性一样读取访问器属性,但是当读取或设置访问器属性的时候,调用其内部特性:get和set函数。get和set方法内部的this都指向obj,这意味着get和set可以操作对象内部的值。另外访问器属性会被优先调用,与其同名的普通属性则会被忽略。

  obj.test //读取属性,调用get函数

  obj.test = 'abcd' //为属性赋值,调用set函数

二,举个栗子

  我们要的效果是:随着输入框文字的变化,span中会同步显示相同的文字内容;或者在js或控制台修改obj.test的值,视图也会更新,这样就实现了model到view以及view到model的双向数据绑定。

  首先有一个input和span。

<input type="text" id="input_1">
<span id="span_1"></span>

var obj = {};
Object.defineProperty(obj, 'test', {
  set: (newVal)=>{
    document.getElementById('input_1').value = newVal;
    document.getElementById('span_1').innerHTML = newVal;
  }
});
document.addEventListener('keyup', (e)=>{
  obj.test = e.target.value;
})

  效果图:

js实现一个简单的响应式双向数据绑定的更多相关文章

  1. js实现一个简单的链式操作

    如何实现一个链式操作 function person() {} person.prototype = { setname: function(name) { this.name = name retu ...

  2. 创建简单的响应式HTML5模版

    创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...

  3. Crumpet – 使用很简单的响应式前端开发框架

    Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...

  4. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  5. Restive.js – 轻松让网站变成响应式和自适应

    Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...

  6. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  7. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  8. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  9. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

随机推荐

  1. asp.net多文件上传

    文件上传简单实现是非常容易的,但是想要更高的要求,比如通过ajax上传文件.一次上传多个文件.文件比较大等等,这里面的坑就不是很容易填(对于新手来说).因此在这里我准备通过ajax实现多文件上传.在开 ...

  2. webstock学习

    1.WebSocket是HTML5中出出现的新技术,有着web TCP之称,这也是为了适应现在实时传输数据的趋势,在这之前一般采用两种方法进行实时数据交换. 轮询机制,其中又包括长轮询. ①短轮询是指 ...

  3. django的基础知识

    在settings.py文件中,settings文件中顶部的INSTALLED_APPS设置项.它列出了所有的项目中被激活的Django应用(app).你必须将你自定义的app注册在这里.每个应用可以 ...

  4. GIMP 无法设置中文的问题解决

    首先按照网上说的安装了language-pack-gnome-zh-hant 参考链接:http://www.ubuntu-tw.org/modules/newbb/viewtopic.php?top ...

  5. python搭建ftp服务器

    1 # coding: utf-8 import os from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handler ...

  6. hihocoder1822 战舰日常任务

    思路: 使用堆即可. 实现: #include <iostream> #include <map> #include <vector> #include <c ...

  7. css命名规范—CSS样式命名整理

    CSS样式命名整理 页面结构 容器: container/wrap整体宽度:wrapper页头:header内容:content页面主体:main页尾:footer导航:nav侧栏:sidebar栏目 ...

  8. Gym 100883J palprime(二分判断点在凸包里)

    题意:判断一堆小点有多少个在任意三个大点构成的三角形里面. 思路:其实就是判断点在不在凸包里面,判断的话可以使用二分来判断,就是判断该点在凸包的哪两个点和起点的连线之间. 代码: /** @xigua ...

  9. struct结构体内存大小

    一. 基本原则 1. struct中成员变量的声明顺序,与成员变量对应的内存顺序是一致的: 2. struct本身的起始存储地址必须是成员变量中最长的数据类型的整倍数,注意是最长的数据类型,而不是最长 ...

  10. hibernate3缓存(hibernate)

    一级缓存:当应用程序调用Session 的save() .update() .savaeOrUpdate() .get() 或load() ,以及调用查询接口的list() .iterate() 或f ...