Skip to content

Instantly share code, notes, and snippets.

@mromanoff

mromanoff/index.html

Created August 12, 2018 06:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mromanoff/89d518f1daf08cd339b35d100b23e277 to your computer and use it in GitHub Desktop.
Save mromanoff/89d518f1daf08cd339b35d100b23e277 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/lesacov
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>JavaScript Reactivity</h1>
<script id="jsbin-javascript">
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var data = { price: 5, quantity: 2 };
var target = undefined,
total = undefined,
salesPrice = undefined;
var Dep = (function () {
function Dep() {
_classCallCheck(this, Dep);
this.subscribers = [];
}
_createClass(Dep, [{
key: 'depend',
value: function depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
}, {
key: 'notify',
value: function notify() {
this.subscribers.forEach(function (sub) {
return sub();
});
}
}]);
return Dep;
})();
Object.keys(data).forEach(function (key) {
var internalValue = data[key];
var dep = new Dep();
Object.defineProperty(data, key, {
get: function get() {
dep.depend(); // <-- remember the target we're running
return internalValue;
},
set: function set(newVal) {
internalValue = newVal;
dep.notify(); // <-- rerun saved targets
}
});
});
function watcher(myFunc) {
target = myFunc;
target();
target = null;
}
watcher(function () {
total = data.price * data.quantity;
});
watcher(function () {
salesPrice = data.price * 0.9;
});
console.log('total', total);
console.log('salesPrice', salesPrice);
data.price = 20;
console.log('total', total);
console.log('salesPrice', salesPrice);
data.quantity = 10;
console.log('total', total);
</script>
<script id="jsbin-source-javascript" type="text/javascript">let data = {price: 5, quantity: 2};
let target, total, salesPrice;
class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}
Object.keys(data).forEach(key => {
let internalValue = data[key];
const dep = new Dep();
Object.defineProperty(data, key, {
get() {
dep.depend(); // <-- remember the target we're running
return internalValue;
},
set(newVal) {
internalValue = newVal;
dep.notify(); // <-- rerun saved targets
},
});
});
function watcher(myFunc) {
target = myFunc;
target();
target = null;
}
watcher(() => {
total = data.price * data.quantity;
});
watcher(() => {
salesPrice = data.price * 0.9;
});
console.log('total', total);
console.log('salesPrice', salesPrice);
data.price = 20;
console.log('total', total);
console.log('salesPrice', salesPrice);
data.quantity = 10;
console.log('total', total);
</script></body>
</html>
Raw
jsbin.lesacov.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var data = { price: 5, quantity: 2 };
var target = undefined,
total = undefined,
salesPrice = undefined;
var Dep = (function () {
function Dep() {
_classCallCheck(this, Dep);
this.subscribers = [];
}
_createClass(Dep, [{
key: 'depend',
value: function depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
}, {
key: 'notify',
value: function notify() {
this.subscribers.forEach(function (sub) {
return sub();
});
}
}]);
return Dep;
})();
Object.keys(data).forEach(function (key) {
var internalValue = data[key];
var dep = new Dep();
Object.defineProperty(data, key, {
get: function get() {
dep.depend(); // <-- remember the target we're running
return internalValue;
},
set: function set(newVal) {
internalValue = newVal;
dep.notify(); // <-- rerun saved targets
}
});
});
function watcher(myFunc) {
target = myFunc;
target();
target = null;
}
watcher(function () {
total = data.price * data.quantity;
});
watcher(function () {
salesPrice = data.price * 0.9;
});
console.log('total', total);
console.log('salesPrice', salesPrice);
data.price = 20;
console.log('total', total);
console.log('salesPrice', salesPrice);
data.quantity = 10;
console.log('total', total);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment