前言

本次探索的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. [开源]用MQL4实现MD5加密

    本文转载自博客园:混沌的世界 原文地址:http://www.cnblogs.com/niniwzw/archive/2009/12/05/1617685.html 在用MQL4进行金融交易的时候,经 ...

  2. gulp自动化构建

    最近正在使用gulp去帮我自动化构建一些技术块,感觉很爽,所以把gulp操作步骤给写笔记,记录下来... 首先了解什么是gulp? 我的理解是一个工具并且自动化的,能帮你把一些前端技术的语法转换成当前 ...

  3. Apple Pay--iOS开发

    一.什么是Apple Pay? 1. 概念 Apple Pay,简单来说, 就是一种移动支付方式.通过Touch ID/ Passcode,用户可使用存储在iPhone 6, 6p等设备上的信用卡和借 ...

  4. SQL 执行进展优化

    聚集索引扫描 SELECT * FROM C_SY_Ownedstorm 聚集索引扫描比表扫描快 聚集索引扫描:发生于聚集表,也相当于全表扫描操作,但在针对聚集列的条件等操作时,效率会较好. 表扫描 ...

  5. iOS-Runtime知识点整理

    本文目录 1.Runtime简介 2.Runtime相关的头文件 3.技术点和应用场景 3_1.获取属性\成员变量列表 3_2.交换方法实现 3_3.类\对象的关联对象,假属性 3_4.动态添加方法, ...

  6. MVC入口程序 | 简单调用及实例化

    入口程序: 现在大多采用单一入口机制,单一入口就是指在一个web应用程序中,所有的请求都指向一个脚本文件.通俗点说就是一幢大楼只有一个大门入口可以进去... 目录: 建立一个控制器/模型/视图调用函数 ...

  7. php5.6+apache2.4环境配置

    Apache2.4 环境:https://www.microsoft.com/en-US/download/details.aspx?id=48145php5.6 环境:http://www.micr ...

  8. *HDU1598 并查集

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  9. 兼容IE浏览器的js浏览器全屏代码

    众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...

  10. javascript 判断为true false

    如果逻辑对象无初始值或者其值为 0.-0.null."".false.undefined 或者 NaN,那么对象的值为 false.否则,其值为 true(即使当自变量为字符串 & ...