前言

本次探索的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. Hadoop 大数据第一天

    大数据第一天 1.Hadoop生态系统 1.1 Hadoop v1.0 架构 MapReduce(用于数据计算) HDFS(用于存储数据) 1.2 Hadoop v2.0 架构 MapReduce(用 ...

  2. H5移动前端开发常用高能css3汇总

    1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强 html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-sele ...

  3. JSHint Options 翻译

    Enforcing options When set to true, these options will make JSHint produce more warnings about your ...

  4. 细读cow.osg

    细读cow.osg 转自:http://www.cnblogs.com/mumuliang/archive/2010/06/03/1873543.html 对,就是那只著名的奶牛. //Group节点 ...

  5. MongoDB命令及SQL语法对比

    mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...

  6. HDU1426 DFS

    Sudoku Killer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  7. 使用File类列出指定位置的文件信息，包含该路径子目录下的文件信息

    public class Test{ public static void main(String [] args) { File f=new File("d:"); File [ ...

  8. Myeclipse使用DB Browser连接数据库错误：OPTION SQL_SELECT_LIMIT=DEFAULT

    虽然使用Myeclipse,经过test driver可以使用, 但是不能够查询mysql数据库各个表的数据.  百度了下, 原来是驱动mysql的插件版本很低,重新下了个, 可以了. 下面是链接. ...

  9. QT的程序开机自启动方法

    /home/fa/.config/lxsession/LXDE/autostart文件最后添加脚本

  10. p4lang/switch make bm-switchsai 出现内存不足导致的Error

    报错如下: Compiling : bm::dc.cpp g++: internal compiler error: Killed (program cc1plus) Please submit a ...