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

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

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. YouTube 网站的架构演进——阅读心得

    基础平台 Apache Python Linux(SuSe) MySQL psyco,一个动态的Python到C的编译器 lighttpd代替Apache做视频播放 状态 支持每天超过5亿的视频点击量 ...

  2. arcgis python 删除一个数据库所有数据

    # -*- coding: cp936 -*- import xlrd # must init xlrd import arcpy import os def main(): arcpy.env.wo ...

  3. 重学C语言

    重学C语言 #include <stdio.h> int main() { ; ; printf("I am %d year old.\n",age); printf( ...

  4. Vue开发工具VS Code与调试

    vscode安装 进入vscode官网(https://code.visualstudio.com/Download)vscode插件安装进入vscode官网插件商店(https://marketpl ...

  5. 《maven实战》笔记（1）----maven的初识

    刚入职公司用maven进行项目管理,于是昨天下午开始看<maven实战>的pdf,感觉很好,作者写的很有条理. 下面是笔记,看书做笔记还是很有必要的,加强自己的总结. 什么是maven? ...

  6. Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in 解决方案:$sql = ...

  7. QString std::string 相互转 含中文

    std::string cstr;QString qstring; //QString str1 = " D:\\参考手册\\BIM\\osg\\build1.OSGB"; //从 ...

  8. ubuntu 安装百度云客户端

    下载地址:http://pan.baidu.com/download 如果没有安装alien,安装 luo@luo-ThinkPad-W540:~$sudo apt-get install alien ...

  9. 从0开始自己用C语言写个shell__01_整体的框架以及fork和exec族函数的理解

    最近才忙完了一个操作系统的作业,让我们用C语言实现一个Shell.总的来说,其实就是让我们 对系统调用有比较深的了解. 首先 介绍一下我的Shell 所实现的功能.1.运行可执行程序 即输入某个 标志 ...

  10. 基于Keras 的VGG16神经网络模型的Mnist数据集识别并使用GPU加速

    这段话放在前面:之前一种用的Pytorch,用着还挺爽,感觉挺方便的,但是在最近文献的时候,很多实验都是基于Google 的Keras的,所以抽空学了下Keras,学了之后才发现Keras相比Pyto ...