前言

本次探索的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. PropertyMetadata和UIPropertyMetadata的一点区别

    使用UIPropertyMetadata写一个Brush的依赖属性. System.Windows.Application.Current.Dispatcher.BeginInvoke(new Act ...

  2. CodeForces 515B. Drazil and His Happy Friends

    B. Drazil and His Happy Friends time limit per test 2 seconds memory limit per test 256 megabytes in ...

  3. 2016 Multi-University Training Contest 1 F.PowMod

    PowMod Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Su ...

  4. java调用url接口

    很多简单的接口就是直接一个URl的形式, 怎么调用? HttpClient httpclient=null; PostMethod post=null; try{ httpclient = new H ...

  5. python 获取网页图片

    re为正则表达式模组 re.findall在字符串中查找所有匹配的模式,返回一个list urllib2提供了使用简单的url工具 urllib2.urlopen发送url请求,返回一个文件流 imp ...

  6. win7 hosts文件更改后无效，不生效问题

    通过记事本修改完hosts文件后,域名解析没有生效. 注:可以正常保存修改.服务dnsclient也已经启动 最后发现是hosts文件最后一行不是空行,回车后问题解决

  7. log4j.properties 使用

    一.参数意义说明 输出级别的种类 ERROR.WARN.INFO.DEBUG ERROR 为严重错误 主要是程序的错误 WARN 为一般警告,比如session丢失 INFO 为一般要显示的信息,比如 ...

  8. Strom的配置安装

    1.准备环境 1.1配置列表 配置项 版本信息 OS Red Hat   Enterprise Linux Server release 5.5 (Tikanga) IP 192.168.1.191/ ...

  9. 【转】最近公共祖先（LCA）

    基本概念 LCA:树上的最近公共祖先,对于有根树T的两个结点u.v,最近公共祖先LCA(T,u,v)表示一个结点x,满足x是u.v的祖先且x的深度尽可能大. RMQ:区间最小值查询问题.对于长度为n的 ...

  10. 不安装Oracle客户端使用PLSQL连接Oracle数据库的方法

    1,下载PL\SQL http://dl8.cr173.com/soft1/PLSQLDeveloper10_ha.zip(这个是我下载的,带破解和汉化); 2,下载完后傻瓜式安装 ,这里说下,1是P ...