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

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

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. Linux设备驱动程序 之 tasklet

    多数情况下,为了控制一个寻常的硬件设备,tasklet机制都是实现自己下半部的最佳选择:tasklet可以动态创建,使用方便,执行起来还算快: 声明tasklet tasklet既可以静态的创建,也可 ...

  2. 背包DP 方案数

    题目 1 P1832 A+B Problem(再升级) 题面描述 给定一个正整数n,求将其分解成若干个素数之和的方案总数. 题解 我们可以考虑背包DP实现 背包DP方案数板子题 f[ i ] = f[ ...

  3. 前端知识点回顾——Reactjs

    React.js 编写react需要安装的三个开发环境下的模块 babel 解析JSX react 实现ui用户界面 react-dom 处理dom JSX:在JavaScript里面写html代码( ...

  4. 在arm上执行某个程序时总是提示 not found是怎么回事?

    答: 使用ldd查看程序是否缺少库,如果缺少库,那么就从交叉编译工具链中获取并复制到arm的根文件系统中

  5. <JavaScript>谈谈javascript语法里一些难点问题（一）

    1)    引子 前不久我建立的技术群里一位MM问了一个这样的问题,她贴出的代码如下所示: var a = 1; function hehe() { window.alert(a); var a = ...

  6. Flask之加载静态资源

    Flask之加载静态资源 1.加载css样式 <link rel="stylesheet" href="{{ url_for('static',filename=' ...

  7. C++ STL 已序区间查找算法

    #include <iostream>#include <algorithm>#include <list>#include <functional># ...

  8. C# Winform中WebBrowser给网页中的input控件赋值/设置值

    订阅WebBrowser的DocumentCompleted事件,在里面写入 private void browser_DocumentCompleted(object sender, WebBrow ...

  9. C-Lodop提示Access violation at address ...in module 'CLodopPrint32.exe' write of address

    C-Lodop提示 Access violation at address ……in module 'CLodopPrint32.exe' write of address ……最近遇到了个问题,上午 ...

  10. 51nod1050 循环数组最大子段和

    思路: 分两种情况讨论. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ll sum[ ...