一,基本原理  

  我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过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. 2个rman自动恢复的脚本

    ### scripts 1--the scirpt is used for restore db from vcs to a point to time recovery--and the targe ...

  2. go time笔记

    package main import ( "time" "fmt" ) func main() { t := time.Now().UnixNano() fm ...

  3. BIO,NIO,AIO总结

    熟练掌握 BIO,NIO,AIO 的基本概念以及一些常见问题是你准备面试的过程中不可或缺的一部分,另外这些知识点也是你学习 Netty 的基础. BIO,NIO,AIO 总结 1. BIO (Bloc ...

  4. VMware下OSSIM 5.2.0的下载、安装和初步使用(图文详解)

    不多说,直接上干货! 入门阶段不建议选用最新的版本. 采用OSSIM 4.11 到 OSSIM5.0.3 之间任何版本做实验,sensor的状态都会是“V”.   建议,入门,采用OSSIM5.0.0 ...

  5. thinkPHP--模块分组

    启用分组模块非常简单,配置下APP_GROUP_LIST参数和DEFAULT_GROUP参数即可. 'APP_GROUP_LIST'=>'Admin,Home', 'DEFAULT_GROUP' ...

  6. FXP登录Linux报错

    1.用FXP登录Linux报错: [info] subsystem request for sftp failed, subsystem not found.[右] [execute] /usr/li ...

  7. C#oracle备份和还原

    最近公司的oracle备份工具不好使了,原来是公司的人用VB写的,由于我是主攻C#的,所以想着自己来写一个C#版本的oracle备份和还原工具. 一开始,我按照原来的设计思路来进行编写,想在pluss ...

  8. codeforces1025

    hackforces + fstforces A 很明显当有一个字母出现次数>1时即合法 $n = 1$的情况需要特判 #include<cstdio> #include<ve ...

  9. Android 两个ArrayList找出相同元素及单个ArrayList删除元素

    //从一个ArrayList中删除重复元素 List<String> arrayList1 = new ArrayList<String>(); arrayList1.add( ...

  10. 洛谷 P1732 活蹦乱跳的香穗子

    题目描述 香穗子在田野上调蘑菇!她跳啊跳,发现自己很无聊,于是她想了一个有趣的事情,每个格子最多只能经过1次,且每个格子都有其价值 跳的规则是这样的,香穗子可以向上下左右四个方向跳到相邻的格子,并且她 ...