<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo</title>

    <script>

        function DataBinder( object_id ) {

            // Create a simple PubSub object

            var pubSub = {

                        callbacks: {},

                        on: function( msg, callback ) {

                            this.callbacks[ msg ] = this.callbacks[ msg ] || [];

                            this.callbacks[ msg ].push( callback );

                        },

                        publish: function( msg ) {

                            this.callbacks[ msg ] = this.callbacks[ msg ] || [];

                            for ( var i = 0, len = this.callbacks[ msg ].length; i < len; i++ ) {

                                this.callbacks[ msg ][ i ].apply( this, arguments );

                            }

                        }

                    },

                    data_attr = "data-bind-" + object_id,

                    message = object_id + ":input",

                    timeIn;

                    changeHandler = function( evt ) {

                        var target = evt.target || evt.srcElement, // IE8 compatibility

                                prop_name = target.getAttribute( data_attr );

                        if ( prop_name && prop_name !== "" ) {

                            clearTimeout(timeIn);

                            timeIn = setTimeout(function(){

                                pubSub.publish( message, prop_name, target.value );

                            },50);

                        }

                    };

            // Listen to change events and proxy to PubSub

            if ( document.addEventListener ) {

                document.addEventListener( "input", changeHandler, false );

            } else {

                // IE8 uses attachEvent instead of addEventListener

                document.attachEvent( "oninput", changeHandler );

            }

            // PubSub propagates changes to all bound elements

            pubSub.on( message, function( evt, prop_name, new_val ) {

                var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),

                        tag_name;

                for ( var i = 0, len = elements.length; i < len; i++ ) {

                    tag_name = elements[ i ].tagName.toLowerCase();

                    if ( tag_name === "input" || tag_name === "textarea" || tag_name === "select" ) {

                        elements[ i ].value = new_val;

                    } else {

                        elements[ i ].innerHTML = new_val;

                    }

                }

            });

            return pubSub;

        }

        function DBind( uid ) {

            var binder = new DataBinder( uid ),

            user = {

                // ...

                attributes: {},

                set: function( attr_name, val ) {

                    this.attributes[ attr_name ] = val;

                    // Use the `publish` method

                    binder.publish( uid + ":input", attr_name, val, this );

                },

                get: function( attr_name ) {

                    return this.attributes[ attr_name ];

                },

                _binder: binder

            };

            // Subscribe to the PubSub

            binder.on( uid + ":input", function( evt, attr_name, new_val, initiator ) {

                if ( initiator !== user ) {

                    user.set( attr_name, new_val );

                }

            });

            return user;

        }

    </script>

</head>

<body>

<input type="text" data-bind-1="name" />

<span data-bind-1="name"></span>

<script>

    var DBind = new DBind( 1 );

    DBind.set( "name", "黄奇" );

</script>

</body>

</html>

Js原生 双向数据绑定的更多相关文章

  1. 原生js实现双向数据绑定

    一.两个model之间的双向绑定 var o = { a: 0 } o.b = o.a + 1; console.log(o.a); // "0" console.log(o.b) ...

  2. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  3. js实现一个简单的响应式双向数据绑定

    一,基本原理 我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义. 我们首先定义一个函数: var obj = { }; ...

  4. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  5. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  6. JS 双向数据绑定、单项数据绑定

    简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  8. vue 双向数据绑定的实现学习（一）

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  9. javascript基础修炼(9)——MVVM中双向数据绑定的基本原理

    开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Page Appl ...

随机推荐

  1. HDU 4741 Save Labman No.004(计算几何)

    题目链接 抄的模版...mark一下. #include <iostream> #include <cstring> #include <cstdio> #incl ...

  2. 【Oracle】多次提交造成性能慢及处理方法

    [问题背景] 2013-08-02 为某地市做了1个脚本用于帮客户账户添加一个新的账本.犯了一个很二的错,存储过程如下(SQL记录用户以后查询),一晚上只执行了190W数据 脚本如下 数据库中总共有5 ...

  3. 【BZOJ4260】 Codechef REBXOR 可持久化Trie

    看到异或就去想前缀和(⊙o⊙) 这个就是正反做一遍最大异或和更新答案 最大异或就是很经典的可持久化Trie,从高到低贪心 WA: val&(1<<(base-1))得到的并不直接是 ...

  4. SDL实战，小游戏

    http://www.cppblog.com/sandy/archive/2005/12/28/2219.html sdl1教学 http://kelvmiao.info/sdl-tutorial-c ...

  5. 【android studio】解决android studio drawable新建项目时只有一个drawable目录的问题

    概述 android studio默认新建Module时,只新建一个drawable目录,并不会新建适配不同分辨率的drawable目录.但其实,这是可以设置的.有以下两种方法: 方法1 详细步骤 进 ...

  6. [CareerCup] 16.1 Thread and Process 线程和进程

    16.1 What's the difference between a thread and a process? 进程Process是程序执行时的一个实例.一个进程是被分配系统资源的独立单元,每个 ...

  7. android-数据存储之远程服务器存储

    一.如何编码实现客户端与服务器端的交互 <一>JDK内置原生API HttpUrlConnection <二>Android内置的包装API HttpClient浏览器 < ...

  8. mysql 的2个关于事务和安全性的参数

    innodb_flush_log_at_trx_commit:(mysql写事物日志的方式) 0 log buffer 会每秒写入到日志文件中,并刷新到磁盘  (提交方式与事物无关,性能最好) 1 事 ...

  9. Python的缩进

    关于python的缩进:如果要确认一个函数包含哪些内容,java或php可以使用大括号将函数内容包含起来,但python里没有那样的大括号,python靠“缩进”(四个空格)来确定语句块的始末. 这是 ...

  10. oracle 学习摘录

    (1)oracle插入回车换行符 SQL>insert into A t(t.name) values('aaaaa'||chr(10)||chr(13)||'ccccc'); 已创建 1 行. ...