angular双向绑定模拟探索


Posted in Javascript onDecember 26, 2016

前言
本次探索的demo是基于jquery写的,毕竟jquery提供了强大的选择器,用惯了就离不开它了!angular的双向绑定实在是有点精深,本次探索只实现了文本的双向绑定。

View-Model

先看效果:文本框输入内容,model层数据也同步过来了

angular双向绑定模拟探索

Model-View

先看效果:js改变model层数据,视图也立即随之变化

angular双向绑定模拟探索

上我的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的

结言

本人小菜对前端技术很感兴趣,有大神路过给点指点,我也可以关注下各位大神的博客,希望可以学到更多的东西!!!谢谢

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
js实现二级联动简单实例
Jan 11 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
Javascript中常用类型的格式化方法小结
Dec 26 #Javascript
Angular的自定义指令以及实例
Dec 26 #Javascript
如何提高javascript加载速度
Dec 26 #Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 #Javascript
javascript实现去除HTML标签的方法
Dec 26 #Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 #Javascript
You might like
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
森林防火标语
2014/06/23 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
营业用房租赁协议书
2014/11/26 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
立案决定书范文
2015/06/24 职场文书