-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
14 lines (14 loc) · 6.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="一個奶爸的部落格，分享前端技術的觀點及生活的點滴。"><meta property="og:url" content="https://ron-yu.github.io/front-end-notes/"><meta property="og:title" content="前端奶爸"><meta property="og:image" content="https://avatars0.githubusercontent.com/u/5327305?v=4&u=b43b3248877581a352fbd6667c608695bfaefe69&s=400"><meta property="og:description" content="一個奶爸的部落格，分享前端技術的觀點及生活的點滴。"><title>前端奶爸 | Change before you have to.</title><link rel="stylesheet" type="text/css" href="/front-end-notes//css/normalize.css"><link rel="stylesheet" type="text/css" href="/front-end-notes//css/highlight.css"><link rel="stylesheet" type="text/css" href="/front-end-notes//css/very-simple.css"><link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css"><link rel="Shortcut Icon" type="image/x-icon" href="/front-end-notes/favicon.ico"></head><body><!-- include the sidebar--><!-- include ./includes/sidebar.jade--><!-- Blog title and subtitle--><header><div class="container header"><a id="logo" href="/front-end-notes/." class="title">前端奶爸</a><span class="subtitle">Change before you have to.</span><label id="toggle-menu" for="menu" onclick><i class="fa fa-bars"></i></label></div></header><!-- use checkbox hack for toggle nav-bar on small screens--><input id="menu" type="checkbox"><!-- Navigation Links--><nav id="nav"><div class="container"><a href="/front-end-notes/" class="sidebar-nav-item">Home</a><a href="/front-end-notes/archives" class="sidebar-nav-item">Archives</a><a href="/front-end-notes/about" class="sidebar-nav-item">About</a></div></nav><div id="header-margin-bar"></div><article><div id="index-main" class="container entries"><div class="post-entry"><div class="post-time">2017-07-27</div><div class="post-desc"><div class="post-title"><a href="/front-end-notes/2017/07/27/JavaScript-proxy-pattern-1/">JavaScript-proxy-pattern-1</a></div><div class="post-content"><blockquote>
<h4 id="JavaScript-代理模式"><a href="#JavaScript-代理模式" class="headerlink" title="JavaScript 代理模式"></a>JavaScript 代理模式</h4></blockquote>
<p>以瀏覽器載入圖片為例子，當圖片完全載入後才會出現在螢幕上，但是等待載入的這段時間會使得原本該出現圖片的地方為空白的狀態，一旦圖片載入完成出現時，會造成畫面元件跳動的情況。解決的方式有以下兩個方式: 1. 使用 loading 圖示顯示正在載入，圖片載入完成後取代 loading 圖示。2. 使用同等比例的小圖片當成佔位符，圖片載入完成後取代此佔位符。</p></div><div class="post-meta"></div></div></div><div class="post-entry"><div class="post-time">2017-07-19</div><div class="post-desc"><div class="post-title"><a href="/front-end-notes/2017/07/19/prototype-chain-by-object-create/">Prototype chain by Object.create()</a></div><div class="post-content"><blockquote>
<h4 id="Coffee-tea-and-prototypes"><a href="#Coffee-tea-and-prototypes" class="headerlink" title="Coffee, tea and prototypes"></a>Coffee, tea and prototypes</h4></blockquote>
<p>讓我們以飲料作為例子，使用咖啡及茶來完成 prototype chain 的範例。要旨在於專注<strong>要做什麼</strong> (waht to do)，而不是<strong>你是誰</strong> (who you are)，利用委任的概念(delegation)將同一層級的行為封裝在一起，越上層的行為越一般化，越下層的行為越特定話，然後使用<strong>ES5</strong>所提供的 <code>Object.create()</code> 來實作原型鍊(prototype chain)。</p></div><div class="post-meta"></div></div></div><div class="post-entry"><div class="post-time">2017-07-19</div><div class="post-desc"><div class="post-title"><a href="/front-end-notes/2017/07/19/JavaScript-singleton-pattern/">JavaScript singleton pattern</a></div><div class="post-content"><blockquote>
<h4 id="JavaScript-單例模式"><a href="#JavaScript-單例模式" class="headerlink" title="JavaScript 單例模式"></a>JavaScript 單例模式</h4></blockquote>
<p>以 OOP 角度而言，使用 constructor function 來建立物件時，每次的新物件都會指向不同的 reference，在某些情況下，我們需要使用單例模式確保不管建立幾個物件，這些物件都指向同一個 reference。</p></div><div class="post-meta"></div></div></div><div class="post-entry"><div class="post-time">2017-02-04</div><div class="post-desc"><div class="post-title"><a href="/front-end-notes/2017/02/04/my-first-post/">Event binding and event delegation</a></div><div class="post-content"><blockquote>
<h4 id="到了，叫我。"><a href="#到了，叫我。" class="headerlink" title="到了，叫我。"></a>到了，叫我。</h4></blockquote>
<p>瀏覽器的事件處理很像我們日常生活中會發生的事，針對某些目標，一旦有情況發生，就執行相對應的程序。<br>就像買票去墾丁，我們(對象目標)一旦到達墾丁(情況發生)，我們就會下車(執行程序)。</p></div><div class="post-meta"></div></div></div><div class="post-entry"><div class="post-time">2017-02-04</div><div class="post-desc"><div class="post-title"><a href="/front-end-notes/2017/02/04/get-started/">部落格開張啦</a></div><div class="post-content"><blockquote>
<h4 id="分享是最好的學習。"><a href="#分享是最好的學習。" class="headerlink" title="分享是最好的學習。"></a>分享是最好的學習。</h4></blockquote>
<p>得之於人者太多，在成為軟體開發人員的路途上，受到許多貴人的幫助，點滴在心頭。因此我希望藉由這個部落格分享一些關於前端技術的概念及觀點，同時砥礪自己教學相長，藉此拋磚引玉，也能幫助到一些人。</p></div><div class="post-meta"></div></div></div></div></article><div class="container page-navigator-wrapper"></div><footer id="footer"><div class="container"><div class="bar"><div class="social"><a href="mailto:ronyu77@gmail.com" target="_blank"><i class="fa fa-envelope-o"></i></a><a href="https://github.com/Ron-Yu" target="_blank"><i class="fa fa-github"></i></a></div><div class="footer">© 2017 <a href="/front-end-notes/" rel="nofollow">前端奶爸</a></div></div></div></footer><link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.css"><script src="//cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script><script src="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js"></script><script>$(document).ready(function() {
$(".fancybox").fancybox();
});
</script></body></html>