您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

利用jQuery实现简单的数据双向绑定

时间:2019-09-04 11:15:40  来源:  作者:

导语

在软件开发中,MVC或者MVVM是经常被用到的设计模式。在web前端开发中,之前我们需要自己写许多代码来完成这项功能。而现在有许多优秀的类库可以帮我们实现这个功能。

许多优秀的前端框架都提供了强大的数据双向绑定的功能。比如 Ember.js, Angular.js, KnockoutJS

如果我们在一些小型的项目中,只是希望某个功能区域有数据双向绑定的功能,是不是就非得使用这么重的框架呢?事实上,我们可以用jQuery来实现一个简单的数据双向绑定的功能。

从头开始做一个数据双向绑定并不是那么复杂。简单来说,需要实现下面三点:

  1. 我们需要指定View中的UI元素和数据中的属性对应关系。
  2. 我们需要监听View中的UI元素内容以及数据的变化。
  3. 最后就是我们需要把变化通知到所有与之绑定的数据或者UI元素。

JAVAscript Code

function DataBinder (objectId) {
 // 使用jQuery空对象作为监听对象
 var pubSub = jQuery({});
 //
 var dataAttr = 'bind-' + objectId;
 var message = objectId + ':change';
 // 监听dom中所有元素的 data-binding 属性变化。并由pubSub来处理。
 $(document).on('input change', '[data-' + dataAttr + ']', function (event) {
 var $ele = $(this);
 console.log('$ele', $ele);
 pubSub.trigger(message, [$ele.data(dataAttr), $ele.val()]);
 });
 // pubSub把数据变化推送给所有与之绑定的页面元素
 pubSub.on(message, function (event, proName, newValue) {
 $('[data-' + dataAttr + '=' + proName + ']').each(function () {
 var $ele = $(this);
 if($ele.is('input, textarea, select')) {
 $ele.val(newValue);
 } else {
 $ele.html(newValue);
 }
 })
 });
 return pubSub;
}
function User(uid) {
 var binder = new DataBinder(uid);
 var user = {
 attributes: {},
 set: function (attrName, val) {
 this.attributes[attrName] = val;
 binder.trigger(uid + ':change', [attrName, val, this]);
 },
 get: function (attrName) {
 return this.attributes[attrName];
 },
 _binder: binder
 }
 return user;
}

调用的时候,用uid与之关联。

JavaScript Code

var user = new User('user');
$('#btnSet').bind('click', function (event) {
 user.set('name', 'Liuyuan211');
});

Html

<div class="item">
 <label>用户名:</label><input type="text" data-bind-user="name" /><span data-bind-user="name"></span>
</div>
<div class="item">
 <input type="button" id="btnSet" value="Set" />
</div>

该例子中,uid就是 data-bind-user="name" 中的 user ,绑定的页面元素会自动与user对应的属性关联。

题外话

如果项目中需要使用的数据绑定功能更复杂,knockout.js 库也是一个不错的选择

希望本文能帮助到您!

点赞+转发,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓-_-)

关注 {我},享受文章首发体验!

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接:http://eux.baidu.com/blog/fe/use-jquery-to-achieve-a-simple-data-binding

作者:西瓜痞



Tags:jQuery   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
本文将详细解读JavaScript、ajax、jQuery是什么?他们可以实现什么?1、JavaScript定义:javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开...【详细内容】
2020-04-29   jQuery  点击:(3)  评论:(0)  加入收藏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text...【详细内容】
2019-12-09   jQuery  点击:(39)  评论:(0)  加入收藏
jQuery网页视频在线播放器代码特效说明:一款jQuery网页视频在线播放器代码免费下载,该播放器插件基于HTML5自带标签video制作,优化样式,使得各主流浏览器实现统一播放界面。(兼...【详细内容】
2019-10-29   jQuery  点击:(53)  评论:(0)  加入收藏
一、ajax的简介Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.同步是指:发送方发出数据后,...【详细内容】
2019-09-24   jQuery  点击:(26)  评论:(0)  加入收藏
jquery获取当前元素的位置,并且是相对于文档的位置。我们可以使用jQuery offset()方法来实现。offset()方法仅适用于可见元素。 下面我们结合简单的代码,给大家介绍jquery获...【详细内容】
2019-09-18   jQuery  点击:(104)  评论:(0)  加入收藏
jquery删除样式属性,如删除指定a标签中的href属性,我们可以通过removeAttr()方法来实现。removeAttr() 方法表示从被选元素中移除属性。 下面我们结合简单的代码示例,给大家介...【详细内容】
2019-09-18   jQuery  点击:(65)  评论:(0)  加入收藏
平时在使用jQuery进行AJAX操作的时候,新生成的元素事件会失效,有时候不得不重新绑定一下事件,但是这样做很麻烦。例如评论分页后对评论内容的JS验证会失效等。在jQuery1.3之前...【详细内容】
2019-09-09   jQuery  点击:(30)  评论:(0)  加入收藏
此文适合零基础、初学者阅读。相信零基础的你看完,将对web前端有一个深刻的认识,对你的学习会有很大帮助。1、JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开...【详细内容】
2019-09-04   jQuery  点击:(44)  评论:(0)  加入收藏
导语在软件开发中,MVC或者MVVM是经常被用到的设计模式。在web前端开发中,之前我们需要自己写许多代码来完成这项功能。而现在有许多优秀的类库可以帮我们实现这个功能。许多优...【详细内容】
2019-09-04   jQuery  点击:(97)  评论:(0)  加入收藏
//1.禁止右键点击$(document).ready(function(){$(document).bind("contextmenu",function(e){returnfalse;});});//2.隐藏搜索文本框文字Hidewhenclickedinthesearchfield...【详细内容】
2019-07-23   jQuery  点击:(74)  评论:(0)  加入收藏
angularjs简单介绍和特点首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的s...【详细内容】
2019-07-16   jQuery  点击:(164)  评论:(0)  加入收藏
jquery可以被视为Web开发的脊梁骨,jquery是一个快速简洁的javascript库,它简化了HTML文档、事件处理、动画制作和Ajax交互,以实现快速的Web开发。 jquery插件通过使Web应用程序...【详细内容】
2019-07-10   jQuery  点击:(139)  评论:(0)  加入收藏
这篇文章主要介绍了从如何写JQuery插件,需要注意的事项,还有必须要做的步骤,看过这个文章相信你会明白如何写好一个JQuery插件。普及JQuery知识知识1:用JQuery写插件时,核心的方...【详细内容】
2019-07-09   jQuery  点击:(71)  评论:(0)  加入收藏
1. 禁止右键点击$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; });});2. 隐藏搜索文本框文字Hide when clicked in the searc...【详细内容】
2019-06-27   jQuery  点击:(85)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条