绑定确实是个有趣的话题。

现在我的绑定器有了不少的功能

1. 附着在Object对象上，一切以对象为中心

2. 与页面元素进行双向绑定

3. 与任意对象绑定，主要是应用在绑定到页面元素的一些属性上，比如style，当然也可以绑定到任意用户自定义的对象上

4. 可以绑定到方法，让对象具有AddEventListener类似的功能，这应该是终极的扩展功能了

5. 支持selector，function，object 的参数写法

6. 默认绑定到value或者innerHTML属性上

Object.prototype.bind = function (key, obj, prop, event) {

    var that = this

    if (this[key] == undefined) this[key] = '';

    var bc = undefined;

    if (!this.__bc__) {

        this.__bc__ = {};

        Object.defineProperty(this, "__bc__", { enumerable: false });

    }

    if (!this.__bc__[key]) {

        this.__bc__[key] = [];

        this.__bc__[key].value = this[key]

        bc = this.__bc__[key];

        Object.defineProperty(this, key, {

            get: function () {

                return bc.value

            },

            set: function (value) {

                if (bc.value == value) return;

                bc.forEach(function (l) { l(value); })

                bc.value = value

            }

        })

    }

    bc = this.__bc__[key];

    if (prop == undefined) prop = "value";

    if (event == undefined) event = 'change';

    if (typeof obj == 'string') {

        var els = document.querySelectorAll(obj);

        function b(el, p) {

            if (el[p] == undefined) p = "innerHTML"

            bc.push(function (value) { el[p] = value; });

            if (el.addEventListener) {

                el.addEventListener(event, function (e) {

                    that[key] = el[p];

                })

            }

            el[p] = bc.value;

        }

        for (var i = 0; i < els.length; i++) {

            var el = els[i];

            b(el, prop)

        }

    } else if (typeof obj == 'function') {

        bc.push(obj);

        obj(bc.value);

    } else if (typeof obj == 'object') {

        var p = prop

        if (obj[p] == undefined) p = "innerHTML"

        bc.push(function (value) { obj[p] = value; })

        obj[p] = bc.value;

        if (obj.addEventListener) {

            obj.addEventListener(event, function (e) {

                that[key] = obj[p];

            })

        }

    } else {

        console.log("obj = " + obj + " 不是 [selector,function,element] 中的任何一种，绑定失败！")

    }

}

再来个简单的例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试项目</title>

    <script src="bind.js"></script>

</head>

<body>

    <h1 class="v1"></h1>

    <input class="v1" type="text" id="i1">

    <input type="text" id="i2">

    <script>

        var a = { value: 's', s: 'red' }

        a.bind('value', ".v1", 'value', 'input')

        a.bind('s', i1.style, 'background')

        a.bind('s', i2)

    </script>

</body>

</html>

js 超浓缩 双向绑定的更多相关文章

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

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

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

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

  3. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  4. [JS] 数据双向绑定原理

    通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...

  5. Vue.js 关于双向绑定的一些实现细节

    Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的. 当把一个普通 Javascript 对象传给 Vue 实例来作 ...

  6. Vue2.0实现双向绑定的原理

    一.几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input.textare等)添加了change(in ...

  7. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  8. way.js - 轻量级、持久化的双向绑定JS库

    AngularJS的双向绑定一直为人称道,但使用AngularJS需要对页面组件化,学习成本还是很高的. 本文源自 https://github.com/gwendall/way.js 边学边译. 使 ...

  9. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

随机推荐

  1. legend3---lavarel常用操作代码2

    legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...

  2. SQL-W3School-高级：SQL ALIAS（别名）

    ylbtech-SQL-W3School-高级:SQL ALIAS(别名) 1.返回顶部 1. 通过使用 SQL,可以为列名称和表名称指定别名(Alias). SQL Alias 表的 SQL Ali ...

  3. Swift 变量

    变量是一种使用方便的占位符,用于引用计算机内存地址. Swift 每个变量都指定了特定的类型,该类型决定了变量占用内存的大小,不同的数据类型也决定可存储值的范围. 包括整形Int.浮点数Double和 ...

  4. epoll简介 与 UDP server的实现

    Abstractepoll是Linux内核为处理大批量句柄而作了改进的poll,是Linux下多路复用IO接口select/poll的增强版本,它能显著减少程序在大量并发连接中只有少量活跃的情况下的系 ...

  5. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_05-vuejs研究-vuejs基础-v-text指令

    把js移到body 的下面 网速改慢一点 通过模拟网速慢的情况.刷新页面的时候会有闪烁的效果 速度快的情况下也会闪烁 ,只不过是不明显. 2.解决插值表达式闪烁问题,使用v-text v-text可以 ...

  6. 使用redisTemplate存储数据,出现\xAC\xED\x00\x05t\x00

    本文开发环境:SpringBoot+RedisTemplate 代码: /** * 缓存Map * * @param key * @param dataMap * @return */ @Overri ...

  7. css解决fixed布局不会出现滚动条的问题

  8. python中Requests的重试机制

    requests原生支持 import requests from requests.adapters import HTTPAdapter s = requests.Session() # 重试次数 ...

  9. Ubuntu 14.04安装vim8

    本文介绍两种方法安装 VIM8.1 方法一:GitHub下载源码手动安装 1.查看系统是否有安装vim:如果有,先删除 dpkg -l | grep vim 2.从git上下载 git clone h ...

  10. Spark + sbt + IDEA + HelloWorld + MacOS

    构建项目步骤 首先要安装好scala.sbt.spark,并且要知道对应的版本 sbt版本可以在sbt命令行中使用sbtVersion查看 spark-shell可以知晓机器上spark以及对应的sc ...