前言

本次探索的demo是基于jquery写的，毕竟jquery提供了强大的选择器，用惯了就离不开它了！本次探索只实现了文本的双向绑定。

View-Model

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

Model-View

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

上我的demo

<!DOCTYPE html>
<html lang="en" id = 'app'>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="app1">
    <input type="text" swq-model="name">
    <input type="text" swq-model="age">
    <div>name:<span swq-bind="name"></span></div>
    <div>age:<span swq-bind="age"></span></div>
</div>
<div id="app2">
    <input type="text" swq-model="name">
    <input type="text" swq-model="age">
    <div>name:<span swq-bind="name"></span></div>
    <div>age:<span swq-bind="age"></span></div>
</div>
<script>
    function Swq(obj){//obj为new一个实例时传入的参数对象
        var that = this;
        var app = $(obj.ele);
//        _data是需要双向绑定的所有数据
        var _data = obj.data;
//        遍历劫持,并初始化set值，并初始化绑定事件
        init(_data);
//       劫持改写object的get和set方法
        function changeObject(obj,attr){
            Object.defineProperty(obj,attr,{
                //劫持到set方法
                set : function(newValue){
                    _data[attr] = newValue;
//            实现model-view的同步
                    var $target = app.find('[swq-bind = "'+attr+'"],[swq-model = "'+attr+'"]');
                    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  _data[attr];
                }
            });
        }
//        初始化
        function init(obj){
            for(var o in obj){
                changeObject(that,o);
                that[o] = that[o];
                app.find('[swq-model]').on('input',function(){
                    var attr = $(this).attr('swq-model');
                    that[attr] = $(this).val();
                })
            }
        }
    }
    var swq1 = new Swq({
        ele : '#app1',
        data : {
            name : 'swq1',
            age : 24
        }
    })
    var swq2 = new Swq({
        ele : '#app2',
        data : {
            name : 'swq2',
            age : 25
        }
    })
</script>

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就是获取属性时底层调用的方法因为我们劫持了这两个底层方法，我们可以做我们想做的事，但是同时我们也破坏了它本身的设置和获取功能

结言

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

探索模拟angular的双向绑定的更多相关文章

  1. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  2. angular 数据双向绑定的终极奥义

    1.ng-app: 是ng的入口,表示当前元素的所有指令都会被angular管理,让anguar认识这段代码,告诉angular要去管理下面的代码:同时angular执行这段代码的时候会在内部开辟一块 ...

  3. Angular js 双向绑定时字符串的转换成 数字类型的问题

    问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <scrip ...

  4. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  5. MVVM 框架解析之双向绑定

    更好的阅读体验,点击 原文地址 MVVM 框架 近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移.在传统的 MVC 下,当前前端和后端发生数据交互后会刷新整个页面,从而 ...

  6. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

  7. 微信小程序双向绑定

    欢迎加入前端交流群交流知识获取视频资料:749539640 vue.angular的双向绑定如下示例: <div> <input type="text" [(ng ...

  8. js mvvm:闲来无事，实现一个只具最基本数据双向绑定的mvvm

    近期项目内用knockoutjs. 想模拟实现数据双向绑定的基本功能. 只具有最基本的功能,且很多细节未曾考虑,也未优化精简. 能想到的缺少的模块 1事件监听,自定义访问器事件 2模版 3父子级 编码 ...

  9. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

随机推荐

  1. hdu 2489（枚举 + 最小生成树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2489 思路:由于N, M的范围比较少,直接枚举所有的可能情况,然后求MST判断即可. #include ...

  2. 借鉴dubbo实现自定义缓存

    自定义缓存一般基于ConcurrentMap实现,实现缓存需要注意的点是缓存容器对象 本身依赖于 static final去存储对象,样例: ConcurrentMap<String, Gene ...

  3. POJ 2559 Largest Rectangle in a Histogram ——笛卡尔树

    [题目分析] 本来是单调栈的题目,用笛卡尔树可以快速的水过去. 把每一个矩阵看成一个二元组(出现的顺序,高度). 然后建造笛卡尔树. 神奇的发现,每一个节点的高度*该子树的大小,就是这一块最大的子矩阵 ...

  4. System.Windows.Application.Current.Dispatcher.BeginInvoke

    System.Windows.Application.Current.Dispatcher.BeginInvoke(new Action(() =>                        ...

  5. LightOJ1126 Building Twin Towers（DP）

    题目 Source http://www.lightoj.com/volume_showproblem.php?problem=1126 Description Professor Sofdor Al ...

  6. 【BO】安装BO服务器时，oracle服务端安装ora-12514和12541的问题

    今天在安装BO服务器,oracle数据库时,出现了这样一个问题,描述如下: 首先安装oracle10g Server 32位版.安装ORCL数据库之后,使用10gServer下的NET MANAGER ...

  7. jQuery的.bind()、.live()和.delegate()之间区别

    摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及 ...

  8. Python中的list和tuple

      list使用方括号[ ]表示: >>> classmates = ['Michael', 'Bob', 'Tracy'] >>> classmates ['Mi ...

  9. Hadoop生态圈

    1.Hadoop是什么? 适合大数据的分布式存储与计算平台 HDFS: Hadoop Distributed File System分布式文件系统 MapReduce:并行计算框架 解决的问题: HD ...

  10. Web 开发基础

    C/S:winform   WPF 数据是存在其它的电脑上或服务器上需要从服务器上下载相应的数据,在本地电脑上的客户端里进行加工 数据加工的过程是在用户电脑上执行,会对用户的电脑配置有所要求 B/S: ...