angular双向绑定模拟探索
前言
本次探索的demo是基于jquery写的，毕竟jquery提供了强大的选择器，用惯了就离不开它了！angular的双向绑定实在是有点精深，本次探索只实现了文本的双向绑定。
View-Model
先看效果：文本框输入内容,model层数据也同步过来了
Model-View
先看效果：js改变model层数据，视图也立即随之变化
上我的demo
<!DOCTYPE html>
<html lang="en" data-swq-app = 'app'>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" data-swq-model="name">
<input type="text" data-swq-model="age">
<div>name:<span data-swq-bind="name"></span></div>
<div>age:<span data-swq-bind="age"></span></div>
<script>
(function(window){
//模仿angular的双向绑定
//需要一个发布者，也就是angular里面的$scope的存在，这里我取我的大名swq，是个对象
//需要订阅者数据容器
var swqArray = []; //订阅者数据容器
var swqNamesArray = ['name','age']; //存放订阅者标识容器，这边写死，实际上肯定需要动态获取
window.swq ={
scanTag : function (){
var swqController = $('[data-swq-app]:first');
// view层需要和model层绑定的元素进行事件绑定
var allModelView = swqController.find('[data-swq-model]');
allModelView.each(function(){
$(this).on('keyup',function(event){
var targetBind = $(this).data('swqModel');
var value = $(this).val();
if(targetBind && targetBind.length > 0){
swq[targetBind] = value;
}
});
});
// model层需要劫持绑定的进行绑定
$.each(swqNamesArray,function(index,value){
notifyProperty(value);
})
}
};
//数据的变化需要反映到视图上，因此要监听到数据的变化，js原生的defineProperty给我们提供了监听的可能，劫持更改数据，思路有点类似前端路由的实现思路，我监听到你某个操作但是我不做你的功能，我自己定义该做的事
function notifyProperty(name){
Object.defineProperty(swq,name,{
//劫持到set方法
set : function(newValue){
swqArray[name] = newValue;
// 实现model-view的同步
var $target = $('[data-swq-bind = "'+name+'"],[data-swq-model = "'+name+'"]');
if($target){
$target.each(function(){
var tagName = $(this)[0].tagName.toLowerCase();
if(tagName == 'input' || tagName =='select' || tagName =='textarea'){
$(this).val(newValue)
}else{
$(this).text(newValue)
}
})
}
},
//劫持到get方法，因为get方法已经被劫持，所以比如我们劫持了swq.name，那么swq.name就没有值了，所以我们给它返回值，返回值是存在订阅者数据容器里面的
get : function(){
return swqArray[name];
}
});
}
})(window);
swq.scanTag();//初始化，进行双向绑定
// 尚未实现的功能 ;
// 1.动态获取需要进行双向绑定的name
// 2.只实现了text文本的绑定，对象的绑定需要递归
// 3.脏查询机制还未实现，就是我们某些js后增加的需要双向绑定的name，没办法进行双向绑定了
// 4.angular双花括号解析表达式未实现<br>// 5.感觉还差得远，哪位大神看到有成熟的demo记得给链接!!!
</script>
</body>
</html>
demo解读
核心其实就是js原生的defineProperty。在这之前，我们需要知道，我们在给某个对象添加和获取属性和方法时其实它底层是调用了set和get方法，比如obj.name="名字",这里是调用了set方法,obj.name这里是调用了get方法。
因此，我们可以劫持js的这两个底层方法
Object.defineProperty(obj,attribute,{set:function(newVlaue){//dosomething},get:function(){//dosomething}}）
obj是我们的model对象，attribute就是我们要劫持的需要双向绑定的name,set就是设置属性时底层调用的方法,get就是获取属性时底层调用的方法因为我们劫持了这两个底层方法，我们可以做我们想做的事，但是同时我们也破坏了它本身的设置和获取功能，因此我这里是把订阅者的数据都是存在一个数组里面的，我还声明了一个数组用来保存所有需要进行双向绑定的name，比较low的是我这边是写死的，实际情况下肯定是要动态获取所有需要双向绑定的name的
结言
本人小菜对前端技术很感兴趣，有大神路过给点指点，我也可以关注下各位大神的博客，希望可以学到更多的东西！！！谢谢
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
-
深入学习AngularJS中数据的双向绑定机制
Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入.AngularJS将会遍历DOM模
-
实例剖析AngularJS框架中数据的双向绑定运用
数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立起了文本输入框跟页面的双向绑定. 在这个语境里"双向"意味着如果view改变了属性值,model就会"看到"这个改变,而如果model改变了属性值,view也同样会"看到"这个改变.Angular.js 为你自动搭建好了这个机制.如果你好奇这具体是怎么实现的,请看我们之后推出的一篇文章,其中深入讨论了digest_loop 的运作. 要建立
-
理解Angular数据双向绑定
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> <span ng-bind="c
-
利用angular.copy取消变量的双向绑定与解析
首先我们来看看示例代码 <body ng-app="app"> <div ng-controller="CopyController"> <div> data: <input ng-model="user.data" /><br> user.data: {{user.data}} <br> user1.data: {{user1.data}} <br> <b
-
AngularJS学习笔记（三）数据双向绑定的简单实例
双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 数据-->视图 这里我们只演示有了数据以后,如何绑定到视图上. <!DOCTYPE html> <html ng-app="App"> <head> <script type="text/javascript" src="http://sandb
-
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是
-
AngularJS入门教程之双向绑定详解
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g
-
angular双向绑定模拟探索
前言 本次探索的demo是基于jquery写的,毕竟jquery提供了强大的选择器,用惯了就离不开它了!angular的双向绑定实在是有点精深,本次探索只实现了文本的双向绑定. View-Model 先看效果:文本框输入内容,model层数据也同步过来了 Model-View 先看效果:js改变model层数据,视图也立即随之变化 上我的demo <!DOCTYPE html> <html lang="en" data-swq-app = 'app'> <
-
解决angular双向绑定无效果,ng-model不能正常显示的问题
今天遇到了个问题,js代码中变量已经变化了,但是html页面中没有正常的显示出来. 代码如下: <input type="text" ng-model="paramValue" auto-focus> $scope.paramValue = param; 以上代码就会造成有时input框中无内容的情况,打断点显示$scope.paramValue是有值的,但是页面就是啥都显示不出来. 换成下边代码就没问题了: <input type="t
-
angular双向绑定详解
目录 双向绑定原理 ngModel 效果图 自定义双向绑定属性 组件-html 组件-ts 外部使用 效果图 总结 双向绑定原理 双向绑定将属性绑定与事件绑定结合在一起. Angular 的双向绑定语法是方括号和圆括号的组合 [()]. [] 进行属性绑定,() 进行事件绑定. 名称规则为 [输入名] + Change. 属性绑定(@Input-输入) - 设置特定的元素属性. 事件绑定(@Output-输出) - 侦听元素更改事件. 所以表单双向绑定中有 ngModel 和 ngModelCh
-
div实现自适应高度的textarea实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的
-
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的jQuery插件库,Ang
-
Angular JS数据的双向绑定详解及实例
Angular JS数据的双向绑定 接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="Count