tag:blogger.com,1999:blog-94392142024-02-20T09:03:53.646-08:00小莊 - Front-End is in the Detail.From Back-end to Front-end小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.comBlogger84125tag:blogger.com,1999:blog-9439214.post-52348703443650337422022-02-10T01:35:00.003-08:002022-02-10T01:35:40.625-08:00Google Chrome User Agent String Reduction <p> <span style="background-color: white; color: #050505; font-family: inherit; font-size: 15px; white-space: pre-wrap;">最近再看 Google Chrome User Agent string reduction 的文件。</span></p><div class="cxmmr5t8 oygrvhab hcukyx3x c1et5uql o9v6fnle ii04i59q" style="background-color: white; color: #050505; font-family: system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif; font-size: 15px; margin: 0.5em 0px 0px; overflow-wrap: break-word; white-space: pre-wrap;"><div dir="auto" style="font-family: inherit;">1. 主要目的是為了避免太多額外資訊被利用來做 fingerprint ,所以拿掉主要是移除 minorVersion / oscpu / deviceModel ,透過將這些數值回傳靜態數值( static value )來避免 fingerprint。</div><div dir="auto" style="font-family: inherit;"><br /></div><div dir="auto" style="font-family: inherit;">例如</div><div dir="auto" style="font-family: inherit;"><span style="color: black; font-family: monospace; font-size: 13.333px; white-space: normal;">(Linux; Android </span><del style="background-color: #f4cccc; box-sizing: border-box; color: black; font-family: monospace; font-size: 13.333px; text-decoration: inherit; white-space: normal;">9; SM-A205U</del><span style="color: black; font-family: monospace; font-size: 13.333px; white-space: normal;">) 變成 </span><span style="color: black; font-family: monospace; font-size: 13.333px; white-space: normal;">(Linux; Android </span><ins style="background-color: #d9ead3; box-sizing: border-box; color: black; font-family: monospace; font-size: 13.333px; text-decoration: inherit; white-space: normal;">10; K</ins><span style="color: black; font-family: monospace; font-size: 13.333px; white-space: normal;">)</span></div><div dir="auto" style="font-family: inherit;"><span style="color: black; font-family: monospace; font-size: 13.333px; white-space: normal;">Chrome/93.</span><del style="background-color: #f4cccc; box-sizing: border-box; color: black; font-family: monospace; font-size: 13.333px; text-decoration: inherit; white-space: normal;">0.1234.56</del><span style="font-family: inherit;"> 變成 </span><span style="color: black; font-family: monospace; font-size: 13.333px; white-space: normal;">Chrome/93.</span><ins style="background-color: #d9ead3; box-sizing: border-box; color: black; font-family: monospace; font-size: 13.333px; text-decoration: inherit; white-space: normal;">0.0.0</ins></div><div dir="auto" style="font-family: inherit;"><ins style="background-color: #d9ead3; box-sizing: border-box; color: black; font-family: monospace; font-size: 13.333px; text-decoration: inherit; white-space: normal;"><br /></ins></div></div><div class="cxmmr5t8 oygrvhab hcukyx3x c1et5uql o9v6fnle ii04i59q" style="background-color: white; color: #050505; font-family: system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif; font-size: 15px; margin: 0.5em 0px 0px; overflow-wrap: break-word; white-space: pre-wrap;"><div dir="auto" style="font-family: inherit;">2. Google Chrome Dev 有提到 User-Agent Client Hint (sec-ch-ua)跟 navigator.userAgentData 來取代 user agent string ,但是在 safari 跟 firefox 都不支援的情況下應該不會特別想轉過去使用。</div><div dir="auto" style="font-family: inherit;"><br /></div></div><div class="cxmmr5t8 oygrvhab hcukyx3x c1et5uql o9v6fnle ii04i59q" style="background-color: white; color: #050505; font-family: system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif; font-size: 15px; margin: 0.5em 0px 0px; overflow-wrap: break-word; white-space: pre-wrap;"><div dir="auto" style="font-family: inherit;">3. 影響比較大的應該是 Reduced navigator.platform values (for all versions) 如下圖,有使用此數值的服務應該要檢查一下。</div><div dir="auto" style="font-family: inherit;"><br /></div><div dir="auto" style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgEOczJIkSj9PdANOFErpFHhUJTTKNZz50Zp137lWuI5lOyPs7y59kRDxK9Obx3uhkaKqlmAao8e_Ejiu9m5ZDSbQMGJ47B18PTcOL5qqZxDfT5kBiAXffGeD0IxpDVxeBcilZ1LF1_ifIbWMHX4dlgvRdSbEXZeaUnVNYIWhQzMaxOOyohlb4" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="253" data-original-width="564" height="144" src="https://blogger.googleusercontent.com/img/a/AVvXsEgEOczJIkSj9PdANOFErpFHhUJTTKNZz50Zp137lWuI5lOyPs7y59kRDxK9Obx3uhkaKqlmAao8e_Ejiu9m5ZDSbQMGJ47B18PTcOL5qqZxDfT5kBiAXffGeD0IxpDVxeBcilZ1LF1_ifIbWMHX4dlgvRdSbEXZeaUnVNYIWhQzMaxOOyohlb4" width="320" /></a></div><br /><br /></div><div dir="auto" style="font-family: inherit;"><br /></div><div dir="auto" style="font-family: inherit;">Ref: <a href="https://web.dev/migrate-to-ua-ch/">https://web.dev/migrate-to-ua-ch/</a></div><p><a href="https://web.dev/migrate-to-ua-ch/"></a></p><p>Ref: <a href="https://uar-ot.glitch.me/navigator">https://uar-ot.glitch.me/navigator</a></p><p>Ref: <a href="https://wicg.github.io/ua-client-hints/#examples">https://wicg.github.io/ua-client-hints/#examples</a></p><p>Ref: <a href="https://www.chromium.org/updates/ua-reduction/">https://www.chromium.org/updates/ua-reduction/</a></p>
</div>小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-48081015248920555382020-08-25T01:25:00.001-07:002020-08-25T01:25:19.413-07:00GTM 上的 Server Side Tagging(伺服器標籤追蹤)<p> </p><p>最近看到一篇 GTM 的 Server Side Tagging [Ref.1],發現這是 google 出的給 GCP 做 <a href="#" id="https://www.kvzhuang.net/2020/08/cname-cloaking.html" name="https://www.kvzhuang.net/2020/08/cname-cloaking.html">CNAME Cloaking</a> [Ref.2]。</p><p>說的更簡單 google 希望各個 在 GCP 上的 publisher 都給 Google 一組 CNAME 做 1st party 的追蹤所出的解決方案。</p><p><br /></p><p>[Ref.1] <span face="" style="background-color: white; color: #050505; white-space: pre-wrap;"><a href="#" id="https://www.facebook.com/thingsaboutwebdev/posts/2970253229770181" name="https://www.facebook.com/thingsaboutwebdev/posts/2970253229770181">GTM 的 Server side tagging</a> </span><span style="border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; font-size: inherit; font-weight: 600; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit;"><a class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl oo9gr5id gpro0wi8 lrazzd5p" href="https://www.facebook.com/thingsaboutwebdev/?__cft__[0]=AZWqX_e80cykV79XqC7m7uuNe1bUDv-HEEgcmY7YmSgpo0KTs9pYw6CtMorWv9oPvXqPJWSk0FVREY0DaRgItW4nqw3lCRKSNSmJQ2nl-7tbBlh7fsWANf2mQm2CA-Suu6CHdgagzkHANyh6GuoMpAjEQrOB-NPyb5hJkv68gsD-IMf5wzz9bOZLFScm1fRWJ3U&__tn__=-UC%2CP-R" role="link" style="-webkit-tap-highlight-color: transparent; border-color: initial; border-style: initial; border-width: 0px; box-sizing: border-box; cursor: pointer; display: inline; font-family: inherit; font-size: inherit; font-weight: 600; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: inherit; text-decoration-line: none; touch-action: manipulation;" tabindex="0">網頁開發雜記</a></span></p><p>[Ref.2] <a href="#" id="https://www.kvzhuang.net/2020/08/cname-cloaking.html" name="https://www.kvzhuang.net/2020/08/cname-cloaking.html">CNAME Cloaking</a></p>小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-15161539227597372902020-08-25T01:22:00.007-07:002020-08-25T01:22:52.506-07:00CNAME Cloaking<p>由於大眾越來越注重隱私,所以現在 3rd cookie tracking 越來越難追蹤了,例如 Apple safari 的 ITP [Ref.1]。</p><p>所以就有廣告技術商提出來 CNAME Cloaking,跟合作的 Publisher 討論好廣告技術商上的 tracking pixel 在 網址 domain name 的格式。</p><p>例如廣告技術商 TenMax 跟 WSJ.com 合作,談好 CNAME Cloaking 的網址為 tenmax.wsj.com,請 Publisher WSJ.com 在他們的 DNS 上面設定一組 CNAME 指到 tenmax.wsj.com 到 TenMax 的主機上。</p><p>https://tenmax.wsj.com/track/ 這樣 TenMax 就可以透過這個 pixel 存取 wsj 上的 1st party cookie 了 。</p><p><br /></p><p><br /></p><p>[Ref.1] <a href="#" id="https://www.tenmax.io/tw/archives/14012" name="https://www.tenmax.io/tw/archives/14012">Safari ITP 歷程介紹 2019</a></p>小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-91524436307624227842020-08-25T01:05:00.007-07:002020-08-25T01:05:54.272-07:00Privacy Preserving Lookalike Audience Targeting<p> <span style="background-color: white; color: #050505; font-family: inherit; font-size: 15px; white-space: pre-wrap;">最近在技術討論頻道討論的一個議題,覺得還蠻值得丟出來討論的</span></p><div class="o9v6fnle cxmmr5t8 oygrvhab hcukyx3x c1et5uql ii04i59q" style="background-color: white; color: #050505; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin: 0.5em 0px 0px; overflow-wrap: break-word; white-space: pre-wrap;"><div dir="auto" style="font-family: inherit;">1. chrome 有提出一個用來去識別化來記錄轉換(conversion) 的作法叫做 aggregation report API [Ref.2]。</div></div><div class="o9v6fnle cxmmr5t8 oygrvhab hcukyx3x c1et5uql ii04i59q" style="background-color: white; color: #050505; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin: 0.5em 0px 0px; overflow-wrap: break-word; white-space: pre-wrap;"><div dir="auto" style="font-family: inherit;">2. Facebook 希望能擴充這個 API 讓這個 API 可以做到去識別化的 lookalike audience [Ref.1]。</div></div><div class="o9v6fnle cxmmr5t8 oygrvhab hcukyx3x c1et5uql ii04i59q" style="background-color: white; color: #050505; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin: 0.5em 0px 0px; overflow-wrap: break-word; white-space: pre-wrap;"><div dir="auto" style="font-family: inherit;">3. 其實做方法就是讓 aggregation report API 回傳的結果可以是 embed vector,讓 publisher 的後端可以去計算出去識別化的 audience。</div><div dir="auto" style="font-family: inherit;"><br /></div><div dir="auto" style="font-family: inherit;">[Ref.1] <a href="#" id="https://github.com/w3c/web-advertising/blob/master/privacy_preserving_lookalike_audience_targeting.md?" name="https://github.com/w3c/web-advertising/blob/master/privacy_preserving_lookalike_audience_targeting.md?">Privacy Preserving Lookalike Audience Targeting</a></div><div dir="auto" style="font-family: inherit;"><br /></div><div dir="auto" style="font-family: inherit;">[Ref.2] <a href="#" id="https://github.com/csharrison/aggregate-reporting-api" name="https://github.com/csharrison/aggregate-reporting-api">Aggregation Report API</a></div></div>小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-79210044757802326922020-02-02T23:49:00.000-08:002020-02-02T23:49:17.786-08:00Persistence Layer 是什麼?系統通常會有下面架構,Data Base 負責儲存資料, Data Access Layer 負責存取資料,Persistence Layer 負責作為 DAL 跟 Business Logic Layer (商業邏輯層),把存取出來的資料持久化,避免一再重複透過 DAL 存取 DB 造成大量資料 query 的情況。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBrkBapUw3I-4Yz8fbzJJl8voTuaXqXG27j72lyuEOf7odnlLBAc5qp1AKJAvGw5uiHo5HpwTG_WS0HQt1rnNb-udccEvbs4Th3a4S9BRZ0mmju21KIqZRNBG-lx-iPDi3koX7g/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E6%2588%25AA%25E5%259C%2596+2020-02-03+15.37.45.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBrkBapUw3I-4Yz8fbzJJl8voTuaXqXG27j72lyuEOf7odnlLBAc5qp1AKJAvGw5uiHo5HpwTG_WS0HQt1rnNb-udccEvbs4Th3a4S9BRZ0mmju21KIqZRNBG-lx-iPDi3koX7g/s400/%25E8%259E%25A2%25E5%25B9%2595%25E6%2588%25AA%25E5%259C%2596+2020-02-03+15.37.45.png" /></a></div>
<br />
Java Persistence Api (JPA) 則是其中定義的 API 介面,而實做這個介面的有很多廠商,例如 hibernate 、 Oracle TopLink。<br /><br />
<br />小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com1tag:blogger.com,1999:blog-9439214.post-76138122757603129462019-04-29T18:27:00.003-07:002019-04-29T18:27:47.318-07:00JSON Web Token(JWT) 儲存在前端那邊比較好?<div style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin-bottom: 6px;">
1. 不建議 JSON Web Token(JWT) 儲存在 localStorage/sessionStorage,透過 JavaScript XSS 攻擊可以輕易存取到。</div>
<div style="background-color: white; color: #1d2129; display: inline; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin-top: 6px;">
2. 可儲存 JWT 在 HttpOnly cookie ,一般來說如果後端有用一些簡單框架,都有防止 Cross-site request forgery (CSRF) 的攻擊方式來存取 cookie 資訊。</div>
<div>
<div style="background-color: white; color: #1d2129; display: inline; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin-top: 6px;">
<br /></div>
</div>
<div>
<div style="background-color: white; color: #1d2129; display: inline; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin-top: 6px;">
ref: <a href="https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage?fbclid=IwAR2w0yX336h4lgpGrHKIBHq22zJ8cvxA1EceAZKtq07mnIFcYTDJNBxsXfQ">Where to Store your JWTs – Cookies vs HTML5 Web Storage</a></div>
</div>
<div>
<div style="background-color: white; color: #1d2129; display: inline; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin-top: 6px;">
<br /></div>
</div>
<div>
ref: <a href="https://yami.io/jwt/?fbclid=IwAR3zHsD02Kjwt54NKHWh3HDrCRqfO4uANiORX5LESjcY91yMaTJOfyEIres">以 JSON Web Token 替代傳統 Token</a></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-4090731399174304622019-01-03T19:24:00.002-08:002019-01-03T19:24:25.661-08:00Ad Fraud - 數位廣告詐騙分析集團內的技術分享,有興趣的朋友可以參考一下。<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="485" marginheight="0" marginwidth="0" scrolling="no" src="//www.slideshare.net/slideshow/embed_code/key/dnAweGy2iGvkKR" style="border-width: 1px; border: 1px solid #ccc; margin-bottom: 5px; max-width: 100%;" width="595"> </iframe> <br />
<div style="margin-bottom: 5px;">
<strong> <a href="https://www.slideshare.net/KevinZhuang3/ad-fraudfunp-tech-sharing" target="_blank" title="Ad fraud-FunP Tech Sharing">Ad fraud-FunP Tech Sharing</a> </strong> from <strong><a href="https://www.slideshare.net/KevinZhuang3" target="_blank">Kevin Zhuang</a></strong> </div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-35919728234930897112018-11-25T22:42:00.003-08:002018-11-25T22:42:52.862-08:00行動裝置上的創意廣告四種類型以行動裝置來討論,目前有四種互動模式。<br />
<br />
<ul>
<li> 跟環境互動-AR</li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqDZ1sjPiJgc9hXeXc-jmnr-cHQ3JcrMtEfiOALVmBAo0r1VO27ZfbAhAYseXx9ihOZig0UidVLvvzJSVu66xJw1OCWKmKmY7IixhatClqEgWSQobxNng79N08utJN6pyxvTkfg/s1600/Augmented-reality.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqDZ1sjPiJgc9hXeXc-jmnr-cHQ3JcrMtEfiOALVmBAo0r1VO27ZfbAhAYseXx9ihOZig0UidVLvvzJSVu66xJw1OCWKmKmY7IixhatClqEgWSQobxNng79N08utJN6pyxvTkfg/s320/Augmented-reality.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span class="irc_ho" dir="ltr" style="background-color: white; color: #bdc1c6; cursor: pointer; font-family: "arial" , sans-serif; font-size: 14px; margin-right: -2px; padding-right: 2px;"><a class="o5rIVb irc_hol i3724 irc_lth" data-noload="" data-ved="2ahUKEwjLjfKLs_HeAhUDyrwKHZwvDEEQjB16BAgBEAQ" href="https://commons.wikimedia.org/wiki/File:Augmented-reality.jpg" jsaction="mousedown:irc.rl;focus:irc.rl" rel="noopener" style="background-color: white; color: #bdc1c6; cursor: pointer; font-family: arial, sans-serif; font-size: 14px; text-align: start; text-decoration-line: none;" tabindex="0" target="_blank">Wikimedia Commons</a> - Augmented Reality</span></td></tr>
</tbody></table>
<ul>
<li> 跟原本網站操作連動- (ex 往下滑廣告輪播)</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nGaNDDuIP8u1QNLWYFaqtSRN1k8yaQ1oiP0BQMKgUuGKFsJwj_xLLKUouLVyK2UoBMlKqhOpubS3Yz0ZRwE0w3FpQrKLNIxauITV5I1tUuWD9f_vQEAPaLLtSVb71Fhq2Cjk6w/s1600/ezgif-4-bbc60bf12eb6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nGaNDDuIP8u1QNLWYFaqtSRN1k8yaQ1oiP0BQMKgUuGKFsJwj_xLLKUouLVyK2UoBMlKqhOpubS3Yz0ZRwE0w3FpQrKLNIxauITV5I1tUuWD9f_vQEAPaLLtSVb71Fhq2Cjk6w/s320/ezgif-4-bbc60bf12eb6.gif" width="180" /></a></div>
<div>
<br /></div>
<ul>
<li> 跟廣告操作互動 (ex 360度輪盤轉動)</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfasgfkEnn7t25V32us4CNHSStGxNzM1yaxYXcv_XVUGj3GmiYvbjzo_wl43Yy-Cs1TrFCjqMKi8ExxqqEUoYicZbm7fm0P5yxDTAhPYWeSt-2Ox8SaGZ0gPtv-Rbcy_nnwMBcKw/s1600/ezgif-4-bce38a7e83dc.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfasgfkEnn7t25V32us4CNHSStGxNzM1yaxYXcv_XVUGj3GmiYvbjzo_wl43Yy-Cs1TrFCjqMKi8ExxqqEUoYicZbm7fm0P5yxDTAhPYWeSt-2Ox8SaGZ0gPtv-Rbcy_nnwMBcKw/s320/ezgif-4-bce38a7e83dc.gif" width="180" /></a></div>
<div>
<br /></div>
<ul>
<li> 跟裝置連動 (ex 陀螺儀) </li>
</ul>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-30464458166969623392018-11-19T00:54:00.000-08:002018-11-19T00:54:26.699-08:00[JS] 執行 new Foo(...) 發生的三個流程<div class="" data-block="true" data-editor="18srj" data-offset-key="4k79s-0-0" style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; white-space: pre-wrap;">
<div class="_1mf _1mj" data-offset-key="4k79s-0-0" style="direction: ltr; font-family: inherit; position: relative;">
<span style="font-family: inherit;">1. 新增物件繼承自 Foo.prototype。</span></div>
</div>
<div class="" data-block="true" data-editor="18srj" data-offset-key="43ala-0-0" style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; white-space: pre-wrap;">
<div class="_1mf _1mj" data-offset-key="43ala-0-0" style="direction: ltr; font-family: inherit; position: relative;">
<span data-offset-key="43ala-0-0" style="font-family: inherit;">2. Foo 的 constructor function 會被呼叫。</span></div>
</div>
<div class="" data-block="true" data-editor="18srj" data-offset-key="7ugvc-0-0" style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; white-space: pre-wrap;">
<div class="_1mf _1mj" data-offset-key="7ugvc-0-0" style="direction: ltr; font-family: inherit; position: relative;">
<span data-offset-key="7ugvc-0-0" style="font-family: inherit;">3. 第一步的物件會被回傳出去(通常 contructor 不會特別指定回傳物件)。</span></div>
</div>
<div class="" data-block="true" data-editor="18srj" data-offset-key="3v2s-0-0" style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; white-space: pre-wrap;">
<div class="_1mf _1mj" data-offset-key="3v2s-0-0" style="direction: ltr; font-family: inherit; position: relative;">
<span data-offset-key="3v2s-0-0" style="font-family: inherit;"><br data-text="true" /></span></div>
</div>
<div class="" data-block="true" data-editor="18srj" data-offset-key="frpl8-0-0" style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; white-space: pre-wrap;">
<div class="_1mf _1mj" data-offset-key="frpl8-0-0" style="direction: ltr; font-family: inherit; position: relative;">
<span data-offset-key="frpl8-0-0" style="font-family: inherit;">Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new</span></div>
</div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-10178550446970414782018-11-15T17:51:00.005-08:002018-11-15T17:51:53.687-08:00AdExchange 廣告交易中心的疑似詐騙行為<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfPU6njMp8VrTI-PCDFozQ5i1vgcduiWDaVq_rOX9k4Js_0i7-A10B80uH3aepNk4kGJQhBZ5IYCopl7D3lcPZvVC7vZdoCib3LwzP-OKN-DbEj_bWfg6DCmNIkH3UupSB3Ic0Q/s1600/Fraud.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfPU6njMp8VrTI-PCDFozQ5i1vgcduiWDaVq_rOX9k4Js_0i7-A10B80uH3aepNk4kGJQhBZ5IYCopl7D3lcPZvVC7vZdoCib3LwzP-OKN-DbEj_bWfg6DCmNIkH3UupSB3Ic0Q/s400/Fraud.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">image from commons.wikimedia.org</td></tr>
</tbody></table>
<br />
<br />
最近聽到很有趣的疑似廣告流量詐騙議題。<br />
<br />
某網站流量跟 CTR 都很固定,約在每日十萬, CTR約在 1% 左右。算是很不錯的流量來源。<br />
<br />
然後忽然此網站某幾個版位某天 CTR 開始逐步成長到 3.x%,以廣告交換中心會覺得這些版位成效不錯,並且逐漸拉高廣告出價(bid floor)。<br />
<br />
忽然某個小時灌入近 10 倍的流量,由於廣告交換中心 bid floor 計算還來不急反應下修,變等於是使用 3.x% CTR 的出價去購買這些 10倍的流量,進而造成發佈商營收大量增加。<br />
<br />
類似股市坑殺散戶的概念,這種情況如何偵測是個好議題。小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-20268938121474934582018-11-11T21:35:00.002-08:002018-11-13T06:44:41.626-08:00數位廣告筆記 - third party tracking, GDPR issue.1. <b>webkit 對於 3rd party cookie 的限制</b> (Intelligent Tracking Prevention) 以 make expired 做範例。<br />
<br />
情境:有可能一個 我今天在 example-product.com 種了一個使用者 cookie id 在 example-tracker.com 網域下想說之後如果以點擊/購買我可以認列在我們的轉換。<br />
<br />
結果使用者三天之後才買, example-tracker.com 就會存取不到第三方 cookie 的使用者資訊,就沒辦法認列。<br />
<br />
<a href="https://webkit.org/blog/7675/intelligent-tracking-prevention/">Webkit Intelligent Tracking Prevention</a><br />
<br />
<br />
<b>2. 因應上述限制 facebook 提供 first party cookie option 跟 連外頁面連結帶 fbclid 做連結。</b><br />
<br />
<a href="https://www.facebook.com/groups/DevCTaipei/permalink/1174263979391689/">廣告技術者需要知道的 Facebook Pixel 重大更新</a><br />
<span style="background-color: white; color: #1d2129; font-family: , , , ".sfnstext-regular" , sans-serif; font-size: 15px;"><br /></span>
<a href="https://marketingland.com/facebook-to-release-first-party-pixel-for-ads-web-analytics-from-browsers-like-safari-249478?fbclid=IwAR3tIOe5kGAG8pvxV_gkBepfHJ24BA7XxPkghqvAB2pCK_v5BBEPHVpUvKg">Facebook to release first-party cookie option for ads, pull web analytics from Safari</a><br />
<br />
<b>3. GDPR 廣告科技/數位媒體/電子商務 等的影響。</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4qvzquzTGViXYYflPIy7taHtgmaIHQKaXQ-NTGqNRcM8GpZEmqR1UG5dPd7PANAm4WWARYcJQ0mJtHEcr5ToxtWo-hHzYiIIzMo1bgp5fMfBqe45QlM9PuHTZhwvFaQwlGbjvw/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E6%2588%25AA%25E5%259C%2596+2018-11-12+13.35.45.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4qvzquzTGViXYYflPIy7taHtgmaIHQKaXQ-NTGqNRcM8GpZEmqR1UG5dPd7PANAm4WWARYcJQ0mJtHEcr5ToxtWo-hHzYiIIzMo1bgp5fMfBqe45QlM9PuHTZhwvFaQwlGbjvw/s640/%25E8%259E%25A2%25E5%25B9%2595%25E6%2588%25AA%25E5%259C%2596+2018-11-12+13.35.45.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Google Blogger 的 GDPR 宣告</td></tr>
</tbody></table>
<b></b><br />
我們公司有對這個議題作分析,我自己是覺得,重點是要告知使用者,並且讓使用者有被遺忘,不被追蹤的權力,而非只是單純的阻止廣告科技/數位產業追蹤使用者<br />
<br />
而 GDPR 的 opt-in/opt-out<br />
(Opt in - 先不納入使用者使用,由使用者決定確認後要使用後才啓用。<br />
Opt out - 先提供該服務給使用者, 再由使用者決定是否要繼續使用。)<br />
<br />
其實是偏向 opt-in,但是實際上對 數位廣告/電商/數位媒體 真的很難做到使用者同意再給廣告跟追蹤。<br />
<br />
我自己個人也是支持 GDPR 的,但是技術上我覺得還有很多尚待討論的實做問題。<br />
<br />
所以重點還是回到有沒有提示使用者/跟給予使用者刪除被遺忘的選項。<br />
<br />
以數位廣告做流量/素材管理,所以提供給使用者跟廠商的是資料被遺忘權。<br />
<br />
對電商/數位媒體則需要提供資訊呈現給使用者,而且不能用落落長的 term of use 法律條文來呼籠。<br />
<a href="https://www.tenmax.io/gdpr-for-publisher"><br /></a>
<a href="https://www.tenmax.io/gdpr-for-publisher">給網站主的 GDPR 因應建議</a><br />
<br />
<br />小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-30494753891091854482018-05-03T02:43:00.004-07:002018-05-03T02:43:50.196-07:00Immutable In JavaScriptFunP 集團的技術分享<br />
筆記一下<br />
<br />
<script async class="speakerdeck-embed" data-id="94c62dfbf9bd494195dfc1f1ea1fa7db" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com1tag:blogger.com,1999:blog-9439214.post-63489936126489479232018-05-03T02:36:00.004-07:002018-05-03T02:36:44.979-07:00數位廣告業界洞察 - UnMuted/Muted 事件<div style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin-bottom: 6px;">
最近 mobile device 對於影片要能自動播放,大多都會要預設靜音 (muted)。</div>
<div style="background-color: white; color: #1d2129; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; margin-bottom: 6px; margin-top: 6px;">
也因此當使用者有沒有播放聲音這個行為就相對變的重要,而且值得觀察了。</div>
<div class="text_exposed_show" style="background-color: white; color: #1d2129; display: inline; font-family: system-ui, -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px;">
<div style="font-family: inherit; margin-bottom: 6px;">
影音廣告的規範文件 在VAST 1.0 就定義了 TrackingEvents-> mute/unmute 也逐漸被重視。</div>
</div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-89568500523443997552018-04-02T20:51:00.001-07:002018-04-02T21:49:57.274-07:00babelrc preset stage 0,1,2 差異<br />
最近有人在問 .babelrc 裡面 preset 的資訊 跟 stage 0,1,2 的差異<br />
這篇寫很清楚<br />
<br />
<br />
<br />
<br />
<a href="https://www.vanadis.cn/2017/03/18/babel-stage-x/">babel配置-各阶段的stage的区别</a><br />
<br />
如何用 babelrc 把 src 下面的資料夾一次 resolve 路徑解決 import 問題<br />
<br />
<a href="https://blog.csdn.net/u011272795/article/details/78739207">babel-plugin-module-resolver 模块解析插件</a><br />
<br />小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-14507564805072595472018-02-11T22:50:00.001-08:002018-02-20T23:52:46.784-08:00被問到要怎樣思考一個登入系統介面這問題真的太大哉問了...<br />
先假設 後端 API 是 RESTfull 而非 GraphQL 好了<br />
<br />
# 後端<br />
<br />
建立好 user table<br />
就帳號跟密碼兩個欄位好了<br />
<br />
<br />
<ul>
<li>密碼使用什麼加密方法(PBKDF2, scrypt, bcrypt) 鹽巴的長度</li>
<li>登入後系統產生 token , 然後 CSRF 也是要關注的事情。</li>
<li>Token expiration 的機制。</li>
<li>後端跟前端不同主機的 CORS 設定</li>
<li>防機器人暴力測試的機制。</li>
</ul>
<br />
現在大部分後端框架跟工具都可以協助處理這些議題就是。<br />
<br />
# 基礎建設<br />
<br />
<br />
<ul>
<li>主機也別忘記設置 HTTPS,credentials 如何保管。</li>
<li>在 API Server 前面是否要有 HTTP Server (nginx) 來做控管。</li>
<li>主機機密資料是否要建立 vault 來隔離。</li>
<li>備原機制為何?</li>
<li>誰可以存取主機登入權限。</li>
</ul>
<br />
<br />
# 前端<br />
<br />
<ul>
<li>前端跟後端 API 的 CORS 設定</li>
<li>前端如何 persist 登入 token (cookie...)</li>
<li>前端的 Deploy 流程(是否能跟後端分開 Deploy )</li>
<li>Remember me 跟後端的搭配的實做</li>
<li>忘記密碼的流程</li>
<li>沒有權限存取的頁面控管...</li>
</ul>
<br />
<br />
想到慢慢補,還有很多就是..XD小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-62833400897255111832017-09-19T18:31:00.002-07:002017-09-19T18:31:05.273-07:00Middlware Arrow Function And Destructuring<pre><code>
const createMiddleware = (extraArgument) => ({dispatch, getState}) => (next) =>(action) => {//some code};
</code></pre>
<pre><code>
const createMiddleware = (extraArgument) => {
return ({dispatch, getState}) => {
return (next) => {
return (action) => {//some code};
}
}
}
</code></pre>
<br />
<br />
<br />
<a name='more'></a><br />
{dispatch, getState} 是解構賦值 (Destructuring)<br />
<br />
上層呼叫方 applyMiddleware.js 傳參數 middlewareAPI。<br />
<br />
return middleware(middlewareAPI);<br />
<br />
middlewareAPI 當中有兩個物件 dispatch, getState,<br />
下層被呼叫用 {dispatch, getState} 可以取得。<br />
<br />
<br />
<br />
<br />
ref .1 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</a><br />
<div>
<br /></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-81764080818166275452017-08-30T19:45:00.001-07:002017-08-30T20:51:49.011-07:00[CSS] All property 筆記<div>
<span cid="n2" class="md-line md-end-block" mdtype="line" style="box-sizing: border-box; display: block;"><span class="" md-inline="plain" style="box-sizing: border-box;">All 是 CSS 的用來重設樣式的屬性的簡化方法(shorthand), 重設範圍不包括 direction 跟 unicode-bidi。</span></span><span cid="n2" class="md-line md-end-block" mdtype="line" style="box-sizing: border-box; display: block;"><br /></span><span cid="n2" class="md-line md-end-block" mdtype="line" style="box-sizing: border-box; display: block;">瀏覽器支援度<a href="http://caniuse.com/#search=css%20all" style="box-sizing: border-box; color: #4183c4; cursor: pointer;">http://caniuse.com/#search=css%20all</a></span><span cid="n2" class="md-line md-end-block" mdtype="line" style="box-sizing: border-box; display: block;"><span style="font-size: 1.5em;"><br /></span></span><span cid="n2" class="md-line md-end-block" mdtype="line" style="box-sizing: border-box; display: block;"><span style="font-size: 1.5em;">All Value</span></span></div>
<ul cid="n38" class="ul-list" data-mark="-" mdtype="list" style="box-sizing: border-box; font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.8em 0px; padding-left: 30px; text-size-adjust: auto;">
<li><b>initial</b>: 重設樣式到 CSS spec 的初始值</li>
<li><span md-inline="plain" style="box-sizing: border-box;"><b>inherit</b>: 樣式會從parent element 的樣式繼承下來,包括一些 Non-inherited 的屬性,例如 </span><span class="" md-inline="link" style="box-sizing: border-box;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style" spellcheck="false" style="box-sizing: border-box; color: #4183c4; cursor: pointer;"><span md-inline="plain" style="box-sizing: border-box;">border</span></a></span><span md-inline="plain" style="box-sizing: border-box;">。 </span></li>
<li><b>unset</b>: 一些可繼承的樣式會從 parent element, Non-inherited 的樣式將會回到 CSS spec 的初始值。</li>
</ul>
<span style="font-family: "open sans" , "clear sans" , "helvetica neue" , "helvetica" , "arial" , sans-serif;"></span><br />
<div>
<span style="font-family: "open sans" , "clear sans" , "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-family: "open sans" , "clear sans" , "helvetica neue" , "helvetica" , "arial" , sans-serif;"><br /></span></span></div>
<span style="font-family: "open sans" , "clear sans" , "helvetica neue" , "helvetica" , "arial" , sans-serif;">
<div>
<span style="font-family: "open sans" , "clear sans" , "helvetica neue" , "helvetica" , "arial" , sans-serif;"><br /></span></div>
</span><br />
<ul cid="n38" class="ul-list" data-mark="-" mdtype="list" style="box-sizing: border-box; font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0.8em 0px; padding-left: 30px; text-size-adjust: auto;">
</ul>
<span class="" md-inline="plain" style="box-sizing: border-box;">Ref.1: </span><span md-inline="url" spellcheck="false" style="box-sizing: border-box; word-break: break-all;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance" style="box-sizing: border-box; color: #4183c4; cursor: pointer;">https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance</a></span><br />
<div cid="n78" mdtype="paragraph" style="-webkit-margin-after: 1rem; -webkit-margin-before: 1rem; box-sizing: border-box; font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 0.8em; margin-top: 0.8em; position: relative; text-size-adjust: auto; width: inherit;">
<span cid="n73" class="md-line md-end-block" mdtype="line" style="box-sizing: border-box; display: block;"><span md-inline="plain" style="box-sizing: border-box;">Ref.2: </span><span class="" md-inline="url" spellcheck="false" style="box-sizing: border-box; word-break: break-all;"><a href="https://alligator.io/css/inherit-initial-unset/" style="box-sizing: border-box; color: #4183c4; cursor: pointer;">https://alligator.io/css/inherit-initial-unset/</a></span></span></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-54816863669342548202017-08-16T00:38:00.002-07:002017-08-16T00:45:47.943-07:00[讀書] Clean Code: A Handbook of Agile Software Craftsmanship 下 讀書會筆記上一篇<a href="http://www.kvzhuang.net/2017/08/clean-code-handbook-of-agile-software.html">[讀書] Clean Code: A Handbook of Agile Software Craftsmanship 上</a>整理了讀書會的速記,這一篇來記錄一下心得跟團隊的回顧。<br />
<br />
自從 TenMax 公司副總 Richard 在 Daily Scrum 說到他今年的目標是要讓團隊進化成一個<b>自主、學習</b>的研發團隊,其實團隊就可以感受到一直在朝這方向前進。<br />
<br />
<b>自主</b>,就是成年人自己找方法,在面對廣告科技這複雜的生態圈,遇到問題騰學在台北新竹的開發同仁第一件想的事情,通常是我能提供什麼能力協助團隊去解決這個問題 ,不針對人去究責,而是思考著怎樣解決問題。<br />
<br />
<b>學習</b>,因為這個生態圈演化相當快速,不斷的增加自己的技能樹的廣度跟深度也是重要的。我們其實固定都有讀書會,從一開始的廣告科技的基礎理論書-<b>計算廣告</b>,接著是如何思考產業的正向成長的<b>平台經濟學</b>,後來接了一本硬技術底子的 <b>Clean Code</b>。以及在下來跟產品設計相關的 <b>Product Design for the Web</b>。<br />
<br />
不得不說大家在讀書會的選書都很有連貫性,環環緊扣著怎樣充實自己,怎樣規劃開發出有價值的產品,怎樣把平台滾大。<br />
<br />
這次讀書會 Clean Code 對我而言最大的收穫,就是在 Plan Meeting、開發的時候大家會不斷問,這段程式碼有沒有 Clean Code 阿?另外大家是分小組的方式進行,其中在 Unit Testing 的團隊更是用心的準備了許多線上範例教材給大家一起練習,非常用心。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQk7YOk8PvHY83bnzgDBweT-7iT3-qI53RkZ_1CPinaNiBcE4wuOVJCFUl_EA5TILfro2_bf_2nKnd4ufY9-Y-bFQRwIFBGBTtTMQdznPMVprol11NJrEJlUvkDaRZwKU335H3w/s1600/Image+uploaded+from+iOS+%25281%2529.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1200" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQk7YOk8PvHY83bnzgDBweT-7iT3-qI53RkZ_1CPinaNiBcE4wuOVJCFUl_EA5TILfro2_bf_2nKnd4ufY9-Y-bFQRwIFBGBTtTMQdznPMVprol11NJrEJlUvkDaRZwKU335H3w/s320/Image+uploaded+from+iOS+%25281%2529.jpg" width="240" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtRZFh9pha3wvek6gglF7fEteqf9cqbz661ydxi4VjsqSFgZv-mvtfaUYaZO8pJQI8RA4vdqST1PFYGgUGR2rbVZ5EF6RrHa98qIm_nH4ys-Z74BnxUDpgxKzDbUmBJ5V-RYnN2A/s1600/Image+uploaded+from+iOS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="1200" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtRZFh9pha3wvek6gglF7fEteqf9cqbz661ydxi4VjsqSFgZv-mvtfaUYaZO8pJQI8RA4vdqST1PFYGgUGR2rbVZ5EF6RrHa98qIm_nH4ys-Z74BnxUDpgxKzDbUmBJ5V-RYnN2A/s320/Image+uploaded+from+iOS.jpg" width="240" /></a></div>
<br />
<br />
上圖是我們讀書會後的檢討( Retro ),當然有優點,也有值得改善的地方,團隊跑敏捷開發跑了一段時間了,這次讀書會也以敏捷的精神來跑,不免俗的就是最後會檢討一下。<br />
<br />
但是這邊檢討不是那種針鋒相對的說誰做的不好,這種指責性的檢討。大家都有一個觀念就是<b>誠實的面對問題,並且思考下一次要如何改善問題。</b><br />
<br />
其實之前讀書會計算廣告大家覺得後面的章節太多數學公式,大家再討論流於形式,這次 Clean Code 讀書會就把後面一些章節捨去,但是其實很可惜的,後面有蠻多值得大家討論的實做。<br />
<br />
<br />小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-20086075892152179052017-08-16T00:24:00.003-07:002017-08-16T03:25:22.695-07:00[Angular] Directive Isolate Scope Note<br />
<img alt="enter image description here" src="https://i.stack.imgur.com/wooNr.png" /><br />
<br />
<div style="background-color: white; border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<br /></div>
<h3 style="background: rgb(255, 255, 255); border: 0px; color: #333333; font-family: Oswald, Helvetica, Arial, Lucida, sans-serif; font-size: 22px; font-weight: 500; line-height: 1em; margin: 0px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline;">
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">@ – one way binding</strong></div>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
In directive:</div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> scope </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> name </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"@name"</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></code></pre>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
In view:</div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="tag" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><my-widget span=""><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="border: 0px; color: #e64320; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="border: 0px; color: #0f74bd; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"{{nameFromParentScope}}"</span><span class="tag" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></my-widget></span></code></pre>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">= – two way binding</strong></div>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
In directive:</div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> scope </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> name </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"=name"</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">},</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
link </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; color: #101094; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">scope</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
scope</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"Changing the value here will get reflected in parent scope value"</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> }</span></code></pre>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
In view:</div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="tag" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><my-widget span=""><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="border: 0px; color: #e64320; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="border: 0px; color: #0f74bd; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"{{nameFromParentScope}}"</span><span class="tag" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">> </span></my-widget></span></code></pre>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">& – Function call</strong></div>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
In directive :</div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> scope </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> nameChange </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"&"</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
link </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="border: 0px; color: #101094; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">scope</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
scope</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">nameChange</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">({</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">newName</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="str" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"NameFromIsolaltedScope"</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">});</span><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> }</span></code></pre>
<div style="border: 0px; clear: both; color: #242729; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
In view:</div>
<pre class="default prettyprint prettyprinted" style="background-color: #eff0f1; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="tag" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><my-widget span=""><span class="pln" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="atn" style="border: 0px; color: #e64320; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">nameChange</span><span class="pun" style="border: 0px; color: #303336; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="atv" style="border: 0px; color: #0f74bd; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"onNameChange(newName)"</span><span class="tag" style="border: 0px; color: #7d2727; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">></span></my-widget></span></code></pre>
</h3>
<div>
<br /></div>
<br />
<a name='more'></a><br />
require 屬性符號<br />
<br />
<ul style="background-color: white; box-sizing: border-box; margin-bottom: 10px; margin-top: 0px;">
<li style="box-sizing: border-box;"><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 14px;"><b>(no prefix) </b>- Locate the required controller on the current element. Throw an error if not found.</span></span></li>
<li style="box-sizing: border-box;"><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 14px;"><b>?</b> - Attempt to locate the required controller or pass null to the link fn if not found.</span></span></li>
<li style="box-sizing: border-box;"><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 14px;"><b>^ </b>- Locate the required controller by searching the element and its parents. Throw an error if not found.</span></span></li>
<li style="box-sizing: border-box;"><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 14px;"><b>^^</b> - Locate the required controller by searching the element's parents. Throw an error if not found.</span></span></li>
<li style="box-sizing: border-box;"><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 14px;"><b>?^</b> - Attempt to locate the required controller by searching the element and its parents or pass null to the link fn if not found.</span></span></li>
<li style="box-sizing: border-box;"><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 14px;"><b>?^^</b> - Attempt to locate the required controller by searching the element's parents, or pass null to the link fn if not found.</span></span></li>
</ul>
<br />
Ref.1: <a href="https://stackoverflow.com/questions/14908133/what-is-the-difference-between-vs-and-in-angularjs">https://stackoverflow.com/questions/14908133/what-is-the-difference-between-vs-and-in-angularjs</a><br />
<br />
Ref.2: <a href="https://docs.angularjs.org/api/ng/service/$compile">https://docs.angularjs.org/api/ng/service/$compile</a><br />
<br />
Ref.3: <a href="http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs">http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs</a><br />
<br />小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-42304381654880214792017-08-12T05:32:00.004-07:002017-08-12T05:33:04.221-07:002017 走吧!尋找最棒的自己 觀看事件紀錄今天2017/08.12下午兩點半帶小朋友去中山堂由<b>風潮音樂</b>主辦的 2017 <b>走吧!尋找最棒的自己</b>,感覺非常之差。<br />
<br />
因為我們買了3000元的票,卻因為小朋友場地怕黑大哭而被請出去外面看螢幕。首先我要說,我們對這個親子音樂會努力很久,包括對小朋友做心理建設,讓他網路上先聽了謝欣芷老師的youtube影片。<br />
<br />
只要小朋友一哭我們立刻都是安撫他,我老婆一開始他哭了就帶他出去,但是上半場我們出去劇場我們沒有被告知就不能再進來了,所以上半場只好在外面看螢幕。<br />
<br />
下半場前我們不斷給孩子心理建設,但是中間還是被告知因為小朋友哭鬧希望我們離開,實際上中間有表演的時候小朋友都是安靜地在看的,只有過場燈光熄掉會大哭,但是我們絕對立刻安撫,但是大約下半場第二首歌我們就被請出去了。<br />
<br />
小朋友在外面心情平復了之後,他看著電視指著跟我們說他還想進去看,但是工作人員說已經是最後一首了,等結束才能再進去了。<br />
<br />
聽著場上表演者不斷表演,小朋友要做你自己,最棒的就是你,不要哭泣。但是或許他們不能容許一個兩歲的孩童在一個短暫的黑暗時間的哭泣。我們身為家長也不知道是做錯了什麼,但是我們會在他害怕的時候永遠守護著他。<br />
<br />
<br />小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-58464353046428341102017-08-10T23:14:00.003-07:002017-08-15T09:13:38.019-07:00[讀書] Clean Code: A Handbook of Agile Software Craftsmanship 上<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_hOxssXXNGqV8wVjabkhXciJP9RWbzmEV4JWDAOmPw3SiJMGHFXxeCrbBE8Ttv8PRbpyZZ8d4nABnEcEO1d2yfr9kMx45BemKtkhEx3Tl7Bd5XMG436oglK3sRoZIyM8sOVaQzQ/s1600/3I3WaUDAt0tIQ6gUdxcl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="768" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_hOxssXXNGqV8wVjabkhXciJP9RWbzmEV4JWDAOmPw3SiJMGHFXxeCrbBE8Ttv8PRbpyZZ8d4nABnEcEO1d2yfr9kMx45BemKtkhEx3Tl7Bd5XMG436oglK3sRoZIyM8sOVaQzQ/s320/3I3WaUDAt0tIQ6gUdxcl.jpg" width="240" /></a></div>
<br />
最近公司 TenMax 的研發團隊完成了 Clean Code 這本書的讀書會,我自己覺得這本書很有趣,尤其在一個成熟的研發團隊正在開發或維護大型軟體,裡面有很多好的準則常常會在Plan Meeting 或是隊友在討論開發細節的時候常常聽到,「這個寫法有沒有 Clean Code 阿?」。<br />
<br />
趁熱筆記一下個章節的速記<br />
<br />
<b>第1章 無瑕的程式碼 - Clean Code</b><br />
<ul>
<li>簡介一些大師眼中何謂 Clean Code。</li>
</ul>
<b>第2章 有意義的命名 - Meaningful Names</b><br />
<ul>
<li>命名是程式中最難的事情,提供了一些避免跟建議的命名方法。</li>
</ul>
<b>第3章 函式 - Functions</b><br />
<ul>
<li>簡短,只做一件事情原則,才能算是好函示。</li>
<li>降層原則,讓閱讀函示像是閱讀文件。</li>
<li>函示的參數小於等於2最理想。</li>
</ul>
<b>第4章 註解 - Comments</b><br />
<ul>
<li>註解的目的</li>
<ul>
<li>快速回憶上下文</li>
<li>瞭解開發者意圖</li>
<li>最好的註解就是程式本身</li>
</ul>
</ul>
<b>第5章 編排 - Formatting</b><br />
<ul>
<li>編排是團隊的一個共同溝通方式</li>
<li>每一段程式碼都代表一個完整的思緒,可用編排( ex :空白行)來分隔思緒。</li>
<li>space or tab?</li>
<li>function { } carriage return ? </li>
</ul>
<b>第6章 物件及資料結構 - Objects and Data Structures</b><br />
<ul>
<li>資料的抽象化</li>
<li>結構化的程式碼難以添加新的資料結構,因為必須改變所有的函。</li>
<li>物件導向程式碼難以添加新的函示,因為必須改變所有的的類別。</li>
<li>物件還是資料結構</li>
<ul>
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">物件(Object): 暴露行為並隱藏內部資料</span></li>
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">資料結構(Data Object): 暴露資料但不會有行為</span></li>
</ul>
<li>德摩特爾法則 (The Law of Demeter)</li>
</ul>
<br />
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">假設下面的程式碼</span></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-rust" spellcheck="false">Result result = myObject.myMethod(ctxt)</code></div>
<div>
<br /></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">那</span><span class="inline-code author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z"><span style="background-color: #f7f9fa; border: 1px solid rgba(208 , 212 , 217 , 0.5); color: #1b2733; font-family: monospace;">myMethod</span></span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">應該只能用到</span></div>
<ol class="listtype-number listindent1 list-number1" start="1">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">自己: </span><span class="inline-code author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z"><span style="background-color: #f7f9fa; border: 1px solid rgba(208 , 212 , 217 , 0.5); color: #1b2733; font-family: monospace;">myobject</span></span></li>
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">傳進來的參數: </span><span class="inline-code author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z"><span style="background-color: #f7f9fa; border: 1px solid rgba(208 , 212 , 217 , 0.5); color: #1b2733; font-family: monospace;">ctxt</span></span></li>
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">回傳的結果: </span><span class="inline-code author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z"><span style="background-color: #f7f9fa; border: 1px solid rgba(208 , 212 , 217 , 0.5); color: #1b2733; font-family: monospace;">result</span></span></li>
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z">自己所持有的物件: </span><span class="inline-code author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3u8z87zez76zz87zt7z90zcz75zz68za7z65z1z81z9z74zz71zz78zz71zz84z1vz80zz75z4z66z"><span style="background-color: #f7f9fa; border: 1px solid rgba(208 , 212 , 217 , 0.5); color: #1b2733; font-family: monospace;">myobject.ooo</span></span></li>
</ol>
<b>第7章 錯誤處理 - Error Handling</b><br />
<ul>
<li>讓錯誤的意圖變的明顯</li>
<li>Checked Exception vs Unchecked Exception</li>
<li>在不正確的地方寫錯誤處理,導致邏輯混亂,例如該正確運行的地方還加上處理</li>
<li><div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z95ivnu9z83zvz89ztfz85zcqz79z4in9vz88zz86zz77zz88zq6vz80zz73zf">錯誤處理,依照</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z95ivnu9z83zvz89ztfz85zcqz79z4in9vz88zz86zz77zz88zq6vz80zz73zf"><b>撰寫者意圖</b></span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z95ivnu9z83zvz89ztfz85zcqz79z4in9vz88zz86zz77zz88zq6vz80zz73zf">應該要有兩種形式</span></div>
</li>
<ul>
<li>嚴重錯誤</li>
<li>應該要被完整處理的情況</li>
</ul>
</ul>
<br />
<b>第8章 邊界 - Boundaries</b><br />
<ul>
<li>探索與學習邊界: 常見案例,整合第三方軟體</li>
<li>學習性測試:</li>
<li>不要在產品程式實驗新的東西,而是額外撰寫程式程式來探索第三方軟體</li>
</ul>
<br />
<b>第9章 單元測試 - Unit Tests</b><br />
<span style="color: #666666;">內容很多,尚待補充</span><br />
<br />
<b>第10章 類別 - Classes</b><br />
<ul>
<li>類別就是一種封裝的方式</li>
<li>類別要夠簡短,命名是一個判斷的方式,如果無法取一個簡明的名稱,他負責的東西可能太大了。</li>
<li>是否能用簡短的方式敘述一個類別的目的。</li>
<li>單一職責原則(Single Responsibility Principle SRP), 主張一個類別或一個模組應該有一個,而且只能有一個修改的理由。</li>
<li>保持類別的凝聚性,可能會得到許多小型的類別。</li>
<li>Open To Change</li>
<li>利用抽象化隔離修改</li>
</ul>
<br />
<br />
<br />小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-81823127463463245112017-08-06T18:51:00.001-07:002017-08-06T18:51:10.529-07:00[React] constructor bind this or Component event bind this?<div style="background-color: white; color: #1d2129; font-family: "San Francisco", -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; letter-spacing: -0.26px; margin-bottom: 6px;">
最近在跟公司的團隊還有朋友再深入討論 React 的效能細節,有討論到 React 的 function bind this 要寫在constructor 還是使用 arrow function ?</div>
<div style="background-color: white; color: #1d2129; font-family: "San Francisco", -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; letter-spacing: -0.26px; margin-bottom: 6px; margin-top: 6px;">
後來實驗出來我個人推薦在 constructor bind ,並且使用 props 把所需參數傳入。</div>
<div style="background-color: white; color: #1d2129; font-family: "San Francisco", -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; letter-spacing: -0.26px; margin-bottom: 6px; margin-top: 6px;">
原因是因為如果是在 Component 的事件裡面 bind,或是使用 arrow function auto bind ,實際上在 React Render 裡面的 function 都是新產生的,而 constructor bind 則會同一個 function,當一個畫面 render 久了前者就有效能議題了。</div>
<div style="background-color: white; color: #1d2129; font-family: "San Francisco", -apple-system, system-ui, ".SFNSText-Regular", sans-serif; font-size: 15px; letter-spacing: -0.26px; margin-bottom: 6px; margin-top: 6px;">
範例程式碼在<br /><a data-ft="{"tn":"-U"}" href="https://l.facebook.com/l.php?u=https%3A%2F%2Fjsbin.com%2Fhowida%2Fedit%3Fjs%2Cconsole%2Coutput&h=ATMaCbKaHc6P7TexeVkUnJdpykBPhnQ4TmH9BEG9hayIUrOi7b1KnOk99aqQ_bgmvudX2HsEkGUDHVFyNFf6O-pKJrE9qKedm_iCwTSETgfUvzFSh3VXQQwNyLpSZBAlLfJ45SGynYS5GOCL2gB16x8O2nFWBzE&enc=AZNF6XBJbIHQU2CwB14dCRAGZIQZeO09I64y2j8DGye2qRuuP7DjQkBGQ8EboZegVD_eIF36-ttrbus2uIyjt6hp7YLbEA7jqPbZ8MjDa6VN94KZl6ZupLAeAQQdlEnu8t1Jd2KemXZlAwshHkNM9A4PDXVkn87Ah_faxPdAV7y5OnqPAKWcrAnXloZm567jG8gpfK9inReNlCwqdtjGxtZe&s=1" rel="nofollow noopener" style="color: #365899; cursor: pointer; font-family: inherit; text-decoration-line: none;" target="_blank">https://jsbin.com/howida/edit?js,console,output</a></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-41954585856697543812017-06-06T00:17:00.002-07:002017-06-06T00:25:22.502-07:00[HTML] img 標籤無法使用 ::after ::beforeimg 標籤無法使用::after,::before,不會有任何效果。<br />
<br />
主要是因為img是<a href="https://www.w3.org/TR/html/syntax.html#void-elements">void element</a>,其定義跟範例如下:<br />
<blockquote class="tr_bq">
<a data-link-type="dfn" href="https://www.w3.org/TR/html/syntax.html#void-elements" id="ref-for-void-elements-5" style="background-color: white; border-bottom: 1px solid rgb(187, 187, 187); color: #034575; font-family: sans-serif; margin: 0px -1px; padding: 0px 1px; text-decoration-line: none;">Void elements</a><span style="background-color: white; font-family: sans-serif;"> can’t have any contents (since there’s no end tag, no content can be put between the start tag and the end tag).</span></blockquote>
<a href="https://codepen.io/kvzhuang/pen/rwagbb">Code Example</a><br />
<br />
另外void element所以 img可以不用end tag ,<span style="font-family: monospace; font-size: 12pt;"><img>即可。</span><br />
<span style="font-family: monospace;"><br /></span>
<span style="font-family: monospace;">下面是不正確的void element。</span><br />
<span style="font-family: monospace;"><br /></span>
<code><img>this is invalid img tag</img></code>
<br />
<br />
下次如果為了樣式要在img tag塞before/after pseudo element,還是乖乖用個span包住他吧。<br />
<br />
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: x-small;"><b><i><span lang="EN-US" style="color: black; font-family: "calibri";">Void elements</span></i></b><span lang="EN-US" style="color: black; font-family: "calibri";"><o:p></o:p></span></span></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: x-small;"><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/semantics-embedded-content.html#elementdef-area">area</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/document-metadata.html#elementdef-base">base</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/textlevel-semantics.html#elementdef-br">br</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/tabular-data.html#elementdef-col">col</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/semantics-embedded-content.html#elementdef-embed">embed</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/grouping-content.html#elementdef-hr">hr</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/semantics-embedded-content.html#elementdef-img">img</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/sec-forms.html#elementdef-input">input</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/sec-forms.html#elementdef-keygen">keygen</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/document-metadata.html#elementdef-link">link</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/interactive-elements.html#elementdef-menuitem">menuitem</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/document-metadata.html#elementdef-meta">meta</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/semantics-embedded-content.html#elementdef-param">param</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/semantics-embedded-content.html#elementdef-media-source">source</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/semantics-embedded-content.html#elementdef-track">track</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/textlevel-semantics.html#elementdef-wbr">wbr</a></span><span lang="EN-US" style="color: black; font-family: "calibri";"><o:p></o:p></span></span></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<b style="font-size: small;"><i><span lang="EN-US" style="color: black; font-family: "calibri";">Raw text elements</span></i></b></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: x-small;"><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/semantics-scripting.html#elementdef-script">script</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, </span><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/document-metadata.html#elementdef-style">style</a></span><span lang="EN-US" style="color: black; font-family: "calibri";"><o:p></o:p></span></span></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<b style="font-size: small;"><i><span lang="EN-US" style="color: black; font-family: "calibri";">escapable raw text
elements</span></i></b></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: x-small;"><span lang="EN-US" style="color: #d93b00; font-family: "calibri";"><a href="https://www.w3.org/TR/html/sec-forms.html#elementdef-textarea">textarea</a></span><span lang="EN-US" style="color: black; font-family: "calibri";">, <span style="color: #d93b00;"><a href="https://www.w3.org/TR/html/document-metadata.html#elementdef-title">title</a></span><o:p></o:p></span></span></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<b style="font-size: small;"><i><span lang="EN-US" style="color: black; font-family: "calibri";">Foreign elements</span></i></b></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<span lang="EN-US" style="color: black; font-family: "calibri";"><span style="font-size: x-small;">Elements from the <a href="https://www.w3.org/TR/html/infrastructure.html#mathml-namespace"><span style="color: #034575;">MathML namespace</span></a> and the <a href="https://www.w3.org/TR/html/infrastructure.html#svg-namespace"><span style="color: #034575;">SVG namespace</span></a>.<o:p></o:p></span></span></div>
<div style="background: white; margin-bottom: .0001pt; margin: 0cm;">
<b style="font-size: small;"><i><span lang="EN-US" style="color: black; font-family: "calibri";">Normal elements </span></i></b><br />
<span style="background-color: white; font-family: "calibri"; font-size: x-small;">All other allowed </span><a href="https://www.w3.org/TR/html/infrastructure.html#html-element" style="font-family: calibri; font-size: small;"><span style="color: #034575;">html elements</span></a><span style="background-color: white; font-family: "calibri"; font-size: x-small;"> are normal elements.</span></div>
<br />
<div>
<span lang="EN-US" style="color: black; font-family: "calibri"; font-size: x-small; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Reference: <a href="https://www.w3.org/TR/html/syntax.html#writing-html-documents-elements">https://www.w3.org/TR/html/syntax.html#writing-html-documents-elements</a></span></div>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:DrawingGridVerticalSpacing>10 pt</w:DrawingGridVerticalSpacing>
<w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>
<w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>ZH-TW</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:SpaceForUL/>
<w:BalanceSingleByteDoubleByteWidth/>
<w:DoNotLeaveBackslashAlone/>
<w:ULTrailSpace/>
<w:DoNotExpandShiftReturn/>
<w:AdjustLineHeightInTable/>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:EnableOpenTypeKerning/>
<w:DontFlipMirrorIndents/>
<w:OverrideTableStyleHps/>
<w:UseFELayout/>
</w:Compatibility>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="false"
DefSemiHidden="false" DefQFormat="false" DefPriority="99"
LatentStyleCount="380">
<w:LsdException Locked="false" Priority="0" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index 9"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" Name="toc 9"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footnote text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="header"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footer"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="index heading"/>
<w:LsdException Locked="false" Priority="35" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="table of figures"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="envelope address"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="envelope return"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="footnote reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="line number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="page number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="endnote reference"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="endnote text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="table of authorities"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="macro"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="toa heading"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Bullet 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Number 5"/>
<w:LsdException Locked="false" Priority="10" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Closing"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Signature"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="true"
UnhideWhenUsed="true" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="List Continue 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Message Header"/>
<w:LsdException Locked="false" Priority="11" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Salutation"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Date"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text First Indent"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text First Indent 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Heading"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Body Text Indent 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Block Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Hyperlink"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="FollowedHyperlink"/>
<w:LsdException Locked="false" Priority="22" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Document Map"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Plain Text"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="E-mail Signature"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Top of Form"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Bottom of Form"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal (Web)"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Acronym"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Address"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Cite"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Code"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Definition"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Keyboard"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Preformatted"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Sample"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Typewriter"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="HTML Variable"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Normal Table"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="annotation subject"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="No List"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Outline List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Simple 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Classic 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Colorful 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Columns 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Grid 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table List 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table 3D effects 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Contemporary"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Elegant"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Professional"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Subtle 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Subtle 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Web 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Balloon Text"/>
<w:LsdException Locked="false" Priority="39" Name="Table Grid"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Table Theme"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 1"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 2"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 3"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 4"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 5"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 6"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 7"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 8"/>
<w:LsdException Locked="false" SemiHidden="true" UnhideWhenUsed="true"
Name="Note Level 9"/>
<w:LsdException Locked="false" SemiHidden="true" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" SemiHidden="true" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" QFormat="true"
Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" QFormat="true"
Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" QFormat="true"
Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" QFormat="true"
Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" QFormat="true"
Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" QFormat="true"
Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" SemiHidden="true"
UnhideWhenUsed="true" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" SemiHidden="true"
UnhideWhenUsed="true" QFormat="true" Name="TOC Heading"/>
<w:LsdException Locked="false" Priority="41" Name="Plain Table 1"/>
<w:LsdException Locked="false" Priority="42" Name="Plain Table 2"/>
<w:LsdException Locked="false" Priority="43" Name="Plain Table 3"/>
<w:LsdException Locked="false" Priority="44" Name="Plain Table 4"/>
<w:LsdException Locked="false" Priority="45" Name="Plain Table 5"/>
<w:LsdException Locked="false" Priority="40" Name="Grid Table Light"/>
<w:LsdException Locked="false" Priority="46" Name="Grid Table 1 Light"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark"/>
<w:LsdException Locked="false" Priority="51" Name="Grid Table 6 Colorful"/>
<w:LsdException Locked="false" Priority="52" Name="Grid Table 7 Colorful"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 1"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 1"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 1"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 1"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 1"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 2"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 2"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 2"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 2"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 2"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 3"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 3"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 3"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 3"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 3"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 4"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 4"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 4"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 4"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 4"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 5"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 5"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 5"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 5"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 5"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="46"
Name="Grid Table 1 Light Accent 6"/>
<w:LsdException Locked="false" Priority="47" Name="Grid Table 2 Accent 6"/>
<w:LsdException Locked="false" Priority="48" Name="Grid Table 3 Accent 6"/>
<w:LsdException Locked="false" Priority="49" Name="Grid Table 4 Accent 6"/>
<w:LsdException Locked="false" Priority="50" Name="Grid Table 5 Dark Accent 6"/>
<w:LsdException Locked="false" Priority="51"
Name="Grid Table 6 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="52"
Name="Grid Table 7 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="46" Name="List Table 1 Light"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark"/>
<w:LsdException Locked="false" Priority="51" Name="List Table 6 Colorful"/>
<w:LsdException Locked="false" Priority="52" Name="List Table 7 Colorful"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 1"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 1"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 1"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 1"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 1"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 1"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 2"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 2"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 2"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 2"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 2"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 2"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 3"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 3"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 3"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 3"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 3"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 3"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 4"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 4"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 4"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 4"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 4"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 4"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 5"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 5"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 5"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 5"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 5"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 5"/>
<w:LsdException Locked="false" Priority="46"
Name="List Table 1 Light Accent 6"/>
<w:LsdException Locked="false" Priority="47" Name="List Table 2 Accent 6"/>
<w:LsdException Locked="false" Priority="48" Name="List Table 3 Accent 6"/>
<w:LsdException Locked="false" Priority="49" Name="List Table 4 Accent 6"/>
<w:LsdException Locked="false" Priority="50" Name="List Table 5 Dark Accent 6"/>
<w:LsdException Locked="false" Priority="51"
Name="List Table 6 Colorful Accent 6"/>
<w:LsdException Locked="false" Priority="52"
Name="List Table 7 Colorful Accent 6"/>
</w:LatentStyles>
</xml><![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:新細明體;
mso-font-charset:136;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:-1610611969 684719354 22 0 1048577 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;
mso-font-charset:0;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:-536870145 1107305727 0 0 415 0;}
@font-face
{font-family:"\@新細明體";
mso-font-charset:136;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:-1610611969 684719354 22 0 1048577 0;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;
mso-font-charset:0;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:-536870145 1073786111 1 0 415 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:none;
font-size:12.0pt;
font-family:Calibri;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:新細明體;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}
a:link, span.MsoHyperlink
{mso-style-noshow:yes;
mso-style-priority:99;
color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-noshow:yes;
mso-style-priority:99;
color:#954F72;
mso-themecolor:followedhyperlink;
text-decoration:underline;
text-underline:single;}
p
{mso-style-noshow:yes;
mso-style-priority:99;
mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:新細明體;
mso-fareast-theme-font:minor-fareast;}
.MsoChpDefault
{mso-style-type:export-only;
mso-default-props:yes;
font-family:Calibri;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
/* Page Definitions */
@page
{mso-page-border-surround-header:no;
mso-page-border-surround-footer:no;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
mso-header-margin:36.0pt;
mso-footer-margin:36.0pt;
mso-paper-source:0;}
div.WordSection1
{page:WordSection1;}
</style>
<br />
<span style="font-size: x-small;"><br /><!--EndFragment--></span>
<span style="font-size: x-small;"><br /></span>
<br />
<div class="MsoNormal" style="background: white; margin-bottom: 6.0pt; margin-left: 36.0pt; margin-right: 0cm; margin-top: 0cm; mso-pagination: widow-orphan;">
<br /></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-37446134530867932032017-05-08T01:25:00.002-07:002017-05-08T01:28:00.889-07:00OpenRTB 2.3 Reading Notes (CH.2)OpenRTB(Version2.3) 第二章主要介紹基本原理<br />
<br />
<h4>
<b><span style="color: #073763;">Chap 2. OpenRTB Basic</span></b></h4>
以流程面的話如下圖:<br />
從Publishers來的request,到Buyers想要投遞廣告response。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqSTFXBilQ0SdNHo5-oybeYSdRjInaRBHgTsx2zFVhkiur8XrdOBtXZOPvkHYMNayPH3KQ5lOnYq-jFdvRhuPY1Ojqg7sQN1LUStCHI1P5E_BhwWTPMCRAqcvTfC6T_N9_eLsFw/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E6%2588%25AA%25E5%259C%2596+2017-05-08+16.12.52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqSTFXBilQ0SdNHo5-oybeYSdRjInaRBHgTsx2zFVhkiur8XrdOBtXZOPvkHYMNayPH3KQ5lOnYq-jFdvRhuPY1Ojqg7sQN1LUStCHI1P5E_BhwWTPMCRAqcvTfC6T_N9_eLsFw/s640/%25E8%259E%25A2%25E5%25B9%2595%25E6%2588%25AA%25E5%259C%2596+2017-05-08+16.12.52.png" width="640" /></a></div>
<b><br /></b>
<b><span style="color: #073763;">Chap 2.1 Transport</span></b><br />
<ul>
<li>在交換資訊的過程主要是HTTP協定。特別是為了讓Bid Request能夠比使用HTTP GET更大的payload,HTTP POST則是必要使用的傳輸方式。</li>
</ul>
<ul>
<li>除了空的Bid Response(推薦使用"No bid"作為稱呼)使用HTTP Code 204,其餘回傳HTTP Code 200。</li>
</ul>
<ul>
<li>可以啟用HTTP Persistent Connections( Keep-Alive)優化網路連線。</li>
</ul>
<b><br /></b>
<b><span style="color: #073763;">Chap 2.2 Security</span></b><br />
<ul>
<li>由於上面的流程是Server-to-Server,SSL(Security Sockets Layer)並不是必要的傳輸規定。</li>
<li>可透過其他方式保護連線,同時也可以降低上述流程的額外的處理。</li>
</ul>
<div>
<br /></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0tag:blogger.com,1999:blog-9439214.post-74426512835070140382017-04-13T23:41:00.001-07:002017-04-13T23:41:42.130-07:00[JavaScript] Strict Mode<div>
<h1 class="ace-copy-paste-skip-this-tag">
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">[JavaScript] Strict Mode</span></h1>
</div>
<div>
<br /></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">ECMAScript 5的Strict Mode不是ECMAScript 的子集。</span></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode 執行上跟Non-Strict Mode下有明顯差異。</span></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode 跟Non-Strict Mode可並存。</span></div>
<div>
<br /></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode 將JavaScript再執行一些陷阱語法直接丟明顯的錯誤。</span></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode 修正JavaScript Engine難以優化的錯誤。</span></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode 禁止了一些未來ECMAScript可能會使用的關鍵字。</span></div>
<div>
<br /></div>
<div>
<span class="ace-separator author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><hr style="border-bottom-color: rgb(193, 199, 205); border-bottom-style: solid; display: inline-block; font-size: 1px; height: 1px; line-height: 16px; width: 100%;" />
</span></div>
<div>
<h2 data-usually-unique-id="691308185856091">
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">開啟Strict Mode</span></h2>
</div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">"use strict";</span></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" start="1">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">放在語法前。</span></li>
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">不要將”use strict”用在{}使用,他會失去效果。</span></li>
</ol>
<div>
<br /></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">{</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<ul class="listtype-indent listindent1 list-indent1 lang-javascript" spellcheck="false" style="list-style-type: none;">
<li><br /></li>
</ul>
</div>
<ol class="listtype-number listindent1 list-number1" data-original-start="3" start="3">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">可以在function scope開啟strict mode。</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">!function strict() {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> <span class=" s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict";</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> function nested() {return</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">So am I!";}</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> return</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">I am strict mode</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">+ nested();</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}();</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">!function nonStrict() {return</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">I am non Strict";}();</span></code></div>
<div>
<span class="ace-separator author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><hr style="border-bottom-color: rgb(193, 199, 205); border-bottom-style: solid; display: inline-block; font-size: 1px; height: 1px; line-height: 16px; width: 100%;" />
</span></div>
<div>
<h2 data-usually-unique-id="194083447359880">
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode執行上的不同</span></h2>
</div>
<ol class="listtype-number listindent1 list-number1" start="1">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">拼寫錯誤的變數(或沒有宣告就存取的變數)會拋出異常。</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var nAme;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">nEme = 17; // ReferenceError</code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="2" start="2">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Silently Fail</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">程式碼執行不報錯也沒有效果的錯誤)會拋出異常。</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var obj1 = {};</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Object.defineProperty(obj1,</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">x", {value: 42, writeable: false}});</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">obj1.x = 9; //TypeError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var obj2 = {get x(){return 17;}};</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">obj2.x = 5; // TypeError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var fixed = {};</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">Object.preventExtensions(fixed);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">fixed.newProp =</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">ohai"; // TypeError</span></code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="3" start="3">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">試圖刪除不可刪除之屬性會拋出異常</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">delete Object.prototype; // TypeError</code></div>
<div>
<br /></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="4" start="4">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Gecko 34以前下方指令會丟出錯誤(ECMAScript6不存在)</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var o = {p:1, p:2};</code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="5" start="5">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">函數的參數要唯一</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function sum(a, a, c) {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> <span class=" s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict";</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> <span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">return a+b+c;</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="6" start="6">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">禁止八進位語法</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var a = 0o10;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">parseInt(a);</code></div>
<div>
<br /></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var sum = 015 + // SyntaxError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> 197 +</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> 142;</code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="7" start="7">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">禁止設置primitive值屬性</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">!function() {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">false.true =</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">"; //TypeError</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">(14).sailing =</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">home"; //TypeError</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">"with".you =</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">far away"; //TypeError</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}();</code></div>
<div>
<br /></div>
<div>
<span class="ace-separator author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><hr style="border-bottom-color: rgb(193, 199, 205); border-bottom-style: solid; display: inline-block; font-size: 1px; height: 1px; line-height: 16px; width: 100%;" />
</span></div>
<div>
<h2 data-usually-unique-id="001750605727861">
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">簡化變數(variable)的使用</span></h2>
</div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" start="1">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">禁止使用with</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var x = 17;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">with</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">obj) // SyntaxError</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">{</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> x; // x mean obj.x or var x? it will make engine can not process optimization. </code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="2" start="2">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode下的eval不在讓surrounding scope(包圍eval的scope),注入新變數。例如eval(‘var’)</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">function a</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">) {</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> <span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">eval('var x=10');</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> console.log(x); //x will be create.</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<br /></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var x = 17;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var evalX = eval("'use strict'; var x = 42; x"); //this x !== var x=17</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(x === 17);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(evalX === 42);</code></div>
<div>
<br /></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">2.1 如果eval在Strict Mode下面執行,其代碼會被當作在Strict Mode下為執行。</span></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function strict1(str) {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict';</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> return eval(str); // str will be treated as strict mode code</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function strict2(f, str) {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict';</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> return f(str); // not eval(...): str is strict if and only</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> // if it invokes strict mode</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function nonstrict(str) {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> return eval(str); // str is strict if and only </code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> // if it invokes strict mode</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">strict1("'Strict mode code!'");</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">strict1("'use strict';</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict mode code!'");</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">strict2(eval,</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">'Non-strict code.'");</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">strict2(eval,</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">'use strict';</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict mode code!'");</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">nonstrict("'Non-strict code.'");</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">nonstrict("'use strict';</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict mode code!'");</span></code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="3" start="3">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode禁止刪除變數</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">'use strict';</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var a={x:10};</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">delete a.x; // It can delete</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var x;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">delete x; // SyntaxError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">eval('var y; delete y;'); // SyntaxError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<br /></div>
<div>
<span class="ace-separator author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><hr style="border-bottom-color: rgb(193, 199, 205); border-bottom-style: solid; display: inline-block; font-size: 1px; height: 1px; line-height: 16px; width: 100%;" />
</span></div>
<div>
<h2 data-usually-unique-id="835289191178244">
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">簡化eval跟arguments</span></h2>
</div>
<ol class="listtype-number listindent1 list-number1" start="1">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">對eval跟arguments誤用的範例如下</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">eval = 17;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">arguments++;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">++eval;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var obj = { set p(arguments) { } };</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var eval;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">try { } catch</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">arguments) { }</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function x(eval) { }</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function arguments() { }</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var y = function eval() { };</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">var f = new Function("arguments",</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">'use strict'; return 17;");</span></code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="2" start="2">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode 函數arguments的值,不會隨著參數變數被修改而跟著改變。</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function f(a){</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict";</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> a = 42; //a 改變,但是函數的arguments仍是f(17);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> return</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lbracket"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lbracket">[</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">a, arguments[0]];</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var pair = f(17);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(pair[0] === 42);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(pair[1] === 17);</code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="3" start="3">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">不再支援arguments.callee</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">為了最佳化)</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">"use strict";</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">var f = function() { return arguments.callee; };</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">f(); // TypeError</code></div>
<div>
<br /></div>
<div>
<span class="ace-separator author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><hr style="border-bottom-color: rgb(193, 199, 205); border-bottom-style: solid; display: inline-block; font-size: 1px; height: 1px; line-height: 16px; width: 100%;" />
</span></div>
<div>
<h2 data-usually-unique-id="435705332423172">
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">安全的 JavaScript</span></h2>
</div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" start="1">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode下回傳this將不再將整個this包裝(boxed)返回出去,而是undefined, 或是call, apply, bind的this。一般模式下會將this回傳出去,可能會包含許多額外資訊(ex window 物件),同時也有助效能提升。</span></li>
</ol>
<div>
<ul class="listtype-indent listindent1 list-indent1" style="list-style-type: none;">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">這也意味瀏覽器將不能透過Strict Mode下的function 回傳this來取得window物件捕捉額外資訊。</span></li>
</ul>
</div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">'use strict';</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function fun() { return this; }</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(fun() === undefined);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(fun.call(2) === 2);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(fun.apply(null) === null);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(fun.call(undefined) === undefined);</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">console.assert(fun.bind(true)() === true);</code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="2" start="2">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode下的arguments不再提供”walk” to JavaScript Stack的下面兩個方式 function.caller(誰呼叫我)跟function.arguments(呼叫我的函式的參數),因為這會導致不安全的存取。</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function restricted()</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">{</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict";</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> restricted.caller; // TypeError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> restricted.arguments; // TypeError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function privilegedInvoker()</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">{</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> return restricted();</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">privilegedInvoker();</code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="3" start="3">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode下的arguments不再提供這個函數相關變數的存取方式,例如arguments.caller。這個在現在許多瀏覽器都已經不再存取的到。</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict';</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function fun(a, b) {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict';</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> var v = 12;</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> return arguments.caller; // throws a TypeError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">fun(1, 2); // doesn't expose v</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">or a or b)</span></code></div>
<div>
<span class="ace-separator author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><hr style="border-bottom-color: rgb(193, 199, 205); border-bottom-style: solid; display: inline-block; font-size: 1px; height: 1px; line-height: 16px; width: 100%;" />
</span></div>
<div>
<h2 data-usually-unique-id="408560397205114">
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">保留ECMAScript未來擴充的關鍵字</span></h2>
</div>
<ol class="listtype-number listindent1 list-number1" start="1">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">關鍵字範例如下</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-cpp" spellcheck="false">implements, interface, let, package, private, protected, public, static, yield</code></div>
<div>
<br /></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function package(protected){ // !!!</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-quot"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-quot">"</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict";</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> var implements; // !!!</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> interface: // !!!</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> while</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">true)</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> {</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> break interface; // !!!</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> }</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> function private() { } // !!!</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">function fun(static) {</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict'; } // !!!</span></code></div>
<div>
<br /></div>
<ol class="listtype-number listindent1 list-number1" data-original-start="2" start="2">
<li><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Strict Mode也禁止了Function Declaration 一些的宣告方式,這也是未來ECMAScript會制訂函式宣告式未來的一些規範。</span></li>
</ol>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-apos"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-apos">'</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">use strict';</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">if</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">true)</span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> function f() { } // SyntaxError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> </code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">for</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z s-lparen"> </span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z h-lparen">(</span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">var i = 0; i < 5; i++) </span></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> function f2() { } // SyntaxError</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"><br /></code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">function baz() { // ok</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false"> function eit() { } // ok</code></div>
<div>
<code class="listtype-code listindent1 list-code1 lang-javascript" spellcheck="false">}</code></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z">Reference: MDN </span><span class="attrlink url author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><a class="attrlink" data-target-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode" rel="noreferrer nofollow noopener" target="_blank">Strict Mode</a></span><span class=" author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"> </span><span class="attrlink url author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90za3wz69ztoz87zz82z79iwncz79zz81zz80ze3oz85ztcwz72z3z77zen4z80z"><a class="attrlink" data-target-href="https://developer.mozilla.org/z/docs/Web/JavaScript/Reference/Strict_mode#" href="https://developer.mozilla.org/z/docs/Web/JavaScript/Reference/Strict_mode#" rel="noreferrer nofollow noopener" target="_blank">嚴格模式</a></span></div>
小莊 - kvzhuanghttp://www.blogger.com/profile/17742547670585735063noreply@blogger.com0