Update blog - 2024-11-08 16:25:31

aliceric27 · Nov 8, 2024 · cb9c1a0 · cb9c1a0
1 parent bcd039a
commit cb9c1a0
Show file tree

Hide file tree

Showing 41 changed files with 6,026 additions and 0 deletions.
diff --git a/2023/01/31/2023-01-31-自傳履歷/index.html b/2023/01/31/2023-01-31-自傳履歷/index.html
diff --git a/2024/09/03/2024-09-03-Vue 從模板傳值到 CSS 偽元素 content 內容/index.html b/2024/09/03/2024-09-03-Vue 從模板傳值到 CSS 偽元素 content 內容/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>使用 Vue 設定偽元素 content | Wei&#39;s Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+
+
+<link rel="stylesheet" href="/css/style.css">
+
+
+
+<link rel="stylesheet" href="/css/highlight.css">
+
+
+  <meta name="description" content="Vue 從模板傳值到 CSS 偽元素 content 內容">
+<meta property="og:type" content="article">
+<meta property="og:title" content="使用 Vue 設定偽元素 content">
+<meta property="og:url" content="http://example.com/2024/09/03/2024-09-03-Vue%20%E5%BE%9E%E6%A8%A1%E6%9D%BF%E5%82%B3%E5%80%BC%E5%88%B0%20CSS%20%E5%81%BD%E5%85%83%E7%B4%A0%20content%20%E5%85%A7%E5%AE%B9/index.html">
+<meta property="og:site_name" content="Wei&#39;s Blog">
+<meta property="og:description" content="Vue 從模板傳值到 CSS 偽元素 content 內容">
+<meta property="og:locale" content="zh_TW">
+<meta property="article:published_time" content="2024-09-03T03:49:30.000Z">
+<meta property="article:modified_time" content="2024-11-08T08:24:09.768Z">
+<meta property="article:author" content="Wei">
+<meta property="article:tag" content="Front-end">
+<meta name="twitter:card" content="summary"><meta name="generator" content="Hexo 7.3.0"></head>
+
+<body>
+  <div id="wrapper">
+    <header id="header">
+  <h1 id="title">
+    <a href="/">Wei&#39;s Blog</a>
+  </h1>
+  <nav>
+
+
+
+      <a class="nav-link" href="/">Home</a>
+
+
+        <span class="nav-spacer">×</span>
+
+      <a class="nav-link" href="/archives">Archives</a>
+
+
+  </nav>
+</header>
+
+    <div id="content">
+      <article id="post-2024-09-03-Vue 從模板傳值到 CSS 偽元素 content 內容" class="article article-type-post" itemprop="blogPost" itemscope>
+  <div class="article-inner">
+
+      <header class="article-header">
+
+
+    <h2 class="article-title" itemprop="headline name">
+      使用 Vue 設定偽元素 content
+    </h2>
+
+
+
+        <div class="article-meta">
+          <time class="article-date" datetime="2024-09-03T03:49:30.000Z" itemprop="datePublished">九月 3, 2024, 11:49 中午</time>
+
+
+        </div>
+      </header>
+
+    <div class="article-entry" itemprop="articleBody">
+
+
+        <p>Vue 從模板傳值到 CSS 偽元素 content 內容</p>
+<span id="more"></span>
+<hr>
+<h2 id="使用-Attr"><a href="#使用-Attr" class="headerlink" title="使用 Attr()"></a>使用 Attr()</h2><p>首先在模板定義<code>data-*</code>參數，並使用 Vue 模板傳入對應值</p>
+<pre><code class="html">&lt;div class=&quot;dh-header&quot; :data-title=&quot;data.title&quot;&gt;&lt;/div&gt;
+</code></pre>
+<p>然後在 CSS 中使用<code>attr()</code>引入自訂的變數</p>
+<pre><code class="css">.dh-header:before &#123;
+    content:attr(data-title);
+    display:block;
+&#125;
+</code></pre>
+<hr>
+<p><a target="_blank" rel="noopener" href="https://pjchender.dev/html/html-data-attribute/">什麼是 HTML 5 中的資料屬性（data-* attribute）</a></p>
+
+
+    </div>
+
+
+    <div class="article-category">
+
+        <b>Categories:</b>
+        <a class="article-category-link" href="/categories/Front-end/">Front-end</a>
+
+
+        <br/>
+
+
+        <b>Tags:</b>
+        <a class="article-tag-none-link" href="/tags/Front-end/" rel="tag">Front-end</a>
+
+    </div>
+
+
+  </div>
+</article>
+
+
+<nav id="article-nav" class="article-nav">
+
+    <a href="/2024/09/10/2024-09-10-js-event-loop/" id="article-nav-newer" class="article-nav-link-wrap newer">
+      <strong class="article-nav-caption">較新的</strong>
+      <div class="article-nav-title">
+
+          JS 的 Even Loop 是什麼？
+
+      </div>
+    </a>
+
+
+    <a href="/2023/01/31/2023-01-31-%E8%87%AA%E5%82%B3%E5%B1%A5%E6%AD%B7/" id="article-nav-older" class="article-nav-link-wrap older">
+      <strong class="article-nav-caption">較舊的</strong>
+      <div class="article-nav-title">
+
+          自傳履歷
+
+      </div>
+    </a>
+
+</nav>
+
+
+
+
+
+
+    </div>
+  </div>
+
+
+
+
+
+<div id="settings-container">
+  <div id="dark-mode">dark</div>
+  <div id="sans-font">sans</div>
+</div>
+<script type="text/javascript">
+let d=document,r=d.documentElement.style,f=r.setProperty.bind(r),l=localStorage,s=l.getItem('s')||(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches),n=l.getItem('n'),m=d.getElementById("dark-mode"),b=()=>{f('--bg-color','#fafafa');f('--code-bg-color','#f4f4f4');f('--text-color','#212121');f('--secondary-color','#808080');f('--tertiary-color','#b0b0b0');f('--link-color','#b5c8cf');f('--link-hover-color','#618794');f('--link-bg-color','#dae4e7');f('--selection-color','#dae4e7');m.innerHTML="dark"},c=()=>{f('--bg-color','#212121');f('--code-bg-color','#292929');f('--text-color','#fff');f('--secondary-color','#c0c0c0');f('--tertiary-color','#6e6e6e');f('--link-color','#4d6b75');f('--link-hover-color','#96b1bb');f('--link-bg-color','#5d828e');f('--selection-color','#acc1c9');m.innerHTML="light"},o=d.getElementById("sans-font"),e=()=>{f('--body-stack','"Lora", "Georgia", "Times New Roman", serif');o.innerHTML="sans"},g=()=>{f('--body-stack','"Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Verdana", sans-serif');o.innerHTML="serif"};m.onclick=()=>{if(s==2){s=1;l.setItem('s',s);c()}else{s=2;l.setItem('s',s);b()}};o.onclick=()=>{if(n==2){n=1;l.setItem('n',n);g()}else{n=2;l.setItem('n',n);e()}};if(!s){s=2;l.setItem('s',2)};if(s==1){c()};if(!n){n=2;l.setItem('n',2)};if(n==1){g()};
+</script>
+
+
+
+
+</body>
+</html>
diff --git a/2024/09/10/2024-09-10-js-event-loop/index.html b/2024/09/10/2024-09-10-js-event-loop/index.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>JS 的 Even Loop 是什麼？ | Wei&#39;s Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+
+
+<link rel="stylesheet" href="/css/style.css">
+
+
+
+<link rel="stylesheet" href="/css/highlight.css">
+
+
+  <meta name="description" content="解釋 JS 中的 Even Loop 機制">
+<meta property="og:type" content="article">
+<meta property="og:title" content="JS 的 Even Loop 是什麼？">
+<meta property="og:url" content="http://example.com/2024/09/10/2024-09-10-js-event-loop/index.html">
+<meta property="og:site_name" content="Wei&#39;s Blog">
+<meta property="og:description" content="解釋 JS 中的 Even Loop 機制">
+<meta property="og:locale" content="zh_TW">
+<meta property="og:image" content="https://gcdeng.com/assets/images/Screen_Shot_2021-05-16_at_10.37.11_PM-82dd3d3de0ac10d80cccff54a783ea5e.png">
+<meta property="article:published_time" content="2024-09-10T09:22:10.000Z">
+<meta property="article:modified_time" content="2024-11-08T08:24:09.768Z">
+<meta property="article:author" content="Wei">
+<meta property="article:tag" content="Front-end">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:image" content="https://gcdeng.com/assets/images/Screen_Shot_2021-05-16_at_10.37.11_PM-82dd3d3de0ac10d80cccff54a783ea5e.png"><meta name="generator" content="Hexo 7.3.0"></head>
+
+<body>
+  <div id="wrapper">
+    <header id="header">
+  <h1 id="title">
+    <a href="/">Wei&#39;s Blog</a>
+  </h1>
+  <nav>
+
+
+
+      <a class="nav-link" href="/">Home</a>
+
+
+        <span class="nav-spacer">×</span>
+
+      <a class="nav-link" href="/archives">Archives</a>
+
+
+  </nav>
+</header>
+
+    <div id="content">
+      <article id="post-2024-09-10-js-event-loop" class="article article-type-post" itemprop="blogPost" itemscope>
+  <div class="article-inner">
+
+      <header class="article-header">
+
+
+    <h2 class="article-title" itemprop="headline name">
+      JS 的 Even Loop 是什麼？
+    </h2>
+
+
+
+        <div class="article-meta">
+          <time class="article-date" datetime="2024-09-10T09:22:10.000Z" itemprop="datePublished">九月 10, 2024, 5:22 下午</time>
+
+
+        </div>
+      </header>
+
+    <div class="article-entry" itemprop="articleBody">
+
+
+        <p>解釋 JS 中的 Even Loop 機制</p>
+<span id="more"></span>
+<hr>
+<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>簡單來說 JS 是單執行緒的機制，為了支援非同步的任務，而在<strong>JS引擎</strong>中引入的一個機制</p>
+<p>機制內分為不同區塊 Stack、Queue、Heap</p>
+<ul>
+<li>JS 程式碼在執行時會依序將任務放入 Stack ，中並按照順序執行。</li>
+<li>當一個任務呼叫為<strong>非同步</strong>任務時則會放在 Queue 內，待 Stack 內的任務完成後，會將 Queue 的任務放到 Stack 內最後按順序執行</li>
+</ul>
+<h2 id="Macrotask-Queue、Microtask-Queue"><a href="#Macrotask-Queue、Microtask-Queue" class="headerlink" title="Macrotask Queue、Microtask Queue"></a>Macrotask Queue、Microtask Queue</h2><p>Callback Queue 又分為 Macrotask Queue 和 Microtask Queue</p>
+<h3 id="Macrotask-Queue"><a href="#Macrotask-Queue" class="headerlink" title="Macrotask Queue"></a>Macrotask Queue</h3><ul>
+<li>從<code>&lt;script src=&quot;...&quot;&gt;</code>外部下載的 script</li>
+<li>DOM event handlers，例如 mousemove event 的 callback function handler</li>
+<li>各種 Web APIs，例如 setTimeout 的 callback function</li>
+<li>ajax callback function</li>
+</ul>
+<p><img src="https://gcdeng.com/assets/images/Screen_Shot_2021-05-16_at_10.37.11_PM-82dd3d3de0ac10d80cccff54a783ea5e.png" alt="marcotask"></p>
+<h3 id="Microtask-Queue"><a href="#Microtask-Queue" class="headerlink" title="Microtask Queue"></a>Microtask Queue</h3><ul>
+<li>promise <code>.then/catch/finally</code> 中的 callback function</li>
+<li><code>queueMicrotask(func)</code> 中的 func</li>
+</ul>
+<p>簡單來說，像是 Promise.then 在非同步任務中是屬於 Microtask Queue ，在 Even Loop 則會被分配到優先執行的 Microtask Queue</p>
+<p>每個 Macrotask 執行結束後會先將 Microtask queue 中的任務全部執行完，才會繼續執行瀏覽器渲染跟其他 Macrotask。</p>
+<blockquote>
+<p>舉例<br>這個執行印出答案為 1,3,4,2<br>Macrotask 為 console.log(1)<br>Microtask queue 為 Promise.then()<br>Macrotask Queue 為 setTimeout()</p>
+</blockquote>
+<pre><code class="js">
+console.log(1);
+
+setTimeout(function () &#123;
+  console.log(2);
+&#125;, 0);
+
+Promise.resolve()
+  .then(function () &#123;
+    console.log(3);
+  &#125;)
+  .then(function () &#123;
+    console.log(4);
+  &#125;);
+</code></pre>
+<hr>
+<p>附上更詳細的解釋，有影片和圖片解釋寫的非常完整</p>
+<p><a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=z4S6ZxRD2rA&pp=ygUKRXZlbnQgTG9vcA==">JavaScript Event Loop解說：單執行緒還能異步運算？</a></p>
+<p><a target="_blank" rel="noopener" href="https://gcdeng.com/series/Javascript/javascript-deep-dive-into-event-loop">深入了解事件迴圈(Event Loop)，Macrotask跟Microtask是什麼？</a></p>
+<p><a target="_blank" rel="noopener" href="https://www.explainthis.io/zh-hant/swe/what-is-event-loop">請說明瀏覽器中的事件循環 (Event Loop)</a></p>
+
+
+    </div>
+
+
+    <div class="article-category">
+
+        <b>Categories:</b>
+        <a class="article-category-link" href="/categories/Front-end/">Front-end</a>
+
+
+        <br/>
+
+
+        <b>Tags:</b>
+        <a class="article-tag-none-link" href="/tags/Front-end/" rel="tag">Front-end</a>
+
+    </div>
+
+
+  </div>
+</article>
+
+
+<nav id="article-nav" class="article-nav">
+
+    <a href="/2024/09/15/2024-09-15-this/" id="article-nav-newer" class="article-nav-link-wrap newer">
+      <strong class="article-nav-caption">較新的</strong>
+      <div class="article-nav-title">
+
+          這個 this 到底是什麼？
+
+      </div>
+    </a>
+
+
+    <a href="/2024/09/03/2024-09-03-Vue%20%E5%BE%9E%E6%A8%A1%E6%9D%BF%E5%82%B3%E5%80%BC%E5%88%B0%20CSS%20%E5%81%BD%E5%85%83%E7%B4%A0%20content%20%E5%85%A7%E5%AE%B9/" id="article-nav-older" class="article-nav-link-wrap older">
+      <strong class="article-nav-caption">較舊的</strong>
+      <div class="article-nav-title">
+
+          使用 Vue 設定偽元素 content
+
+      </div>
+    </a>
+
+</nav>
+
+
+
+
+
+
+    </div>
+  </div>
+
+
+
+
+
+<div id="settings-container">
+  <div id="dark-mode">dark</div>
+  <div id="sans-font">sans</div>
+</div>
+<script type="text/javascript">
+let d=document,r=d.documentElement.style,f=r.setProperty.bind(r),l=localStorage,s=l.getItem('s')||(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches),n=l.getItem('n'),m=d.getElementById("dark-mode"),b=()=>{f('--bg-color','#fafafa');f('--code-bg-color','#f4f4f4');f('--text-color','#212121');f('--secondary-color','#808080');f('--tertiary-color','#b0b0b0');f('--link-color','#b5c8cf');f('--link-hover-color','#618794');f('--link-bg-color','#dae4e7');f('--selection-color','#dae4e7');m.innerHTML="dark"},c=()=>{f('--bg-color','#212121');f('--code-bg-color','#292929');f('--text-color','#fff');f('--secondary-color','#c0c0c0');f('--tertiary-color','#6e6e6e');f('--link-color','#4d6b75');f('--link-hover-color','#96b1bb');f('--link-bg-color','#5d828e');f('--selection-color','#acc1c9');m.innerHTML="light"},o=d.getElementById("sans-font"),e=()=>{f('--body-stack','"Lora", "Georgia", "Times New Roman", serif');o.innerHTML="sans"},g=()=>{f('--body-stack','"Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Verdana", sans-serif');o.innerHTML="serif"};m.onclick=()=>{if(s==2){s=1;l.setItem('s',s);c()}else{s=2;l.setItem('s',s);b()}};o.onclick=()=>{if(n==2){n=1;l.setItem('n',n);g()}else{n=2;l.setItem('n',n);e()}};if(!s){s=2;l.setItem('s',2)};if(s==1){c()};if(!n){n=2;l.setItem('n',2)};if(n==1){g()};
+</script>
+
+
+
+
+</body>
+</html>