Skip to content

Instantly share code, notes, and snippets.

@shigeki

shigeki/observer4.html

Created December 5, 2012 22:27
Show Gist options
  • Save shigeki/4220075 to your computer and use it in GitHub Desktop.
Save shigeki/4220075 to your computer and use it in GitHub Desktop.
Download ZIP
Object.observer() デモ４
Raw
observer4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Object.observer() demo4</title>
<style>
table, td, th {
border: 2px #000000 solid;
}
</style>
<script src="observer4.js"></script>
</head>
<body>
<div id="event"><div>Event Code</div>
<pre>
obj4.seen = new Date(2013, 0, 1, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 2, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 3, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 4, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 5, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 6, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 7, 0, 0, 0); // 時間更新イベント
</pre>
<div id="seen"></div>
<div id="results"></div>
</body>
</html>
Raw
observer4.js
window.addEventListener('DOMContentLoaded',function() {
if (!Object.observe) {
alert('Object.observe not supported in your browser. Please use Chrome Dev Channel and enable Experimental JavaScript');
return;
}
var obj4 = {_time: new Date(0)};
var notifier = Object.getNotifier(obj4);
Object.defineProperties(obj4, {
_time: {
enumerable: false,
configrable: false
},
seen: {
set: function(val) {
var notifier = Object.getNotifier(this);
notifier.notify({
type: 'time_updated', // 時間更新イベントの定義
name: 'seen',
oldValue: this._time
});
this._time = val;
},
get: function() {
return this._time;
}
}
});
Object.observe(obj4, output);
obj4.seen = new Date(2013, 0, 1, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 2, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 3, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 4, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 5, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 6, 0, 0, 0); // 時間更新イベント
Object.deliverChangeRecords(output); // 次のターン
obj4.seen = new Date(2013, 0, 7, 0, 0, 0); // 時間更新イベント
function output (changes) {
var results = document.getElementById('results');
var table = document.createElement('table');
results.appendChild(table);
var caption = document.createElement('caption');
caption.innerText = 'Observed Events List';
table.appendChild(caption);
var thead = document.createElement('thead');
thead.innerHTML = '<tr><th>index</th><th>type</th><th>name</th><th>oldValue</th><th>currentValue</th></tr>';
table.appendChild(thead);
changes.forEach(function(change, i) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + i + '</td><td>' + change.type + '</td><td>' + change.name + '</td><td>' + change.oldValue + '</td><td>' + change.object[change.name] + '</td>';
table.appendChild(tr);
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment