位置: 编程技术 - 正文

实现非常简单的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的毕业设计)

  • 一般纳税人增值税怎么做账务处理
  • 协会会费如何做分录
  • 关税税收优惠记忆口诀
  • 增值税专用发票使用规定 最新
  • 增值税普通发票有什么用
  • 胶水开票开什么类目
  • 会议服务费怎么开
  • 酒店收取的赔偿费是什么
  • 买一赠一销售收入计算案例
  • 销售费用现金支付
  • 预计负债计提时调减还是调增
  • 汽车销售公司办公室周末上班吗知乎
  • 车辆保险可以开票吗
  • 含税金额怎么计算
  • 增值税纳税申报表怎么填
  • 详解劳务报酬个人所得税应该怎么计算?
  • 普票每季度开多少免税
  • 营改增后建筑安装发票
  • 收购粮食怎么做账
  • 找私人贴现怎么做账
  • 房屋装修费是否分摊到地下车位成本
  • 跨年得退货还用开负数发票吗?
  • 禁止局域网用户访问权限
  • Win10升级win11是激活状态吗?
  • 逆流交易合并报表调整少数损益
  • 小企业原材料包括
  • 税务自查补缴税款的申报表在哪里找
  • php img
  • win10如何设置开机声音
  • 公司付物业费没开发票
  • php正则函数内容匹配
  • 企业类型变更是什么意思
  • kafka图形化界面
  • vue全家桶插件有哪些
  • 小规模纳税人是否可以开专票
  • 收到企业所得税退税会计分录怎么做
  • 阳光穿透云层是什么效应
  • 企业缴纳残保金规定
  • Request获取请求数据中文乱码问题
  • php代码生成
  • RLHF:基于人类反馈(Human Feedback)对语言模型进行强化学习【Reinforcement Learning from Human Feedback】
  • 我们现在收到的礼物
  • 车辆购置税收优惠
  • 好用的测试工具
  • 苹果macos安装
  • 房地产企业取得土地的契税如何记账
  • 失控发票进项税额结转成本
  • 税金及附加多计提了怎么办
  • 购买的固定资产退货怎么做账
  • 物业费的会计处理
  • 变更印鉴单位公函格式
  • 外经证核销反馈表写错了怎么办
  • 企业如何降低存款利息
  • 公司没开户需要做账吗怎么做
  • 国库单一账户体系包括哪些账户
  • SQL语句查询数据库账号和权限
  • mysql中存储引擎
  • bios怎么恢复出厂设置有什么后果?
  • windows命令行使用
  • 设置自动清理缓存电脑
  • centos开启telnet服务
  • 拒绝远程操作
  • mac怎么格式
  • mediabrowser.exe是什么
  • qqlogin.exe是什么进程 qqlogin.exe应用程序错误解决办法
  • javascript基于什么的语言
  • undefined reference to pthread
  • vue中拦截器
  • js设置滚动条滚到底部
  • javascript含义
  • jquery配合.NET实现点击指定绑定数据并且能够一键下载
  • nodejs中间层的作用有哪些
  • android拖拽
  • 发票与报销内容不一样
  • 厂房转让的土地税怎么算
  • 地税局刚进去工资多少
  • 江西省国家税务局工作人员名单
  • 联通怎么在网上营业厅更改套餐
  • 地方税务局怎么样
  • 贵州税务申报如何网上申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设