前言

本次探索的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. Apache rewrite

    Apache rewrite mod_rewrite简介和配置 实URL跳转隐藏真实地址 拟目录 域名跳转 防止盗链 Apache配置支持httpd.conf配置.htaccess配置 启用rewri ...

  2. Spring Autowired 注入失败总是Null

    报错:NullPointerException 分析:错误原因是注入失败? <context:annotation-config/> <context:component-scan ...

  3. HTML5 标签audio添加网页背景音乐代码

    <head> <meta http-equiv="Content-Type" name="viewport" content="wi ...

  4. Jquery和其他库（$的好处）

    ---很多时候我们的页面 会使用很多的 javascript库 ---而这个时候  jQuery这款重点在满足社区用户的需求的工具  做好了让jQuery在页面上与其他库和平共处的准备 凭借名副其实的 ...

  5. Spark 自定义累加变量(Accmulator)AccumulatorParam

    1.创建一个累加变量 public <T> Accumulator<T> accumulator(T initialValue, AccumulatorParam<T&g ...

  6. 使用tungsten将mysql的数据同步到hadoop

    背景 线上有很多的数据库在运行,后台需要一个分析用户行为的数据仓库.目前比较流行的是mysql和hadoop平台. 现在的问题是,如何将线上的mysql数据实时的同步到hadoop中,以供分析.这篇文 ...

  7. UI测试测试分析

    解析:jQuery easyUI是基于jQuery框架在使用之前应该先引入jquery框架否则jQuery easyUI 将失效故D错误 解析: JQuery UI下的menu插件的使用,menu提供 ...

  8. chrome浏览器 模拟访问移动端

    谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的[开始]-->[运行]中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页: 谷歌Android ...

  9. rownum和rowid伪列

    select row employee_id,last name,salary from employees; select row employee_id,last name,salary from ...

  10. 【jmeter】接口稳定性测试

    1.创建进行测试的脚本 2.场景设置 线程组设置并发用户数30 在启动1s,30并发用户全部启动 循环设置为永远 采用调度器:有两种工作方式 1.设置启动和结束时间 2.设置持续时间,我设置的是60s ...