Skip to content

Instantly share code, notes, and snippets.

View KalpasWang's full-sized avatar

Kalpas Wang KalpasWang

6 followers · 56 following
View GitHub Profile
@KalpasWang
KalpasWang / observer-game.html
Created December 26, 2019 15:30
觀察者模式範例2–按鍵遊戲
<!DOCTYPE html>
<!-- saved from url=(0051)http://www.jspatterns.com/book/7/observer-game.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Keypress challenge</title>
<style>
#results {text-align: center; font-size: 36px;}
strong {color: blue;}
</style>
</head>
<body cz-shortcut-listen="true">
@KalpasWang
KalpasWang / observer.html
Created December 26, 2019 15:26
觀察者模式範例1–訂閱雜誌
<!DOCTYPE html>
<!-- saved from url=(0046)http://www.jspatterns.com/book/7/observer.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Observer</title>
</head>
<body cz-shortcut-listen="true">
<script>
"use strict";
@KalpasWang
KalpasWang / mediator.html
Created December 26, 2019 15:16
中介者模式
<!DOCTYPE html>
<!-- saved from url=(0046)http://www.jspatterns.com/book/7/mediator.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mediator pattern</title>
<style>
#results {text-align: center; font-size: 100px;}
strong {color: blue;}
</style>
</head>
<body cz-shortcut-listen="true">
@KalpasWang
KalpasWang / proxy.html
Created December 26, 2019 15:07
代理模式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0043)http://www.jspatterns.com/book/7/proxy.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dave Matthews vids</title>
<style>
img {float: left; padding-right: 7px;}
div {padding: 7px; border: 1px solid #ccc; background: #eee; width: 400px;}
h2 {margin: 0;}
span {text-decoration: underline; cursor: pointer;}
@KalpasWang
KalpasWang / strategy.js
Created December 19, 2019 15:23
策略模式
/* Title: Strategy
Description: allows one of a family of algorithms to be selected on-the-fly at runtime
*/
// 用法
var data = {
first_name: "Super",
last_name: "Man",
age: "unknown",
@KalpasWang
KalpasWang / decorator1.js
Last active December 19, 2019 15:16
裝飾者模式
// 有個Sale物件代表一筆銷售，呼叫`Sale.getPrice()`取得價格，額外的功能可以用`Sale.decorate()`附加至物件上
// 用法
var sale = new Sale(100); // 售價是100
sale.decorate('fedtax'); // 加上聯邦稅//"$112.88元
sale sale.decorate('quebec'); // 再加上魅北克省稅
sale.decorate('money'); // 格式化成金額
sale.getPrice(); // "$112.88"
sale = new Sale(100); // 售價是100元
sale.decorate('fedtax'); // 加上聯邦稅
@KalpasWang
KalpasWang / iterator.js
Created December 19, 2019 14:58
迭代器模式
var element;
while (element = agg.next()) {
// do something with the element
console.log(element);
}
// use hasNext()
while (agg.hasNext()) {
// do something with the next element...
@KalpasWang
KalpasWang / factory.js
Created November 14, 2019 06:49
工廠模式
var corolla = CarMaker.factory('Compact');
var solstice = CarMaker.factory('Convertible');
var cherokee = CarMaker.factory('SUV');
corolla.drive(); // "Vroom , I have 4 doors"
soIstice.drive(); // "Vroom , I have 2 doors"
cherokee.drive(); // "Vroom , I have 17 doors"
// 父建構式
function CarMaker(){}
@KalpasWang
KalpasWang / singleton1.js
Last active December 17, 2019 15:27
單例模式
// 儲存在靜態屬性中的實體
function Universe() {
// do we have an existing instance?
if (typeof Universe.instance === 'object') {
return Universe.instance;
}
// proceed as normal
this.start_time = 0;