響應式編程與數據驅動概覽
什麼是響應式編程：
響應式編程：(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裏面的視圖會得到響應發生變化
這就是響應式與數據驅動的魅力。
最後效果
歡迎大家評論轉發，轉發請註明出處。