js 超浓缩 双向绑定
绑定确实是个有趣的话题。
现在我的绑定器有了不少的功能
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 超浓缩 双向绑定的更多相关文章
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- [JS] 数据双向绑定原理
通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title" ...
- Vue.js 关于双向绑定的一些实现细节
Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的. 当把一个普通 Javascript 对象传给 Vue 实例来作 ...
- Vue2.0实现双向绑定的原理
一.几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input.textare等)添加了change(in ...
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- way.js - 轻量级、持久化的双向绑定JS库
AngularJS的双向绑定一直为人称道,但使用AngularJS需要对页面组件化,学习成本还是很高的. 本文源自 https://github.com/gwendall/way.js 边学边译. 使 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
随机推荐
- php中strlen()和mb_strlen()函数
php中strlen()和mb_strlen()函数 一.总结 一句话总结: mb_strlen()函数 的作用是 通过不同的编码计算字符串的长度: 比如 echo mb_strlen('中文a字1符 ...
- 北大ACM - POJ试题分类
1.入门水题 可用于练手与增强自信 POJ-1003POJ-1004 POJ-1005 POJ-1207 POJ-3299 POJ-2159 POJ-1083POJ-3094 2.初级 2.1. 基本 ...
- SQL-W3School-基础：SQL UPDATE 语句
ylbtech-SQL-W3School-基础:SQL UPDATE 语句 1.返回顶部 1. Update 语句 Update 语句用于修改表中的数据. 语法: UPDATE 表名称 SET 列名称 ...
- Vue插件编写、用法详解（附demo）
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- Linux Shell列出网络中所有的活跃主机
因为的的网段是 192.168.1.0/24 , 所以我只需遍历 192.168.1.1 到 192.168.1.255 之间的所有ip然后进行 ping 就可以了: test.sh: #!/bin/ ...
- Java工程师学习指南第7部分：重新学习MySQL与Redis
本文整理了微信公众号[Java技术江湖]发表和转载过的Mysql和Redis相关优质文章,想看到更多Java技术文章,就赶紧关注本公众号吧吧. 大白话说说mysql 面试官:给我说说你平时是如何优化M ...
- 简单谈谈java中匿名内部类构造函数?
先看看下面的代码能不能编译通过: public static void main(String[] args) {List l1 = new ArrayList();List l2 = new Arr ...
- CG-CTF 南邮 综合题2
个人网站 http://www.wjlshare.tk 0x00前言 主要考了三块 第一块是文件包含获取源码 第二块是通过sql绕过注入获取密码 第三块是三参数回调后门的利用 做这题的时候结合了别人的 ...
- leetcode907 Sum of Subarray Minimums
思路: 对于每个数字A[i],使用单调栈找到A[i]作为最小值的所有区间数量,相乘并累加结果.时间复杂度O(n). 实现: class Solution { public: int sumSubarr ...
- 使用tensorflow训练SSD（一）：相关环境的配置
在使用TensorFlow进行目标检测时,首先需要下载tensorflow object detection API模型,该模型的下载地址为https://github.com/tensorflow/ ...