响应式编程与数据驱动概览
什么是响应式编程：
响应式编程：(Reactive Programming 或称反应式编程)是一种流行的编程方法，编写代码是基于对变化的反应。
响应式编程的优点：
执行的代码和执行的线程是分开的。这种方式在服务端的架构里面有很大的意义，只保留一个线程处理程序进程层面的代码，跟Node.js很相似。如果这个线程被阻塞的话，那整个服务器就不会再处理其他请求了。因此，在JavaScript中，每个调用在一开始的时候就是异步执行，在任何情况下都可以通过响应式的API或者其他有用的抽象方式，来解决回调地狱的问题。
数据驱动
数据驱动：是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。相比较传统的前端开发，如 jQuery 前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，所有的逻辑都是对数据的修改，而不用触碰 DOM，这样代码也利于维护。
原生js实现响应式，数据驱动
实现原理及思路
利用发布订阅模式，建立一个订阅器模型，写一个劫持方法，加上观察者模式，利用 js 的Object.defineProperty方法，劫持当前数据，观察到数据发生了变化之后，使用set去改变数据，被订阅的视图相对应的去改变。
第一步：建立订阅器模型
// 订阅器模型
var Dep = {
clientList: {},
listen: function (key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = [];
}
this.clientList[key].push(fn);
},
trigger: function () {
var key = Array.prototype.shift.call(arguments),
fns = this.clientList[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
}
};
建立劫持方法
// 劫持方法
var dataHijack = function ({ data, tag, datakey, selector }) {
var value = '',
el = document.querySelector(selector);
// 数据劫持
Object.defineProperty(data, datakey, {
get: function () {
console.log('我获取到值了');
return value;
},
set: function (newValue) {
console.log('我设置值了');
value = newValue;
Dep.trigger(tag, newValue);
}
});
// 绑定观察者
Dep.listen(tag, function (text) {
el.innerHTML = text;
});
}
调用
<!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>demo</title>
</head>
<body>
<div id="app">
订阅视图-1：<span class="box-1"></span>
订阅视图-2：<span class="box-2"></span>
</div>
<script src="index.js"></script>
<script>
// 数据
var dataObj = {};
// 数据劫持
dataHijack({
data: dataObj,
tag: 'view-1',
datakey: 'one',
selector: '.box-1'
});
dataHijack({
data: dataObj,
tag: 'view-2',
datakey: 'two',
selector: '.box-2'
});
// 初始化赋值
dataObj.one = 'one';
dataObj.two = 'two';
</script>
</body>
</html>
响应式效果展示
操作说明
蓝色框是取值，红色框是设置值。
直接在控制台修改，html里面的视图会得到响应发生变化
这就是响应式与数据驱动的魅力。
最后效果
欢迎大家评论转发，转发请注明出处。