-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path技術簡介.html
101 lines (101 loc) · 37.4 KB
/
技術簡介.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- common.css -->
<style>* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !important;}blockquote {margin: 0;padding: 0 15px;color: #777;border-left: 4px solid #ddd;}hr {background-color: #ddd;border: 0;height: 1px;margin: 15px 0;}code {font-family: Menlo, Consolas, 'Ubuntu Mono', Monaco, 'source-code-pro', monospace;line-height: 1.4;margin: 0;padding: 0.2em 0;font-size: 85%;background-color: rgba(0,0,0,0.04);border-radius: 3px;}pre > code {margin: 0;padding: 0;font-size: 100%;word-break: normal;background: transparent;border: 0;}ol {list-style-type: decimal;}ol ol, ul ol {list-style-type: lower-latin;}ol ol ol, ul ol ol, ul ul ol, ol ul ol {list-style-type: lower-roman;}table {border-spacing: 0;border-collapse: collapse;margin-top: 0;margin-bottom: 16px;}table th {font-weight: bold;}table th, table td {padding: 6px 13px;border: 1px solid #ddd;}table tr {border-top: 1px solid #ccc;}table tr:nth-child(even) {background-color: #f8f8f8;}input[type="checkbox"] {cursor: default;margin-right: 0.5em;font-size: 13px;}.task-list-item {list-style-type: none;}.task-list-item+.task-list-item {margin-top: 3px;}.task-list-item input {float: left;margin: 0.3em 1em 0.25em -1.6em;vertical-align: middle;}#tag-field {margin: 8px 2px 10px;}#tag-field .tag {display: inline-block;background: #cadff3;border-radius: 4px;padding: 1px 8px;color: black;font-size: 12px;margin-right: 10px;line-height: 1.4;}</style>
<!-- ace-static.css -->
<style>.ace_static_highlight {white-space: pre-wrap;}.ace_static_highlight .ace_gutter {width: 2em;text-align: right;padding: 0 3px 0 0;margin-right: 3px;}.ace_static_highlight.ace_show_gutter .ace_line {padding-left: 2.6em;}.ace_static_highlight .ace_line {position: relative;}.ace_static_highlight .ace_gutter-cell {-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;top: 0;bottom: 0;left: 0;position: absolute;}.ace_static_highlight .ace_gutter-cell:before {content: counter(ace_line, decimal);counter-increment: ace_line;}.ace_static_highlight {counter-reset: ace_line;}</style>
<style>.ace-xcode .ace_gutter {background: #e8e8e8;color: #333}.ace-xcode .ace_print-margin {width: 1px;background: #e8e8e8}.ace-xcode {background-color: #FFFFFF;color: #000000}.ace-xcode .ace_cursor {color: #000000}.ace-xcode .ace_marker-layer .ace_selection {background: #B5D5FF}.ace-xcode.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FFFFFF;border-radius: 2px}.ace-xcode .ace_marker-layer .ace_step {background: rgb(198, 219, 174)}.ace-xcode .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #BFBFBF}.ace-xcode .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_gutter-active-line {background-color: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_marker-layer .ace_selected-word {border: 1px solid #B5D5FF}.ace-xcode .ace_constant.ace_language,.ace-xcode .ace_keyword,.ace-xcode .ace_meta,.ace-xcode .ace_variable.ace_language {color: #C800A4}.ace-xcode .ace_invisible {color: #BFBFBF}.ace-xcode .ace_constant.ace_character,.ace-xcode .ace_constant.ace_other {color: #275A5E}.ace-xcode .ace_constant.ace_numeric {color: #3A00DC}.ace-xcode .ace_entity.ace_other.ace_attribute-name,.ace-xcode .ace_support.ace_constant,.ace-xcode .ace_support.ace_function {color: #450084}.ace-xcode .ace_fold {background-color: #C800A4;border-color: #000000}.ace-xcode .ace_entity.ace_name.ace_tag,.ace-xcode .ace_support.ace_class,.ace-xcode .ace_support.ace_type {color: #790EAD}.ace-xcode .ace_storage {color: #C900A4}.ace-xcode .ace_string {color: #DF0002}.ace-xcode .ace_comment {color: #008E00}.ace-xcode .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==) right repeat-y}</style>
<!-- export.css -->
<style>
body{margin:0 auto;max-width:800px;line-height:1.4}
#nav{margin:5px 0 10px;font-size:15px}
#titlearea{border-bottom:1px solid #ccc;font-size:17px;padding:10px 0;}
#contentarea{font-size:15px;margin:16px 0}
.cell{outline:0;min-height:20px;margin:5px 0;padding:5px 0;}
.code-cell{font-family:Menlo,Consolas,'Ubuntu Mono',Monaco,'source-code-pro',monospace;font-size:12px;}
.latex-cell{white-space:pre-wrap;}
</style>
<!-- User CSS -->
<style> .text-cell {font-size: 15px;}.code-cell {font-size: 12px;}.markdown-cell {font-size: 15px;}.latex-cell {font-size: 15px;}</style>
</head>
<body>
<div id="nav"><div>Next: <a href='JavaScript 以及 ECMAScript 6.html'>JavaScript 以及 ECMAScript 6</a>, Previous: <a href='框架及套件.html'>框架及套件</a>, Up: <a href='index.html'>Index</a></div></div>
<div id="titlearea">
<h2>技術簡介</h2>
</div>
<div id="contentarea"><div class="cell markdown-cell"><h2 id="-websocket-"><code>WebSocket</code></h2>
<p><code>HTTP</code> 是一個單向的傳輸方法，要產生一組要求、回應一定是由用戶端（通常是瀏覽器）產生要求，之後由伺服器回應，當一個要求、回應結束後，就結束了。<code>WebSocket</code> 提供一個更強大的連線，使得用戶端、伺服器可以在這一個連線上自由的傳送資料。這樣的連線就可以拿來建立聊天室，用戶端送出的資料就是該用戶傳出的訊息，伺服器也在收到其他用戶的訊息時，將新訊息傳送給用戶端，更新聊天室的內容。</p>
</div><div class="cell diagram-cell"><svg height="747.28125" version="1.1" width="877.65625" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; top: -0.84375px;"><desc>Created with Raphaël 2.1.2</desc><defs><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block"></path><marker id="raphael-marker-endblock55-obj129" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS1:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker><marker id="raphael-marker-endblock55-obj132" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS2:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker><marker id="raphael-marker-endblock55-obj141" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS3:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker><marker id="raphael-marker-endblock55-obj144" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS4:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker><marker id="raphael-marker-endblock55-obj147" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS5:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker><marker id="raphael-marker-endblock55-obj153" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS6:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker><marker id="raphael-marker-endblock55-obj156" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS7:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker><marker id="raphael-marker-endblock55-obj159" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5"><use NS8:href="#raphael-marker-block" transform="rotate(180 2.5 2.5) scale(1,1)" stroke-width="1.0000" fill="#000" stroke="none"></use></marker></defs><rect x="100.828125" y="20" width="71.21875" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="110.828125" y="30" width="51.21875" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="136.4375" y="39" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">用戶 A</tspan></text><rect x="100.828125" y="689.28125" width="71.21875" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="110.828125" y="699.28125" width="51.21875" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="136.4375" y="708.28125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">用戶 A</tspan></text><path fill="none" stroke="#000000" d="M136.4375,58L136.4375,689.28125" stroke-width="2" style=""></path><rect x="394.4375" y="20" width="68" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="404.4375" y="30" width="48" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="428.4375" y="39" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">伺服器</tspan></text><rect x="394.4375" y="689.28125" width="68" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="404.4375" y="699.28125" width="48" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="428.4375" y="708.28125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">伺服器</tspan></text><path fill="none" stroke="#000000" d="M428.4375,58L428.4375,689.28125" stroke-width="2" style=""></path><rect x="510.4375" y="20" width="68" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="520.4375" y="30" width="48" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="544.4375" y="39" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">資料庫</tspan></text><rect x="510.4375" y="689.28125" width="68" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="520.4375" y="699.28125" width="48" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="544.4375" y="708.28125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">資料庫</tspan></text><path fill="none" stroke="#000000" d="M544.4375,58L544.4375,689.28125" stroke-width="2" style=""></path><rect x="598.4375" y="20" width="71.21875" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="608.4375" y="30" width="51.21875" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="634.046875" y="39" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">用戶 B</tspan></text><rect x="598.4375" y="689.28125" width="71.21875" height="38" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="608.4375" y="699.28125" width="51.21875" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="634.046875" y="708.28125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">用戶 B</tspan></text><path fill="none" stroke="#000000" d="M634.046875,58L634.046875,689.28125" stroke-width="2" style=""></path><rect x="26.40625" y="78" width="90.03125" height="28" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="31.40625" y="83" width="80.03125" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="71.421875" y="92" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">HTTP 連線</tspan></text><rect x="149.625" y="112.390625" width="265.625" height="37.21875" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="282.4375" y="131" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="-4.0859375">HTTP GET 要求</tspan><tspan dy="19.2" x="282.4375">（並要求升級成 WebSocket 連線）</tspan></text><path fill="none" stroke="#000000" d="M136.4375,163.21875C136.4375,163.21875,384.85767459869385,163.21875,423.4307290529832,163.21875" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj129)" stroke-dasharray="0" style=""></path><rect x="196.015625" y="169.609375" width="172.84375" height="37.21875" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="282.4375" y="188.21875" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="-4.0859375">HTTP 101</tspan><tspan dy="19.2" x="282.4375">Switching Protocol</tspan></text><path fill="none" stroke="#000000" d="M428.4375,220.4375C428.4375,220.4375,180.01732540130615,220.4375,141.44427094701678,220.4375" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj132)" stroke-dasharray="0" style=""></path><rect x="20" y="240.4375" width="96.4375" height="47.21875" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="25" y="245.4375" width="86.4375" height="37.21875" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="68.21875" y="264.046875" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="-4.0859375">WebSocket</tspan><tspan dy="19.2" x="68.21875">連線</tspan></text><rect x="654.046875" y="307.65625" width="96.4375" height="47.21875" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="659.046875" y="312.65625" width="86.4375" height="37.21875" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="702.265625" y="331.265625" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="-4.0859375">WebSocket</tspan><tspan dy="19.2" x="702.265625">連線</tspan></text><rect x="162.4375" y="370.875" width="240" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="282.4375" y="379.875" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">初始化聊天室（用戶名稱等資訊）</tspan></text><path fill="none" stroke="#000000" d="M136.4375,392.875C136.4375,392.875,384.85767459869385,392.875,423.4307290529832,392.875" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj141)" stroke-dasharray="0" style=""></path><rect x="146.4375" y="408.875" width="272" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="282.4375" y="417.875" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">初始化聊天室（包含過往的聊天訊息）</tspan></text><path fill="none" stroke="#000000" d="M428.4375,430.875C428.4375,430.875,180.01732540130615,430.875,141.44427094701678,430.875" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj144)" stroke-dasharray="0" style=""></path><rect x="507.234375" y="446.875" width="48.015625" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="531.2421875" y="455.875" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">新訊息</tspan></text><path fill="none" stroke="#000000" d="M634.046875,468.875C634.046875,468.875,464.90908441040665,468.875,433.44350911029187,468.875" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj147)" stroke-dasharray="6,2" style=""></path><rect x="654.046875" y="488.875" width="138" height="66.40625" rx="0" ry="0" fill="none" stroke="#000000" stroke-width="2" style=""></rect><rect x="659.046875" y="493.875" width="128" height="56.40625" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="723.046875" y="522.078125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="-13.6875">虛線的這一組</tspan><tspan dy="19.2" x="723.046875">要求是在另外一個</tspan><tspan dy="19.2" x="723.046875">WebSocket 上</tspan></text><rect x="446.4375" y="571.28125" width="80" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="486.4375" y="580.28125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">寫入新訊息</tspan></text><path fill="none" stroke="#000000" d="M428.4375,593.28125C428.4375,593.28125,517.2004463672638,593.28125,539.4345242414856,593.28125" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj153)" stroke-dasharray="6,2" style=""></path><rect x="438.4375" y="609.28125" width="96" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="486.4375" y="618.28125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">通知有新訊息</tspan></text><path fill="none" stroke="#000000" d="M544.4375,631.28125C544.4375,631.28125,455.6745536327362,631.28125,433.44047575851437,631.28125" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj156)" stroke-dasharray="0" style=""></path><rect x="204.03125" y="647.28125" width="156.8125" height="18" rx="0" ry="0" fill="#ffffff" stroke="none" style=""></rect><text x="282.4375" y="656.28125" text-anchor="middle" font-family="Andale Mono, monospace" font-size="16px" stroke="none" fill="#000000" style="text-anchor: middle; font-family: 'Andale Mono', monospace; font-size: 16px;"><tspan dy="5.515625">來自用戶 B 的新訊息</tspan></text><path fill="none" stroke="#000000" d="M428.4375,669.28125C428.4375,669.28125,180.01732540130615,669.28125,141.44427094701678,669.28125" stroke-width="2" marker-end="url(#raphael-marker-endblock55-obj159)" stroke-dasharray="0" style=""></path></svg></div><div class="cell markdown-cell"><p>在這一個範例之中，一個連線從 <code>HTTP</code> 被升級成 <code>WebSocket</code>，之後又由伺服器主動傳送新資料給用戶端，達到推播（Push）的功能。</p>
</div><div class="cell markdown-cell"><h2 id="object-relational-mapping">Object Relational Mapping</h2>
<p>ORM 是將資料庫中的資料抽象化為物件的技巧，透過類別以及物件操作資料庫中的資料。</p>
</div><div class="cell code-cell"><div class="ace-xcode"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">let</span> <span class="ace_identifier">title</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">contents</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_identifier">authorID</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">let</span> <span class="ace_identifier">post</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_storage ace_modifier">new</span> <span class="ace_identifier">Post</span><span class="ace_paren ace_lparen">({</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">date</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_storage ace_modifier">new</span> <span class="ace_identifier">Date</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">title</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">title</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">content</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">contents</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">author</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">authorID</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">post</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">save</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span>
</div></div></div></div><div class="cell markdown-cell"><p>當然也可以建立兩個模型間的關聯，例如</p>
</div><div class="cell code-cell"><div class="ace-xcode"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">var</span> <span class="ace_identifier">Post</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">thinky</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">defineModel</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"Post"</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">id</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">type</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">string</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">date</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">type</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">date</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">title</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">type</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">string</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">content</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">type</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">string</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">var</span> <span class="ace_identifier">Author</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">thinky</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">defindModel</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"Author"</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">id</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">type</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">string</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">name</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_identifier">type</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">string</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">Author</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">hasMany</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">Post</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_string">"posts"</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_string">"id"</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_string">"authorId"</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">Post</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">belongsTo</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">Author</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_string">"author"</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_string">"authorId"</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_string">"id"</span><span class="ace_paren ace_rparen">)</span>
</div></div></div></div><div class="cell markdown-cell"><p>或是在類別或是物件上面有方法</p>
</div><div class="cell code-cell"><div class="ace-xcode"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">Author</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">define</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"postsCount"</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span> <span class="ace_keyword ace_operator">=></span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_keyword ace_control">return</span> <span class="ace_variable ace_language">this</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">posts</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">length</span><span class="ace_punctuation ace_operator">;</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">})</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_identifier">let</span> <span class="ace_identifier">author_post_count</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">Author</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">get</span><span class="ace_paren ace_lparen">(</span><span class="ace_constant ace_numeric">1</span><span class="ace_paren ace_rparen">)</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">then</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">user</span> <span class="ace_keyword ace_operator">=></span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_identifier">console</span><span class="ace_punctuation ace_operator">.</span><span class="ace_support ace_function ace_C99 ace_c">log</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">user</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">postsCount</span><span class="ace_paren ace_rparen">)</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">})</span>
</div></div></div></div><div class="cell markdown-cell"><h2 id="java-script-object-notation-json-">Java Script Object Notation（JSON）</h2>
<p>JSON 是一個表示資料的方法，可以表示的型態有，字串、數字、陣列以及字典。</p>
</div><div class="cell code-cell"><div class="ace-xcode"><div class="ace_static_highlight ace_show_gutter" style="counter-reset:ace_line 0"><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">"someNumber"</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_constant ace_numeric">12.34</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">"someString"</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_string">"this is a string."</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">"someDictionary"</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_paren ace_lparen">{</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">"nestedValue"</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_constant ace_numeric">1234</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_paren ace_rparen">}</span><span class="ace_punctuation ace_operator">,</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span> <span class="ace_string">"someArray"</span><span class="ace_punctuation ace_operator">:</span> <span class="ace_paren ace_lparen">[</span><span class="ace_constant ace_numeric">12</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_constant ace_numeric">23</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_constant ace_numeric">34</span><span class="ace_punctuation ace_operator">,</span> <span class="ace_constant ace_numeric">45</span><span class="ace_paren ace_rparen">]</span>
</div><div class="ace_line"><span class="ace_gutter ace_gutter-cell" unselectable="on"></span><span class="ace_paren ace_rparen">}</span>
</div></div></div></div><div class="cell markdown-cell"><p>JSON 是沒有型態的，JSON 的鍵值必須用雙引號括起來。在 JavaScript 中提供 <code>JSON.stringify(object)</code> 以及 <code>JSON.parse(string)</code> 兩個方法將 JavaScript 物件轉為 JSON 字串或是將 JSON 字串轉為 JavaScript 物件。</p>
</div><div class="cell markdown-cell"><h2 id="nosql-document-based-database-">NoSQL（或是 Document-based Database）</h2>
<p>NoSQL，又有人稱之為 Not Only SQL，代表資料庫不以表格為限制。以 MongoDB、RethinkDB 等 JSON 資料庫為例，其架構讓同一個資料集中的資料可以有不同的格式。而每一筆資料，都是一個 JSON 的文件。</p>
</div><div class="cell markdown-cell"><h2 id="rethinkdb-thinky">RethinkDB & Thinky</h2>
<p>RethinkDB 是一個 NoSQL 資料庫程式，最特別的的方式可以即時從資料庫得到資料更新的提示，不用由用戶端去手動比對。</p>
<p>Thinky 是 RethinkDB 的 ORM 套件，提供操作 RethinkDB 的抽象層。</p>
</div><div class="cell markdown-cell"><h2 id="node-js">Node.js</h2>
<p>建立在 Google Chrome 所使用的 V8 JavaScript 引擎之上，並提供許多內建函數，Node.js 可以用來攥寫應用程式或是伺服器軟體。傳統的 JavaScript 缺乏模組化、檔案系統之類的功能，這部分被 Node.js 補齊了。</p>
</div><div class="cell markdown-cell"><h2 id="ecmascript-6">ECMAScript 6</h2>
<p>下一個 ECMAScript 的標準，提拱許多新的功能。</p>
</div><div class="cell markdown-cell"><h2 id="-">代幣認證</h2>
<p>傳統的驗證方式是透過 cookie 以及 session，利用代幣驗證可以為 RESTful API 實作驗證。代幣是一個代表驗證成功的字串，拿著這個字串就代表該使用者。使用者透過 <code>POST</code> 傳送驗證資訊，若驗證成功，伺服器將會發配一個代幣給使用者，並將這個代幣的資訊存入資料庫。之後，若使用者要存取需要驗證的內容，只要將代幣附在 Header 中，即可代表使用者的身份。</p>
</div><div class="cell markdown-cell"><h2 id="restful-api">RESTful API</h2>
<p>RESTful API 的重點是無狀態。也就是說，要求以及回應是不帶狀態的（與 cookie、session 無關），最重要的一環就是代幣驗證。RESTful API 的設計讓橫向的擴增伺服器變得容易許多，因為驗證不再是跟著伺服器得 session 跑，而是在共享的資料庫內。</p>
<p>RESTful API 用 HTTP 的要求來進行資料的新增、修改、刪除，例如</p>
<p>GET 可以取得資源列表或是某一項資源的細節；POST 可以新增一個資源；PUT 和 PATCH 可以更新一個資源；DELETE 可以刪除一個資源。</p>
<p>其中 POST、PUT、PATCH 要求可以包含資料。PUT 與 PATCH 的不同在於，若 PUT 會取代原本的資源，PATCH 只更新有差異的部分。</p>
</div><div class="cell markdown-cell"><p>接下來會詳細介紹其中幾個重要內容。</p>
</div></div>
<script>document.body.onkeyup = function(e) {
if (e.keyCode === 39) window.location.href = 'JavaScript 以及 ECMAScript 6.html';
if (e.keyCode === 37) window.location.href = '框架及套件.html';
}</script>
</body>
</html>