位置: 编程技术 - 正文

实现非常简单的js双向数据绑定(实现非常简单的英文)

编辑:rootadmin

推荐整理分享实现非常简单的js双向数据绑定(实现非常简单的英文),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:实现非常简单的英语,实现非常简单的成语,最简单的也是最难实现的,很简单就能做到的成语,实现简单的promise,简单实在,实现非常简单的英语,实现非常简单的英语,内容如对您有帮助,希望把文章链接给更多的朋友!

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了。同样地,如果UI包含了一个输入用户姓名的输入框,输入一个新值就应该会使user对象的name属性做出相应的改变。

很多热门的JS框架客户端如Ember.js,Angular.js 或者KnockoutJS ,都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难,也不是说需要这些功能的时候,采用这些框架是唯一的选择。下面的想法实际上很基础,可以被认为是3步走计划:

我们需要一个UI元素和属性相互绑定的方法我们需要监视属性和UI元素的变化我们需要让所有绑定的对象和元素都能感知到变化

还是有很多方法能够实现上面的想法,有一个简单有效的方法就是使用PubSub模式。 这个思路很简单:我们使用数据特性来为HTML代码进行绑定,所有被绑定在一起的JavaScript对象和DOM元素都会订阅一个PubSub对象。只要JavaScript对象或者一个HTML输入元素监听到数据的变化时,就会触发绑定到PubSub对象上的事件,从而其他绑定的对象和元素都会做出相应的变化。

用jQuery做一个简单的实现

对于DOM事件的订阅和发布,用jQuery实现起来是非常简单的,接下来我们就是用Jquery比如下面:

对于上面这个实现来说,下面是一个User模型的最简单的实现方法:

实现非常简单的js双向数据绑定(实现非常简单的英文)

现在我们如果想要将User模型属性绑定到UI上,我们只需要将适合的数据特性绑定到对应的HTML元素上。

这样输入值会自动映射到user对象的name属性,反之

亦然。到此这个简单实现就完成啦!

不需要jQuery的实现

在如今的大多数项目里,可能已经使用了jQuery,因此上面的例子完全可以接受。不过,如果我们需要试着向另一个极端做,并且还删除对jQuery的依赖,那么怎么做呢?好,证实一下这么做并不难(尤其是在我们限制只支持IE 8及以上版本的情况下)。最终,我们必须使用一般的javascript实现一个定制的PubSub并且保留了DOM事件:

除了设置器里调用 jQuery的trigger方法外,模型可以保持一样。调用trigger方法将替代为调用我们定制的具有不同特征的PubSub的publish方法:

我们又一次通过一百行不到,又可维护的纯javascript完成了我们想要的结果。

以上内容就是关于js双向数据绑定的相关教程,希望对大家学习有所帮助。

基于JavaScript实现仿京东图片轮播效果 js实现仿京东图片轮播效果,当鼠标划在窗口上面停止计时器,鼠标离开窗口,开启计时器,鼠标划在页签上面,停止计时器,手动切换,通过定义计时

详解javascript数组去重问题 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,

js识别uc浏览器的代码 其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser')-1){alert("uc浏览器");}else{//不是uc浏览器执行的操作}如果想测试某个浏览器的特征可以通过如下方法

标签: 实现非常简单的英文

本文链接地址:https://www.jiuchutong.com/biancheng/383684.html 转载请保留说明!

上一篇:浅析javascript中的事件代理(细说javascript)

下一篇:基于JavaScript实现仿京东图片轮播效果(基于javascript的毕业设计)

  • 什么情况下个人资产会被冻结
  • 营业外收入影响所有者权益吗
  • 个人动产租赁税费怎么算
  • 企业缴纳的社保可以税前扣除吗
  • 装载机属于哪种车型
  • 委托境外研发费用不超过境内符合条件的研发费用
  • 承租人转租是否要交税
  • 账外房产按评估入账怎么交税
  • 进项较大航天信息怎么填
  • 老板垫付员工工资怎么写条子
  • 资产负债表越来越少了是怎么回事
  • 不能抵扣的进项税怎么做账
  • 金蝶软件怎么设置会计科目
  • 小规模纳税人如何转一般纳税人
  • 营改增后税金由哪几项费用组成
  • 一般纳税人开普票税率是多少
  • 小微企业免征增值税报表填写
  • 金融服务收入怎么算
  • 年报中包括处置资金吗
  • 支付青苗补偿费怎么做账
  • 进项税加计扣除申报表怎么填
  • 预缴附加税怎么做账
  • 去年收入少做了怎么调账
  • 如何进行网速测试设置
  • mac怎么切换输入方式
  • 工业会计做账的基本流程
  • 滴水观音的养殖方法选好浇水
  • ospf区域间路由和区域内路由
  • uniapp登陆检查
  • 在web页面中如果出现html语句
  • 增值税流转税是什么意思
  • 其他应付款如何调平
  • 几款常用的表单设计软件
  • python抓取淘宝店铺商品
  • 前端工程搭建
  • 小规模纳税人记账需要哪些账本
  • 应交税费下的科目设置
  • 营业外支出贷方在利润表怎么体现
  • 增值税的滞纳金税率
  • 公积金怎么推出工资
  • 税控盘 金税盘
  • 政府会计的会计要素有哪几个?会计要素之间的关系如何?
  • 收到费用报销单据应该怎么记账?
  • 残疾人保障金的工资总额怎么填
  • 融资租赁租金计算工具使用的主要过程
  • 外贸企业增值税申报
  • 个税手续费返还要交企业所得税吗
  • 借贷记账法的记账依据是什么
  • 销售公司扣款制度合法吗
  • 所得税弥补以前年度亏损是几年
  • 应付账款收不回发票该如何调整
  • 已使用的存货,计价方式不允许修改
  • 建账之前的业务怎么处理
  • 应付给股东的利润是什么科目
  • 外购货物会计分录
  • 个人开具的收据能税前扣除吗
  • 哪些行业不能开电子发票
  • 计提附加税减半征收会计分录
  • 业务收入和营业收入关系
  • 长期待摊费用什么时候结束摊销
  • Win10 Build 17035自制64位中国版十合一ISO镜像下载地址
  • ubuntu20.04.2安装
  • openssl/sha.h
  • centos划分分区
  • 如何限制网速不让孩子玩游戏
  • centos搭建服务器
  • 编写一个定时间隔为5ms的子程序
  • win8.1出现了一些问题
  • windows 10 build 21354
  • win8系统启动不了如何修复
  • opengl阴影平移
  • bootstrap不支持ie
  • unity3D游戏开发
  • unity3dwasd移动
  • 学习雷锋好榜样
  • linux中scp命令和scp命令用法大全
  • node.js的内置模块
  • js数组用法
  • CLASS_CONFUSION JS混淆 全源码
  • 巾帼文明岗主题内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设