js实现一个简单的响应式双向数据绑定
一,基本原理
我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过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实现一个简单的响应式双向数据绑定的更多相关文章
- js实现一个简单的链式操作
如何实现一个链式操作 function person() {} person.prototype = { setname: function(name) { this.name = name retu ...
- 创建简单的响应式HTML5模版
创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...
- Crumpet – 使用很简单的响应式前端开发框架
Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- Restive.js – 轻松让网站变成响应式和自适应
Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
随机推荐
- 常用的 JavaScript 简写方法
1.三元操作符 当想写 if...else 语句时,使用三元操作符来代替. const x = 20; let answer; if (x > 10) { answer = 'is gre ...
- Objective-C Loops
There may be a situation, when you need to execute a block of code several number of times. In gener ...
- Azure 项目构建 – 部署 Jenkins 服务器以实现持续集成(CI)
通过完整流程详细介绍了如何通过 Azure 虚拟机.虚拟网络等服务在 Azure 平台上快速搭建 Jenkins 服务器. 此系列的全部课程 https://school.azure.cn/curri ...
- jmeter动态参数传值配置
jmeter动态参数传值配置
- JSP serverlet区别与联系
jsp是html包含java servlet是java包含html jsp请求到tomcat---tomcat封装了jsp到servlet实现. 所以jsp请求时候,会自动创建session 而不用在 ...
- RunTests.sh && RunIPhoneSecurityd.sh
https://github.com/gh-unit/gh-unit/blob/master/Scripts/RunTests.sh #!/bin/sh # If we aren't ru ...
- codevs 3026 恶心的扑克
时间限制: 1 s 空间限制: 64000 KB 题目等级 : 白银 Silver 题目描述 Description 有一副恶心的扑克,从小到大依次是3 , 4 , 5 , 6 , 7 , 8 , ...
- ObjectiveC中的赋值,对象拷贝,浅拷贝与深拷贝
在开发过程中我们经常会遇到对象拷贝的问题,下面我们分别讨论赋值操作.对象拷贝.以及浅拷贝(Shallow copy)与深拷贝(Deep copy)的区别与各自的实现方式. 一.不同对象的赋值操作 Ob ...
- c#写出乘法口诀
显然是显得无聊五分钟写的乘法口诀 static void Main(string[] args) { int dq; int[] array ...
- OS X快捷键小技巧
退出command+Q,关分页Command+W,刷新Command+R,新开分页Command+T 全屏 ctrl+command+F 每个Mac使用者都知道点击下窗口左上角黄色圆形的按钮就可以最小 ...