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

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

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. 消息中间件MQ

    消息中间件MQ:为方便预览,将思维导图上传至印象笔记,博客园直接上传图片受限于图片大小 https://app.yinxiang.com/shard/s24/nl/27262531/c3e137a5- ...

  2. Linux设备驱动程序 之 后备高速缓存

    设备驱动程序常常会反复的分配很多相同大小的内存块:内核实现了后备高速缓存来对此进行支持,以反复的使用这些相同的内存块: 创建 Linux内核的高速缓存管理有时被称为“slab分配器”:因此,相关函数和 ...

  3. Cesium中级教程6 - 3D Models 三维模型

    3D Models 三维模型 本教程将教您如何通过Primitive API转换.加载和使用Cesium中的三维模型.如果你是Cesium的新用户,可能需要阅读三维模型部分的(空间数据可视化教程)[h ...

  4. win10+mysql8.0安装

    一.下载 mysql8.0 windows zip包下载地址: https://dev.mysql.com/downloads/mysql/   1540951981(1).png 二.安装 1.解压 ...

  5. 五子棋AI教程

    https://github.com/Chuck-Ai/gobang 我写了非常详细的中文教程,教你如何一步步编写自己的五子棋AI: 五子棋AI设计教程第二版一:前言 五子棋AI设计教程第二版二:博弈 ...

  6. CentOS8安装Python3

    安装CentOS8 如果使用vmware player安装CentOS8,会出现如下选项 其中Software Selection默认为带有GUI版本,即安装完成之后,带有图形界面,我本人不太喜欢使用 ...

  7. Mysql表的横向拆分与纵向拆分

    表的拆分分为横向拆分(记录的拆分)和纵向拆分(字段的拆分).拆分表的目的:提高查询速度. 1.横向拆分 我们从一个案例去解释,情景是这样的:某某博客,有50W的博客量,有2w的用户,发现随着用户和博客 ...

  8. SQL-W3School-基础：SQL INSERT INTO 语句

    ylbtech-SQL-W3School-基础:SQL INSERT INTO 语句 1.返回顶部 1. INSERT INTO 语句 INSERT INTO 语句用于向表格中插入新的行. 语法 IN ...

  9. Linux-命令与文件的查询

    命令与文件的查询: 1.脚本文件名的查询: which(寻找执行文件) 命令格式: which [-a] command -a:列出查询到的所有命令的路径 2.文件名的查找: whereis.loca ...

  10. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_18-页面静态化-模板管理-GridFS研究-取文件

    需要创建mongoDB的配置类1 配置类里面主要创建.GridFSBucket这个对象.这个对象的作用就是用来打开一个下载流 在cms的微服务下,在config下创建MongoConfig.这个时候就 ...