因為一直找不到工作(...汗)所以來整理作品 [成果展示](https://superyngo.github.io/to_do_list/) 基本上是參考[Let's Write](https://www.letswrite.tw/)做的[Demo](https://letswritetw.github.io/letswrite-food-check/) 在頁面下方有作品導覽以及Github連結 使用工具： 1.Github Page 2.[Google Tag Manager](https://tagmanager.google.com/#/home) 步驟： 1.申請GTM並取得GTM代碼 2.將GTM代碼插入所有專案的index.html中，並將所有專案上傳github，開啟page頁面 3.另外做一個myNavbat的github page，將所有專案連結放進去，可參考[我做的](https://github.com/superyngo/myNavbar) 4.用GTM的「自訂HTML」功能將myNavbar和github連結塞進所有專案中，參考代碼如下： ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="myNav"></div> <div class="github"> <a class="githubHerf"> <i class="fa fa-github" aria-hidden="true"></i> </a> </div> <script> var githubHerf=document.querySelector(".githubHerf") githubHerf.setAttribute("href","https://github.com/superyngo"+{{Page Path}}) var myNav2 = document.querySelector(".myNav"); var iframe2 = document.createElement("iframe"); iframe2.setAttribute("src", "https://superyngo.github.io/myNavbar/"); iframe2.setAttribute("width", "100%"); iframe2.setAttribute("frameborder", "0"); myNav2.appendChild(iframe2) </script> <style> body{ background-color: #fff0df; } .github { position: fixed; left: 0; bottom: 0; display: flex; width: 100px; height: 100px; cursor: pointer; z-index: 2; :hover { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; scale: 0.9; } } .github::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 100px 0 0 100px; border-color: transparent transparent transparent #6e5494; } .github .fa { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; } @media screen and (max-width: 600px) { :root { font-size: 12px; } .github { width: 70px; height: 70px; } .github::before { border-width: 70px 0 0 70px; } .github .fa { left: 8px; bottom: 4px; font-size: 2rem; } } </style> ``` 注意事項； 1.不知為何我GTM塞iframe一直不給過，所以用append的。 2.iframe內的超連結預設會在iframe內開啟，要避免只要在myNavbar的head裡加上<base target="_parent" />就可以了。 3當初做這些作業時完全沒考慮theme和RWD，花了一些時間但又不想花太多時間結果就勉勉強強用手機也都能開。 閒聊： 前陣子都在codeSignal上刷題，看別人解法真的很神，學很多... 有沒有北部公司缺人啊...投履歷都沒人回..中年轉行真的不行嗎...
上次的（十）是純 CLI 應用 先幫大家脫離 ` js 一定是網頁、一定是 html/css 相關` 的刻板印象 接著再回來碰 backend programming 開發，銜接回來 web 領域 這樣才順暢，才不會一直搞混在一起 教材研發中，近期上線，敬請期待～
本文將分為三個部分： 1. 通用設計模式 2. 我的建議 3. 進一步閱讀 享受並且讓我知道您在專案中使用的模式和實踐🚀 原文出處：https://dev.to/jacobandrewsky/good-practices-and-design-patterns-for-vue-composables-24lk ## 通用設計模式 我認為了解建置可組合項模式的最佳來源實際上是 Vue.js 文件，您可以在[此處](https://vuejs.org/guide/reusability/composables.html)查看 ### 基本可組合項 Vue 文件顯示了以下 useMouse 可組合項的示例： ``` // mouse.js import { ref, onMounted, onUnmounted } from 'vue' // by convention, composable function names start with "use" export function useMouse() { // state encapsulated and managed by the composable const x = ref(0) const y = ref(0) // a composable can update its managed state over time. function update(event) { x.value = event.pageX y.value = event.pageY } // a composable can also hook into its owner component's // lifecycle to setup and teardown side effects. onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) // expose managed state as return value return { x, y } } ``` 稍後可以在元件中使用它，如下所示： ``` <script setup> import { useMouse } from './mouse.js' const { x, y } = useMouse() </script> <template>Mouse position is at: {{ x }}, {{ y }}</template> ``` ### 異步可組合項 為了獲取資料，Vue 建議使用以下可組合結構： ``` import { ref, watchEffect, toValue } from 'vue' export function useFetch(url) { const data = ref(null) const error = ref(null) watchEffect(() => { // reset state before fetching.. data.value = null error.value = null // toValue() unwraps potential refs or getters fetch(toValue(url)) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)) }) return { data, error } } ``` 然後可以在元件中使用它，如下所示： ``` <script setup> import { useFetch } from './fetch.js' const { data, error } = useFetch('...') </script> ``` ### 可組合合約 根據上面的示例，以下是所有可組合項都應遵循的約定： 1. 可組合文件名應以 use 開頭，例如 `useSomeAmazingFeature.ts` 2. 它可以接受輸入參數，這些參數可以是字串等基本類型，也可以接受 refs 和 getter，但需要使用 toValue 幫助器 3. Composable 應該返回一個 ref 值，該值可以在解構可組合項後存取，例如 `const { x, y } = useMouse()` 4. 可組合項可以保存可以在整個應用程式中存取和修改的全局狀態。 5. 可組合性可能會產生副作用，例如加入窗口事件偵聽器，但在卸載元件時應清除它們。 6. 可組合項只能在 `<script setup>` 或 `setup()` 掛鉤中呼叫。它們也應該在這些上下文中同步呼叫。在某些情況下，您還可以在生命週期掛鉤中呼叫它們，例如“onMounted()”。 7. 可組合項可以呼叫內部的其他可組合項。 8. 可組合項應在內部包裝某些邏輯，當過於復雜時，應將它們提取到單獨的可組合項中以便於測試。 ## 我的建議 我已經為我的工作專案和開源專案建置了多個可組合項 - NuxtAlgolia、NuxtCloudinary、NuxtMedusa，因此基於這些，我想根據我的經驗在上面的合同中加入一些要點。 ### 有狀態或/和純函數可組合項 在程式碼標準化的某個時刻，您可能會得出這樣的結論：您希望對可組合項中的狀態保留做出決定。 最容易測試的函數是那些不存儲任何狀態的函數（即它們是簡單的輸入/輸出函數），例如負責將字節轉換為人類可讀值的可組合函數。它接受一個值並返回一個不同的值 - 它不存儲任何狀態。 不要誤會我的意思，你不必做出“或”的決定。您可以完全保留有狀態和無狀態可組合項。但這應該是一個書面決定，以便以後更容易與他們合作 🙂 ### 可組合項的單元測試 我們希望使用 Vitest 為我們的前端應用程式實施單元測試。在後端工作時，進行單元測試程式碼覆蓋率非常有用，因為您主要關注邏輯。然而，在前端，您通常使用視覺效果。 因此，我們認為對整個元件進行單元測試可能不是最好的主意，因為我們基本上將對框架本身進行單元測試（如果按下按鈕，檢查狀態是否更改或模式是否打開）。 由於我們已將所有業務邏輯移至可組合項（基本上是 TypeScript 函數）內，因此它們很容易使用 Vitest 進行測試，並且允許我們擁有更穩定的系統。 ### 可組合項的範圍 不久前，在 VueStorefront 中，我們開發了自己的可組合方法（早在它們實際上像這樣被呼叫之前）。在我們的方法中，我們使用可組合項來映射電子商務的業務領域，如下所示： ``` const { cart, load, addItem, removeItem, remove, ... } = useCart() ``` 這種方法絕對有用，因為它允許將域包裝在一個函數中。在“useProduct”或“useCategory”等更簡單的示例中，實現和維護相對簡單。然而，正如您在此處的“useCart”示例中看到的那樣，當包裝一個包含更多邏輯而不僅僅是資料獲取的域時，這個可組合項正在發展成為一種非常難以開發和維護的形狀。 此時，我開始為 Nuxt 生態系統做出貢獻，其中引入了不同的方法。在這種新方法中，每個可組合項僅負責一件事。因此，我們的想法不是建置一個巨大的“useCart”可組合項，而是為每個功能建置可組合項，即“useAddToCart”、“useFetchCart”、“useRemovefromCart”等。 因此，維護和測試這些可組合項應該更容易 🙂 ## 進一步閱讀 這將是我的研究的全部內容。如果您想了解有關此主題的更多訊息，請務必查看以下文章： * https://vuejs.org/guide/reusability/composables.html * https://www.youtube.com/watch?v=bcZM3EogPJE * https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-composable/ * https://blog.logrocket.com/getting-started-vue-composables/ * https://macopedia.com/blog/news/how-can-vue-3-composables-make-your-life-easier
我曾經不同意淺色和深色模式切換。 “切換開關是用戶系統偏好設置！”我會天真地感嘆，選擇讓 [prefers-color-scheme CSS 媒體查詢](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 控制我個人網站上的主題。沒有切換。沒有選擇。 🫠 自從黑暗模式出現以來，我一直是它的用戶。但最近，我更喜歡在輕型模式下使用_**一些**_網站和工具 - 包括我的個人網站 - 同時將我的系統設置牢牢地保留在黑暗中。我需要一個開關。我需要一個選擇！其他人也是如此。 在這篇文章中，我將向您展示如何使用 JavaScript 為我的網站建置終極主題 Toggle™️： 1. 在本地瀏覽器存儲中存儲和檢索主題首選項， 1. 退回到用戶系統首選項， 1. 如果未檢測到上述情況，則回退到默認主題。 TL;DR：[這是 CodePen 上的程式碼](https://codepen.io/whitep4nth3r/pen/VwEqrQL)。 原文出處：https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f ## 將資料屬性加入到 HTML 標記中 在 HTML 標記上，加入一個資料屬性，例如“data-theme”，並為其指定默認值“淺色”或“深色”。過去我使用自定義屬性“color-mode”而不是資料屬性（例如“color-mode=”light“”）。雖然這可行，但它沒有被歸類為有效的 HTML，而且我找不到任何相關文件！對此的任何見解都非常感激。 😅 ``` <html lang="en" data-theme="light"> <!-- all other HTML --> </html> ``` ## 通過 CSS 自定義屬性配置主題 在 CSS 中，通過“data-theme”每個值下的 [CSS 自定義屬性](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或變數）配置主題顏色` 屬性。請注意，您不一定需要將 `:root` 與 `data-theme` 結合使用，但它對於不隨主題變化的全局屬性很有用（如下例所示）。 [在 MDN 上了解有關 :root CSS 偽類的更多訊息。](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) ``` :root { --grid-unit: 1rem; --border-radius-base: 0.5rem; } [data-theme="light"] { --color-bg: #ffffff; --color-fg: #000000; } [data-theme="dark"] { --color-bg: #000000; --color-fg: #ffffff; } /* example use of CSS custom properties */ body { background-color: var(--color-bg); color: var(--color-fg); } ``` 在 HTML 標籤上手動切換“data-theme”屬性，您就會看到主題已經發生變化（只要您使用這些 CSS 屬性來設置元素的樣式）！ ## 在 HTML 中建置一個切換按鈕 將 HTML 按鈕加入到您的網站標題或任何需要主題切換的位置。加入一個 `data-theme-toggle` 屬性（稍後我們將使用它來定位 JavaScript 中的按鈕）和一個 [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)如果您計劃在按鈕上使用圖標（例如太陽和月亮分別代表淺色和深色模式），以便螢幕閱讀器和輔助技術可以理解按鈕的用途互動按鈕。 ``` <button type="button" data-theme-toggle aria-label="Change to light theme" >Change to light theme (or icon here)</button> ``` ## 計算頁面加載時的主題設置 在這裡，我們將根據我所說的“_**偏好級聯**_”來計算主題設置。 ### 從本地存儲獲取主題首選項 我們可以使用 [JavaScript 中的 localStorage 屬性](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 將用戶首選項保存在瀏覽器中，該首選項在會話之間持續存在（或直到它手動清除）。在 The Ultimate Theme Toggle™️ 中，存儲的用戶首選項是最重要的設置，因此我們將首先查找它。 頁面加載時，使用 localStorage.getItem("theme") 檢查之前存儲的首選項。在本文後面，我們將在每次按下切換按鈕時更新主題值。如果沒有本地存儲值，則該值為“null”。 ``` // get theme on page load localStorage.getItem("theme"); // set theme on button press localStorage.setItem("theme", newTheme); ``` ### 在 JavaScript 中檢測用戶系統設置 如果“localStorage”中沒有存儲的主題首選項，我們將使用 [window.matchMedia() 方法](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)通過傳入媒體查詢字串。您只需計算一項設置即可實現首選項級聯，但下面的程式碼顯示瞭如何檢測淺色或深色系統設置。 ``` const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); // or const systemSettingLight = window.matchMedia("(prefers-color-scheme: light)"); ``` `window.matchMedia()` 返回一個 `MediaQueryList`，其中包含您請求的媒體查詢字串，以及它是否與用戶系統設置“匹配”（true/false）。 ``` { matches: true, media: "(prefers-color-scheme: dark)", onchange: null } ``` ### 回退到默認主題 現在您可以通過“window.matchMedia()”存取“localStorage”值和系統設置，您可以使用首選項級聯（本地存儲，然後系統設置）計算首選主題設置，並回退到默認主題您的選擇（這應該是您之前在 HTML 標記上指定的默認主題）。 我們將在頁面加載時執行此程式碼來計算當前的主題設置。 ``` function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { if (localStorageTheme !== null) { return localStorageTheme; } if (systemSettingDark.matches) { return "dark"; } return "light"; } const localStorageTheme = localStorage.getItem("theme"); const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); ``` ## 加入事件監聽器到切換按鈕 接下來，我們將設置一個事件監聽器，以便在按下按鈕時切換主題。使用我們之前加入的資料屬性（`data-theme-toggle`）定位 DOM 中的按鈕，並加入一個[事件監聽器](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) 加入到單擊按鈕。 - 將新主題計算為字串 - 計算並更新按鈕文本（如果您在按鈕上使用圖標，則可以在此處進行切換） - 更新按鈕上的aria標籤 - 切換HTML標籤上的data-theme屬性 - 將新的主題首選項保存在本地存儲中 - 更新內存中的currentThemeSetting ``` // target the button using the data attribute we added earlier const button = document.querySelector("[data-theme-toggle]"); button.addEventListener("click", () => { const newTheme = currentThemeSetting === "dark" ? "light" : "dark"; // update the button text const newCta = newTheme === "dark" ? "Change to light theme" : "Change to dark theme"; button.innerText = newCta; // use an aria-label if you are omitting text on the button // and using sun/moon icons, for example button.setAttribute("aria-label", newCta); // update theme attribute on HTML to switch theme in CSS document.querySelector("html").setAttribute("data-theme", newTheme); // update in local storage localStorage.setItem("theme", newTheme); // update the currentThemeSetting in memory currentThemeSetting = newTheme; }); ``` 要確認“localStorage”正在更新，請打開開發工具，導航到“Application”選項卡，展開“Local Storage”並選擇您的站點。你會看到一個鍵：值列表；查找“主題”並單擊按鈕即可觀看其實時更新。重新加載您的頁面，您將看到保留的主題首選項！  ## 把它們放在一起！ 您現在可以通過以下方式建置您自己的終極主題切換™️： - 使用CSS自定義屬性來指定不同的主題顏色，通過HTML標籤上的資料屬性進行切換 - 使用 HTML 按鈕來啟動切換 - 使用首選項級聯計算頁面加載時的首選主題（本地存儲 > 系統設置 > 後備默認主題） - 單擊切換按鈕即可切換主題，並將用戶首選項存儲在瀏覽器中以供將來存取 這是完整的 CodePen，您可以在我的個人網站上查看工作版本。快樂切換！ https://codepen.io/whitep4nth3r/pen/VwEqrQL
如何在微前端中處理 CSS？畢竟，樣式始終是*任何* UI 片段所需要的東西，但是，它也是全局共享的東西，因此是潛在的衝突來源。 在這篇文章中，我想回顧一下現有的不同策略來馴服 CSS 並使其擴展以開發微前端。如果這裡的任何內容對您來說聽起來很合理，那麼也可以考慮研究一下[“微前端的藝術”](https://microfrontends.art/)。 **本文的程式碼可以在[github.com/piral-samples/css-in-mf](https://github.com/piral-samples/css-in-mf)找到。請務必查看示例實現。** CSS 的處理是否會影響每個微前端解決方案？讓我們檢查可用的類型來驗證這一點。 原文出處：https://dev.to/florianrappl/css-in-micro-frontends-4jai ## 微前端的類型 過去我寫了很多關於存在哪些類型的微前端、為什麼存在以及何時應該使用什麼類型的微前端架構的文章。採用 Web 方法意味著使用 iframe 來使用來自不同微前端的 UI 片段。在這種情況下，沒有任何限制，因為無論如何每個片段都是完全隔離的。 在任何其他情況下，無論您的解決方案使用客戶端還是伺服器端組合（或介於兩者之間的東西），您最終都會得到在瀏覽器中評估的樣式。因此，在所有其他情況下，您都會關心 CSS。讓我們看看這裡有哪些選項。 ## 無特殊處理 好吧，第一個 - 也許是最（或根據觀點，最不）明顯的解決方案是不進行任何特殊處理。相反，每個微前端都可以附帶額外的樣式表，然後在渲染微前端的元件時附加這些樣式表。 理想情況下，每個元件僅在首次渲染時加載所需的樣式，但是，由於這些樣式中的任何一個都可能與現有樣式衝突，我們也可以假裝在微前端的任何元件渲染時加載所有“有問題的”樣式。  這種方法的問題在於，當給出諸如“div”或“div a”之類的通用選擇器時，我們還將重新設置其他元素的樣式，而不僅僅是原始微前端的片段。更糟糕的是，類和屬性也不是故障保護措施。像“.foobar”這樣的類也可以在另一個微前端中使用。 **您將在引用的演示存儲庫中找到兩個衝突的微前端的示例，網址為 [solutions/default](https://github.com/piral-samples/css-in-mf/tree/main/solutions)。** 擺脫這種痛苦的一個好方法是進一步隔離元件 - 就像 Web 元件一樣。 ## 影子 DOM 在自定義元素中，我們可以打開一個影子根來將元素附加到專用的迷你文件，該迷你文件實際上與其父文件屏蔽。總的來說，這聽起來是一個好主意，但與這裡介紹的所有其他解決方案一樣，沒有硬性要求。  理想情況下，微前端可以自由決定“如何”實現元件。因此，實際的 Shadow DOM 集成必須由微前端完成。 使用 Shadow DOM 有一些缺點。最重要的是，雖然 Shadow DOM 內部的樣式保留在內部，但全局樣式也不會影響 Shadow DOM。乍一看，這似乎是一個優勢，但是，由於整篇文章的主要目標只是隔離微前端的樣式，因此您可能會錯過諸如應用某些全局設計系統（例如 Bootstrap）之類的要求。 要使用 Shadow DOM 進行樣式設置，我們可以通過“link”引用或“style”標籤將樣式放入 Shadow DOM 中。由於 Shadow DOM 是無樣式的，並且外部的樣式不會傳播到其中，因此我們實際上需要它。除了編寫一些內聯樣式之外，我們還可以使用捆綁器將“.css”（或者類似“.shadow.css”的內容）視為原始文本。這樣，我們只會得到一些文本。 對於 esbuild，我們可以配置 `piral-cli-esbuild` 的預製配置，如下所示： ``` module.exports = function(options) { options.loader['.css'] = 'text'; options.plugins.splice(0, 1); return options; }; ``` 這會刪除初始 CSS 處理器 (SASS) 並為“.css”文件配置標準加載器。現在，shadow DOM 中的某些樣式的工作方式如下： ``` import css from "./style.css"; customElements.define(name, class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } connectedCallback() { this.style.display = "contents"; const style = this.shadowRoot.appendChild(document.createElement('style')); style.textContent = css; } }); ``` 上面的程式碼是一個有效的自定義元素，從樣式角度來看它是透明的（“display：contents”），即只有其內容會反映在渲染樹中。它託管一個包含單個“style”元素的影子 DOM。 `style` 的內容設置為 `style.css` 文件的文本。 **您將在 [`solutions/shadow-dom`](https://github.com/piral-samples/css-in-mf/tree/main) 引用的演示存儲庫中找到兩個衝突的微前端的示例/解決方案/shadow-dom）。** 域元件避免使用影子 DOM 的另一個原因是，並非每個 UI 框架都能夠處理影子 DOM 中的元素。因此，無論如何都必須尋找替代解決方案。一種方法是轉而使用一些 CSS 約定。 ## 使用命名約定 如果每個微前端都遵循全局 CSS 約定，那麼就可以在元級別上避免衝突。最簡單的約定是在每個類前面加上微前端的名稱。因此，舉例來說，如果一個微前端稱為“shopping”，另一個微前端稱為“checkout”，那麼兩者都會將其“active”類分別重命名為“shopping-active”/“checkout-active”。  這同樣適用於其他可能存在衝突的名稱。舉個例子，在微前端稱為“shopping”的情況下，我們將其稱為“shopping-primary-button”，而不是像“primary-button”這樣的ID。如果由於某種原因，我們需要設置元素的樣式，我們應該使用後代選擇器（例如“.shopping img”）來設置“img”標籤的樣式。現在，這適用於具有“shopping”類的 *some* 元素中的“img”元素。這種方法的問題是購物微前端也可能使用其他微前端的元素。如果我們看到“div.shopping > div.checkout img”怎麼辦？儘管“img”現在由通過“checkout”微前端帶來的元件託管/集成，但它的樣式將由“shopping”微前端 CSS 設計。這並不理想。 儘管命名約定在一定程度上解決了問題，但它們仍然容易出錯並且使用起來很麻煩。如果我們重命名微前端會怎樣？如果微前端在不同的應用程式中獲得不同的名稱怎麼辦？如果我們在某些時候忘記應用命名約定怎麼辦？這就是工具幫助我們的地方。 ## CSS 模塊 自動引入一些前綴並避免命名衝突的最簡單方法之一是使用 CSS 模塊。根據您選擇的捆綁器，這可以是開箱即用的，也可以通過一些配置更改來實現。  ``` // Import "default export" from CSS import styles from './style.modules.css'; // Apply <div className={styles.active}>Active</div> ``` 導入的模塊是一個生成的模塊，保存將其原始類名（例如“active”）映射到生成的類名的值。生成的類名通常是 CSS 規則內容與原始類名混合的哈希值。這樣，名稱應該盡可能唯一。 作為示例，讓我們考慮使用“esbuild”建置的微前端。對於“esbuild”，您需要一個插件（“esbuild-css-modules-plugin”）和相應的配置更改以包含 CSS 模塊。 使用 Piral 我們只需要調整 `piral-cli-esbuild` 已經帶來的配置。我們刪除標準 CSS 處理（使用 SASS）並用插件替換： ``` const cssModulesPlugin = require('esbuild-css-modules-plugin'); module.exports = function(options) { options.plugins.splice(0, 1, cssModulesPlugin()); return options; }; ``` 現在我們可以在程式碼中使用 CSS 模塊，如上所示。 CSS 模塊有一些缺點。首先，它附帶了一些標準 CSS 的語法擴展。這對於區分我們想要導入的樣式（因此要進行預處理/哈希）和應保持原樣的樣式（即稍後在不導入的情況下使用）是必要的。另一種方法是將CSS直接帶入JS文件中。 ## CSS-in-JS CSS-in-JS 最近的名聲很差，但是，我認為這是一個誤解。我也更喜歡將其稱為“CSS-in-Components”，因為它為元件本身帶來了樣式。一些框架（Astro、Svelte 等）甚至允許通過其他方式直接執行此操作。經常被提及的缺點是性能 - 這通常是由於在瀏覽器中編寫 CSS 造成的。然而，這並不總是必要的，在最好的情況下，CSS-in-JS 庫實際上是建置時間驅動的，即沒有任何性能缺陷。  然而，當我們談論 CSS-in-JS（或 CSS-in-Components）時，我們需要考慮現有的各種選項。為簡單起見，我只包含三個：情感、樣式元件和香草提取物。讓我們看看它們如何幫助我們在將微前端整合到一個應用程式中時避免衝突。 ### Emotion Emotion 是一個非常酷的庫，它附帶了 React 等框架的幫助程序，但沒有將這些框架設置為先決條件。情感可以很好地優化和預先計算，並允許我們使用可用的 CSS 技術的完整庫。 使用“純粹”情感相當容易；首先安裝包： ``` npm i @emotion/css ``` 現在您可以在程式碼中使用它，如下所示： ``` import { css } from '@emotion/css'; const tile = css` background: blue; color: yellow; flex: 1; display: flex; justify-content: center; align-items: center; `; // later <div className={tile}>Hello from Blue!</div> ``` `css` 幫助器允許我們編寫被解析並放置在樣式表中的 CSS。返回值是生成的類的名稱。 如果我們特別想使用 React，我們還可以使用 Emotion 中的 jsx 工廠（引入了一個名為 css 的新標準 prop）或 styled 幫助器： ``` npm i @emotion/react @emotion/styled ``` 現在感覺很像樣式是 React 本身的一部分。例如，“styled”幫助器允許我們定義新元件： ``` const Output = styled.output` border: 1px dashed red; padding: 1rem; font-weight: bold; `; // later <Output>I am groot (from red)</Output> ``` 相比之下，“css”輔助屬性使我們能夠稍微縮短符號： ``` <div css={` background: red; color: white; flex: 1; display: flex; justify-content: center; align-items: center; `}> Hello from Red! </div> ``` 總而言之，這會生成不會衝突的類名，並提供避免樣式混合的穩健性。 “styled”助手尤其受到流行的“styled-components”庫的啟發。 ### 樣式元件 “styled-components”庫可以說是最流行的 CSS-in-JS 解決方案，並且常常是此類解決方案聲譽不佳的原因。從歷史上看，這實際上是在瀏覽器中編寫 CSS 的全部內容，但在過去幾年中，他們確實極大地推進了這一點。今天，您也可以對所使用的樣式進行一些非常好的伺服器端組合。 與“emotion”相比，安裝（針對 React）需要更少的軟體包。唯一的缺點是打字是事後才想到的 - 所以你需要安裝兩個包才能完全喜歡 TypeScript： ``` npm i styled-components --save npm i @types/styled-components --save-dev ``` 安裝後，該庫就已經完全可用： ``` import styled from 'styled-components'; const Tile = styled.div` background: blue; color: yellow; flex: 1; display: flex; justify-content: center; align-items: center; `; // later <Tile>Hello from Blue!</Tile> ``` 其原理與“情感”相同。因此，讓我們探索另一種選擇，嘗試從一開始就實現零成本，而不是事後的想法。 ### Vanilla Extract 我之前寫的關於利用類型更接近元件（並避免不必要的執行時成本）的內容正是最新一代 CSS-in-JS 庫所涵蓋的內容。最有前途的庫之一是“@vanilla-extract/css”。 使用該庫有兩種主要方式： - 與您的捆綁器/框架集成 - 直接使用 CLI 在此示例中，我們選擇前者 - 並將其集成到“esbuild”。為了使集成正常工作，我們需要使用“@vanilla-extract/esbuild-plugin”包。 現在我們將其集成到建置過程中。使用 `piral-cli-esbuild` 配置，我們只需將其加入到配置的插件中： ``` const { vanillaExtractPlugin } = require("@vanilla-extract/esbuild-plugin"); module.exports = function (options) { options.plugins.push(vanillaExtractPlugin()); return options; }; ``` 為了使 Vanilla Extract 正常工作，我們需要編寫 `.css.ts` 文件，而不是普通的 `.css` 或 `.sass` 文件。這樣的文件可能如下所示： ``` import { style } from "@vanilla-extract/css"; export const heading = style({ color: "blue", }); ``` 這都是有效的 TypeScript。我們最終會得到一個類名的導出 - 就像我們從 CSS 模塊、Emotion 中得到的一樣 - 你明白了。 所以最後，上面的樣式將像這樣應用： ``` import { heading } from "./Page.css.ts"; // later <h2 className={heading}>Blue Title (should be blue)</h2> ``` 這將在建置時完全處理——而不是執行時成本。 您可能會感興趣的另一種方法是使用 CSS 實用程序庫，例如 Tailwind。 ## CSS 實用程序，例如 Tailwind 這是一個獨立的類別，但我認為既然 Tailwind 是這個類別中的主要工具，我將只介紹 Tailwind。 Tailwind 的主導地位甚至達到了甚至有人問“你寫 CSS 還是 Tailwind？”之類的問題。這與 jQuery 在 DOM 操作領域的統治地位非常相似。 2010 年，人們問“這是 JavaScript 還是 jQuery？”。 無論如何，使用 CSS 實用程序庫的優點是根據使用情況生成樣式。這些樣式不會衝突，因為實用程序庫始終以相同的方式定義它們。因此，每個微前端將僅附帶實用程序庫中根據需要顯示微前端所需的部分。  如果使用 Tailwind 和 esbuild，我們還需要安裝以下軟體包： ``` npm i autoprefixer tailwindcss esbuild-style-plugin ``` esbuild的配置比之前複雜一點。 `esbuild-style-plugin` 本質上是 esbuild 的 PostCSS 插件；所以必須正確配置： ``` const postCssPlugin = require("esbuild-style-plugin"); module.exports = function (options) { const postCss = postCssPlugin({ postcss: { plugins: [require("tailwindcss"), require("autoprefixer")], }, }); options.plugins.splice(0, 1, postCss); return options; }; ``` 在這裡，我們刪除了默認的 CSS 處理插件 (SASS)，並將其替換為 PostCSS 插件 - 使用 PostCSS 的“autoprefixer”和“tailwindcss”擴展。 現在我們需要加入一個有效的 *tailwind.config.js* 文件： ``` module.exports = { content: ["./src/**/*.tsx"], theme: { extend: {}, }, plugins: [], }; ``` 這本質上是配置 Tailwind 的最低要求。它只是提到應該掃描 `tsx` 文件以了解 Tailwind 實用程序類的使用情況。然後找到的類將被放入 CSS 文件中。 因此，CSS 文件還需要知道生成/使用的聲明應包含在哪裡。至少我們只有以下 CSS： ``` @tailwind utilities; ``` 還有其他“@tailwind”指令。例如，Tailwind 帶有重置和基礎層。然而，在微前端中，我們通常不關心這些層。這屬於應用程式 shell 或編排應用程式的關注範圍 - 而不是域應用程式。 然後，CSS 將被替換為 Tailwind 中已指定的類： ``` <div className="bg-red-600 text-white flex flex-1 justify-center items-center">Hello from Red!</div> ``` ## 比較 迄今為止提出的幾乎每種方法都是微前端的可行競爭者。一般來說，這些溶液也可以混合。一個微前端可以採用影子 DOM 方法，而另一個微前端則對 Emotion 感到滿意。第三個圖書館可能會選擇使用香草精。 最後，唯一重要的是所選擇的解決方案是無碰撞的，並且不會帶來（巨大的）執行時成本。雖然某些方法比其他方法更有效，但它們都提供了所需的樣式隔離。 |方法|遷移工作|可讀性|穩健性|性能影響| | ----------- | -------------- | -------------- | ---------- | ------------------ | |大會 |中等|高|低|無 | | CSS 模塊 |低|高|中等|從無到低| |影子 DOM |低到中|高|高|低| | JS 中的 CSS |高|中到高|高|從無到高| |順風|高|中等|高|無 | 性能影響很大程度上取決於實施。例如，對於 CSS-in-JS，如果解析和組合在執行時完全完成，您可能會產生很大的影響。如果樣式已經預先解析但僅在執行時組合，則影響可能很小。如果使用像香草精這樣的解決方案，您基本上不會產生任何影響。 對於 Shadow DOM，主要的性能影響可能是 Shadow DOM 內部元素的投影或移動（本質上為零）以及“style”標籤的重新評估。然而，這是相當低的，甚至可能會產生一些性能優勢，給定的樣式總是切中要害，並且僅專用於要在影子 DOM 中顯示的某個元件。 在示例中，我們有以下捆綁包大小： |方法|索引 [kB] |頁碼 [kB] |表 [kB] |總體 [kB] |尺寸 [%] | | ----------------- | ---------- | --------- | ----------- | ------------ | ------ | |默認| 1.719 | 1.719 1.203 | 1.203 0.245 | 0.245 3.167 | 3.167 100% | |大會 | 1.761 | 1.761 1.241 | 1.241 0.269 | 0.269 3.271 | 3.271 103% | | CSS 模塊 | 2.149 | 2.149 2.394 | 2.394 0 | 4.543 | 4.543 143% | |影子 DOM | 10.044 | 10.044 1.264 | 1.264 0 | 11.308 | 11.308 357% | |情感| 1.670 | 1.670 1.632 | 1.632 25.785 | 25.785 29.087 | 29.087 918% | |樣式元件 | 1.618 | 1.618 1.612 | 1.612 63.073 | 63.073 66.303 | 66.303 2093% | |香草精 | 1.800 | 1.800 1.257 | 1.257 0.314 | 0.314 3.371 | 3.371 106% | |順風| 1.853 | 1.853 1.247 | 1.247 0.714 | 0.714 3.814 | 3.814 120% | 對這些數字持保留態度，因為在情感和样式元件的情況下，執行時可以（並且可能甚至應該）共享。另外，給定的示例微前端確實很小（所有 UI 片段的總體大小為 3kB）。對於更大的微前端，增長肯定不會像這裡描述的那麼問題。 Shadow DOM 解決方案的大小增加可以通過我們提供的簡單實用腳本來解釋，該腳本可以輕鬆地將現有的 React 渲染包裝到 Shadow DOM 中（無需生成新樹）。如果這樣的實用程序是集中共享的，那麼其大小將更接近其他更輕量級的解決方案。 ## 結論 在微前端解決方案中處理 CSS 並不困難 - 只需從一開始就以結構化和有序的方式完成，否則就會出現衝突和問題。一般來說，建議選擇 CSS 模塊、Tailwind 或可擴展的 CSS-in-JS 實現等解決方案。
第1課 ── 基本的函數操作、onclick 事件 https://jsfiddle.net/s1k6z280/57/ 第2課 ── 基本的變數操作、從 html 取得內容 https://jsfiddle.net/d6r4gbfp/1/ 第3課 ── 修改 html 的內容 https://jsfiddle.net/68eytsu5/5/ 第4課 ── 基本的陣列操作 https://jsfiddle.net/6mczqLeu/3/ 第5課 ── 基本的 if/else 條件流程控制 https://jsfiddle.net/n9h2mcuv/1/ 第6課 ── 認識資料型態與轉換 https://jsfiddle.net/hnxus0ym/5/ 第7課 ── 認識巢狀結構 https://jsfiddle.net/2m4g0v9t/3/
阿川收到網友提問如下： ``` 哈囉站長你好 我目前有在看蓬蓬的自學影片跟寫你分享的練習題 有件事想詢問一下我目前快26之前的工作經歷跟軟體一點關係都沒有 高職畢業 目前在自學一些程式語言的技能 如果未來要朝這個方向走建議我先去讀個二技相關科系補學歷嗎？ 還是直接找線上課程或補習班轉職謝謝 原本的打算是想說上二技假日進修補個學歷順便幫自己打底 因為網路上看到蠻多分享是上完課後基礎理論不好 想順便詢問一下沒有學歷的話對未來的工作發展影響大嗎？ 還是學歷只是初期比較看待後面看能力這樣子 ``` 寫一篇完整、公開回答跟大家分享，給類似狀況的人參考： # 不建議回學校補學歷 回學校補學歷真的太花時間了，動輒數年以上 何況入學之後還未必喜歡學校、未必喜歡寫程式 業界很多人也是「學歷普普且無經驗」自學4-9個月後，半路出家轉職成功 不論是金錢 or 時間成本來說，都應該先這樣試試看比較保險吧 # 很多人半路出家之後覺得自己底子不好 本科＆非本科，基礎一定有差 但是現在網路資源、書本資源很多 寫網站不是什麼需要博士學位的「太空火箭科學」 工作上缺哪方面，就往哪方面慢慢自己補充，且戰且走也還夠用的 這行業根據職位狀況，難度可深可淺，一開始先負責較簡單的網頁工作也行 發現自己底子不好，趕快花業餘時間，大力自修一下呀 甚至先入行之後，週末再去學校進修，都比較保險吧 # 學歷對未來工作影響大嗎 學歷好看的話，當然在職場上有優勢 但如果態度不專業、工作多年還是沒什麼作品集，那也很難當工程師吧？ 反過來說，學經歷不強的話 如果態度積極，作品集擺開在那邊，就算不是「超猛」的作品，也讓人知道這工程師有基本的「戰鬥力」呀 更不用說，如果積極貢獻社群、Github 專案有一堆星星，這種時候誰會管這工程師的學歷？ 所以這題的答案是：學歷出色還是很吃香，但也還好啦！畢竟軟體工程這行，偏向「實力主義」，很難靠「關係」或者當「花瓶」或者「辦公室政治」就能混得出色 # 不建議直接跳進去補習班 另外我也不建議直接跑去需「全職上課」半年左右，學費十萬以上那種實體補習班 首先，班上同學程度不一，如果你稍微沒跟上進度，後面老師在講什麼就聽不懂，這樣花了大錢、時間，學習效果也不怎麼樣呀 我建議先大量找免費或便宜的教材，先吸收，多試幾份，真的卡關了，再開始挑補習班 先直接找一些作業跟專案寫寫看，從免費 -> 便宜的 -> 稍貴的，這樣一點一點花錢，風險比較小 更認識自身需求之後，再去比較市面上的各種補習班，最後再把這錢花下去，比較保險 事實上，也有很多人，最後根本沒去補習班，只靠著免費＆便宜的一些資源，就直接順利轉職的呢！ # 結論 這行學無止盡，就算台大畢業，工作十年經驗，還是一直在不斷自學寫程式的奇妙＆精益求精 另外，我也有設計免費的 html&css 教材，還有便宜的 javascript 教材，內含「大量練習專案」，不論你最後選擇哪種學習方式，我都推薦搭配拿去學習、練習，稍有難度，但不少人全做完之後就順利面試上班了 以上，簡單分享個人看法
各位好，我是在google搜尋CSS討論區時碰巧逛到這裡的， 如果有違規之處請多多包涵 我在Mdn網站查找關於Block formatting context的資料 (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) 在這邊提到創建條件： The root element of the document (). 和BFC的特性： With on the , everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element. 我在實作時發現如果要把body創建成BFC，要如下： ``` <style> html { overflow: auto; } .top { overflow: auto; border: 3px solid blue; } .bfc1 { width: 100px; height: 300px; float: left; background-color: gold; } </style> </head> <body class="top"> <div class="bfc1">bfc1</div> </body> ``` 這樣才能實現用藍色框框把浮動一同框起來 我的疑問是，既然"The root element of the document"，為什麼我還需要overflow: auto ? 並且，html和.top二者的overflow: auto只要缺一個，就無法創建BFC， 從Mdn、W3C和各個BFC教學文章我都找不出這樣結果的原因， 但我英文差，也有可能漏掉重要的資訊 另外想問BFC值得把它搞清楚嗎?我已經花太多時間在這上面了...
大家好，我從站長的Dcard貼文中知道這個論壇的。 希望能夠在這裡跟大家一起學習成長。 我有一些問題想請問大家，我是資工畢業的，目前待業中，退伍後決定要朝後端發展，但是因為大學專題及所學都跟後端無關，因此退伍後一直自學到現在(一個月），下面是我建立的網站。 https://paulzhu.netlify.app/ 目前學的有html,css,javascript,git,node.js,express.js 大學專題是深度學習結合APP做掌紋辨識 想請問大家後端該學到什麼樣子的程度，才能夠求職。 謝謝各位抽空觀看這篇文章。
[VS Code](https://code.visualstudio.com/) 是一款免費、跨平台、開源的程式碼編輯器，近年來成為開發者最熱門的選擇。 在本文中，我整理了一些最有用的外掛，您可以使用它們來提高工作效率。 原文出處：https://dev.to/madza/19-vs-code-extensions-to-boost-your-productivity-4npo --- ### 1\. [Swimm](https://go.swimm.io/ide-plugin?utm_source=Hashnode&utm_medium=paid_influencer&utm_campaign=launch_may&utm_content=madza_dev) 使用 Swimm 的富文本編輯器建立文件。記錄跨越多個文件和存儲庫的複雜流程，其中包含與程式碼交互並在您進行更改時自動更新的豐富內容。 在本地驗證和更新文件，並將其作為 CI 工作流的一部分，自動修復簡單的錯誤，並且僅在發生重大更改時提醒您。 在正確的時間找到正確的文件——就在相關程式碼旁邊。當您看到一個 wave 時，這意味著存在與該特定程式碼部分相關的文件。  ### 2\. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 借助 GitLens，開發人員可以通過提供有關 Git 存儲庫的高級可視化和訊息，更好地了解其程式碼庫的歷史、作者身份和更改。 GitLens 還提供了一組豐富的自定義選項，以及內聯責備註釋、提交和差異詳細訊息，甚至無需離開編輯器即可查看和編輯提交訊息的能力。  ### 3\. [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) Thunder Client 是用於 Visual Studio Code 的輕量級 Rest API 客戶端擴展，具有簡單易用的 UI。 支持集合和環境變數和 GraphQL 查詢，以及使用基於 GUI 的界面進行無腳本測試。 所有請求的資料都本地保存在您的設備上。  ### 4\. [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) Tabnine 是一個 AI 程式碼助手，可以通過在所有最流行的編碼語言和 IDE 中實時完成程式碼來提高您的開發速度。 Tabnine 由多種語言專用的機器學習模型提供支持，這些模型是在程式碼上從頭開始進行預訓練的。  ### 5\. [Remote-SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) Remote - SSH 擴展允許您使用任何帶有 SSH 伺服器的遠程機器作為您的開發環境。 無需在本地計算機上安裝源程式碼即可獲得這些好處，因為該擴展程序直接在遠程計算機上執行命令和其他擴展程序。 您可以打開遠程計算機上的任何文件夾並使用它，就像文件夾在您的計算機上一樣。  ### 6\. [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) Docker 擴展使從 Visual Studio Code 建置、管理和部署容器化應用程式變得容易。 它還提供了對容器內 Node.js、Python 和 .NET 的一鍵式除錯。  ### 7\. [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) 使用此擴展，用戶可以輕鬆瀏覽提交歷史記錄、檢查文件更改並比較程式碼的不同版本。 該擴展提供了一個 GUI，可以在時間軸中顯示提交歷史記錄。每個提交都與其提交訊息、作者、日期和時間一起顯示。 用戶還可以查看與每個提交關聯的分支和標籤名稱。  ### 8\. [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) 對於在 VS Code 中使用大量 Markdown 的任何人來說，這是一個有用的工具。它使建立和編輯 Markdown 文件變得更加容易和快速，幫助您提高生產力和效率。 這些功能包括語法突出顯示、程式碼塊格式化、目錄、預覽模式、表情符號支持、鍵盤快捷鍵等等。  ### 9\. [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex) 該擴展在並排文件中顯示當前正則表達式的匹配項。這可以使用 Ctrl+Alt+M 打開/關閉。 可以通過狀態欄條目加入全局選項和多行選項，以便使用並排文件進行評估。當並排文件有多個匹配示例時，這會很有用。  ### 10\. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 使用此擴展，您將能夠將註釋分類為提醒、查詢、TODO、突出顯示等。 註釋掉的程式碼也可以設置樣式以明確程式碼不應該存在。您可以在設置中指定您想要的任何其他評論樣式。  ### 11\. [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) 書籤擴展可幫助您導航程式碼，輕鬆快速地在重要位置之間移動。 不再需要搜尋程式碼。它還支持一組選擇命令，允許您選擇書籤行和書籤行之間的區域。它對日誌文件分析非常有用。  ### 12\. [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) 專案管理器可幫助您輕鬆存取您的專案，無論它們位於何處。不要再錯過那些重要的專案了。 您可以定義您的專案（也稱為收藏夾），或選擇自動檢測 Git、Mercurial 或 SVN 存儲庫、VS 程式碼文件夾或任何其他文件夾。 此外，您還可以使用標籤來組織您的專案。  ### 13\. [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 一個基本的拼寫檢查器，適用於程式碼和文件。 這個拼寫檢查器的目標是幫助捕獲常見的拼寫錯誤，同時保持較低的誤報率。  ### 14\. [Image Optimizer](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ImageOptimizer) 向解決方案資源管理器中的任何文件夾和圖像加入右鍵單擊菜單，使您可以自動優化該文件夾中的所有 PNG、GIF 和 JPEG 文件。 只需右鍵單擊任何包含圖像的文件或文件夾，然後單擊其中一個圖像優化按鈕。  ### 15\. [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) 該擴展支持符號定義跟踪的所有正常功能，但它適用於 CSS 選擇器（類、ID 和 HTML 標記）。 您可以內聯加載 CSS 文件並在此處進行快速編輯，直接跳轉到 CSS 文件或在新編輯器中打開它或在懸停時顯示定義。  ### 16\. [Placeholder Images](https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-placeholder-images) 使用各種第 3 方服務（如 Unsplash、LoremFlickr 等）在 Visual Studio Code 中生成佔位符圖像並將其插入到 HTML 中。 您可以選擇圖像寬度、高度、文本和顏色，將生成的 IMG 標籤插入到您的 HTML 中或將其複製到剪貼板，或者將圖像 URL 插入到您的 HTML 中，複製到剪貼板，或在您的瀏覽器中打開它。  ### 17\. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 具有實時瀏覽器重新加載功能的快速開發實時伺服器。從狀態欄單擊即可啟動或停止伺服器。 允許用戶建立可自定義的端口號，設置伺服器根目錄，並在設置中提供默認的瀏覽器配置選項。  ### 18\. [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) 使用 Peacock，您可以巧妙地更改 VS Code 工作區的顏色。 當你有多個 VS Code 實例、使用 VS Live Share 或使用 VS Code 的遠程功能，並且你想快速辨識你的編輯器時，這是理想選擇。  ### 19\. [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) Polacode 是 VS Code 的擴展，它可以對你的程式碼進行截圖。 該擴展生成一個與源具有相同風格和主題的螢幕截圖。  --- 以上簡單分享，希望對您有幫助～
上次的說明了PHP套件管理的歷史與社群提出的解決之道，本篇文章接著談類別管理的進階議題。 # 當類別名稱一樣... 當專案大了起來，有時候會有類別名稱重複的問題。 假設今天要撰寫一個論壇模組，提供討論區與留言板功能。 你一定很想將討論區的文章與留言板的文章都命名類別為Article： ``` // BoardArticle.php <?php class Article{ //... } ?> // ForumArticle.php <?php class Article{ //... } ?> ``` 當然了，這麼做會得到一個結果： ``` Fatal error: Cannot redeclare class Article ``` 這種問題有一個簡單的解決辦法，就是加上前綴字。 類別分別命名為ForumArticle與BoardArticle就可以了。 *Q1: 等一下！這個解法好陽春！我看到至少4個問題：* 1. 類別名稱容易變得冗長。 2. 有些類別一開始你以為不會跟人重複，結果之後真的重複了。難道永遠替類別加前綴字？ 3. 類別名稱寫Article俐落多了！文章就是概念上的文章，不要逼我告訴你是討論區還是留言板！如果專案用到兩種留言板模組，分別由以前的兩個前輩寫好，難道還要逼我把作者名稱寫進去？ ``` class TonyBoardArticle{ //... } class JackBoardArticle{ //... } ``` 4. 如果我在打造框架(framework)呢？幾乎會把所有常見名詞用過一次(像是Request、Loader、Response、Controller、Model等類別)！難道前面全部前綴？ 看看 Codeigniter 的原始碼，全部用CI_當作前綴。超醜的。 # 命名空間(namespace)登場 於是PHP從5.3版之後支援了命名空間(namespace)。 所以可以用Article替類別定義了： ``` // BoardArticle.php <?php namespace Board; class Article{ //... } ?> // ForumArticle.php <?php namespace Forum; class Article{ //... } ?> ``` 使用類別時只要加上命名空間即可： ``` //index.php <?php include 'BoardArticle.php'; include 'ForumArticle.php'; $article = new Forum\Article(); $post = new Board\Article(); ``` 如果當前的php檔只用到其中一個Article類別，可以指定當前的php檔只用哪個命名空間+類別的組合： ``` <?php include 'BoardArticle.php'; include 'ForumArticle.php'; use Forum\Article; $article = new Article(); $fArticle = new Forum\Article(); $bArticle = new Board\Article(); ``` 如此一來，當php找不到Article類別時，便會去使用use關鍵字宣告的組合。 當然了，就算用use指定過，原本的宣告方式還是可以用的。(如最下方兩行所示) # 當東西多了起來... OK，可以繼續完成我們的論壇模組了！ 討論區跟留言板有各自的文章，再來還需要「推文」： ``` <?php namespace Board; class Comment{ // ... } ?> <?php namespace Forum; class Comment{ // ... } ?> ``` 使用剛剛學到的命名空間去載入他們： ``` <?php // index.php include 'BoardArticle.php'; include 'ForumArticle.php'; include 'BoardComment.php'; include 'ForumComment.php'; $article = new Forum\Article(); $comment = new Forum\Comment(); // ... ``` 果然是漂亮的各種命名阿！ *Q2: include有好多行！上次提到了Composer可以解決這種問題，當引入命名空間之後，Composer也能發揮作用嗎？* **是的。** # Composer登場 跟上次初學Composer一樣，建立一個composer.json檔： ``` { "autoload": { "files": [ "ForumArticle.php", "ForumComment.php", "BoardArticle.php", "BoardComment.php" ] } } ``` 注意，上次我們用"classmap"指定資料夾、把資料夾內檔案全掃一次，這次我們用"files"分別設定各個檔案。 再來，在terminal輸入 ``` composer install ``` 執行完畢之後，跟上次一樣，只要載入一個檔案： ``` <?php require 'vendor/autoload.php'; $article = new Forum\Article(); $comment = new Forum\Comment(); ``` 就可以使用各個類別囉！ *Q3: 等一下！看起來跟沒有命名空間的時候差不多啊！一樣是把php檔自動require進去而已？* 對啊，你最上面的原始寫法，也只是手動載入好幾個檔案，在載入的時候本來就沒有特別之處： ``` <?php // index.php include 'BoardArticle.php'; include 'ForumArticle.php'; include 'BoardComment.php'; include 'ForumComment.php'; $article = new Forum\Article(); $comment = new Forum\Comment(); // ... ``` 載入php檔就只是載入，跟命名空間是兩回事。 *Q4: 還是不太對啊！上次我用classmap一次把好幾個資料夾內容掃過，這次我用files分別指定每個檔案幹嘛？Composer不是厲害在能指定資料夾去自動掃過？* ......你說的沒錯。 開個my_lib資料夾，把4個php檔都丟進去吧。composer.json這樣寫就好了： ``` { "autoload": { "classmap": [ "my_lib" ] } } ``` 再來，在terminal輸入 ``` composer install ``` 這樣就搞定了！ 其實我只是想示範，除了用classmap設定資料夾之外，也可以用files直接指定檔案。 *Q5: OK，原諒你。不過，我必須說，我今天什麼都沒學到。最後還是在composer.json寫classmap而已，跟上次一模一樣。* 是的...我剛說了，載入php檔就只是載入，跟命名空間是兩回事。 我今天介紹的namespace功能是PHP本身提供的。而Composer只是協助你載入的工具、當然不可能改變程式語言本身。 Composer只是幫助你少打那一串require而已。 *Q6: ㄟ等等...有個地方我覺得很醜。我們現在的my_lib資料夾裏面有4個檔案，檔名很醜：* ``` "ForumArticle.php" "ForumComment.php" "BoardArticle.php" "BoardComment.php" ``` 類別名稱本身都是俐落的Article跟Comment了，檔案名稱還是有前綴字。但也不可能有兩個Article.php、兩個Comment.php。你有沒有辦法解決這個美感問題？ 這個問題簡單，把那個my_lib資料夾刪掉，開一個Forum資料夾、一個Board資料夾。本來的ForumArticle.php改成Article.php丟進Forum資料夾、本來的BoardArticle.php改成Article.php丟進Board資料夾。composer.json改寫成這樣： ``` { "autoload": { "classmap": [ "Board", "Forum" ] } } ``` 再來，在terminal輸入 ``` composer install ``` 這招不錯吧！檔案名稱就是類別名稱，乾淨俐落！ 而且資料夾的名字本身就是namespace的名稱！ 以後都這樣做啦！一用到命名空間就開個同名資料夾把檔案丟進去！ *Q7: 這招我覺得還好耶...。本來檔案都放在my_lib，我在composer.json只要填my_lib一行就好，現在變成要填兩行。要是我這個論壇模組有一大堆類別、用了一大堆命名空間呢？那我classmap底下不就要填入好幾行？那我寧可全部丟進my_lib，只填my_lib一行！* 唔，這樣說也是有道理。那重新建立my_lib資料夾，把Board跟Forum資料夾丟進my_lib資料夾。 composer.json改回這樣寫： ``` { "autoload": { "classmap": [ "my_lib" ] } } ``` 再來，在terminal輸入 ``` composer install ``` classmap不只是告訴Composer去載入哪幾個資料夾內的檔案，還會把資料夾內的資料夾也全部掃過一次。 怎麼樣，Composer夠神吧。 *Q8: 原來classmap底下會遞迴掃描下去...。我決定了，我的Forum跟Board都是在提供線上討論功能，我決定替我這個模組命名為Discussion。我要在my_lib底下開Discussion資料夾，然後把原本的Forum跟Board資料夾都丟進去。你覺得這個想法如何？* 還不錯。一個Discussion資料夾就是你的整個Discussion模組。 提供了討論區、留言板功能的Discussion模組，我喜歡。 *Q9: 好像忘了什麼...。啊，剛剛說命名空間跟檔案結構符合會最漂亮。那我要把那4個檔案的namespace改成這樣：* ``` <?php namespace Dicussion/Forum; class Article{ //... } ``` 剛剛說了，載入檔案就只是載入檔案，跟命名空間無關。 現在檔案結構沒變，所以我應該不用重新輸入composer install。 讓我試試...。 靠！怎麼噴error了！你騙我？ ``` Fatal error: Class 'Discussion\Forum\Comment' not found ``` 呃...，我前面的說法確實有點誤導。 PHP自動載入的基本函式長這樣： ``` void __autoload ( string $class ) ``` 如你所見，PHP至少需要Composer提供資訊指出$class該去哪個檔案找。 namespace改變之後，PHP會找不到對應的$class在哪。 所以還是輸入一下composer install吧！Composer會把需要的資訊整理好的。 *Q10: OKOK，我知道了，我駕馭這一切了。我覺得這個Dicsussion模組真的超屌的，不但命名空間漂亮，連檔案結構都漂亮。我要把這個Discussion資料夾整個丟給我朋友，他們公司最近需要論壇模組。* 讓我打電話給他...。 「什麼？你們已經做好半個論壇模組了？你只需要我模組的其中幾個功能？你們的模組也是放在Discussion資料夾？」 糟糕，資料夾名稱重複了！所以我的模組拿給別人還是有不相容的可能，怎麼辦？ 沒有錯..還記得你Q1提到的第3個狀況嗎？確實有把作者名稱加進去的必要！ 別怕，我教你。你開一個Tony資料夾，把整個Discussion資料夾丟進去。 接著所有檔案namespace改成像這樣： ``` <?php namespace Tony/Dicussion/Forum; class Article{ //... } ``` 要用的時候就這樣喔： ``` <?php require 'vendor/autoload.php'; $article = new Tony\Discussion\Forum\Article(); $comment = new Tony\Discussion\Forum\Comment(); ``` 是變得有點長啦。 但這下搞定了吧！作者名稱再撞到的話，就改個獨特的名稱就是了！ # 終於。讓我們談談PSR-0 你一定常聽到PSR-0對吧！ PSR-0是PHP跨框架相容性統一標準組織訂出來的自動載入慣例。 來談談PSR-0幾個最重要的要求吧！ * 命名空間加上類別名稱一定要長這樣： ``` {vendor name}\{namespace}\{class name} ``` * 前面一定要是作者名稱 * 中間可以有任意層次的命名空間、最後是類別名稱。 * 中間任意層次的命名空間直接對應到檔案結構。 發現了嗎？在剛剛Q1~Q10的過程中，其實你已經把PSR-0學完了，連設計原理都一起搞懂了。 懂這些之後，你也可以做好自己的模組、發佈到 Packagist 給全世界透過composer下載、使用了！ 最後，如果遵守psr-0的話，composer.json可以這樣寫： ``` { "autoload": { "psr-0": { "Tony\\Discussion\\": "my_lib/" } } } ``` 注意，雙引號、兩次反斜線並沒有特別意思，只是 json 規定的格式。 跟classmap一樣都可以完成任務。兩者其實是有差別的...，我們下次再談。 # 結語 Composer工具以及PHP-FIG組織的出現，讓一直以來散落各地的PHP社群開始有集中的趨勢。 換句話說，各社群終於能共享彼此的library了。 然而，如你所見，psr-0不但導致檔案結構容易變得深層，還要求檔案結構必須配合程式碼，這也招致了不少批評。 https://r.je/php-psr-0-pretty-shortsighted-really.html 除此之外，composer autoload內的classmap跟psr-0到底如何分工？效能差異又為何？這些問題也都還在爭論與驗證當中。 http://stackoverflow.com/questions/22803419/why-use-a-psr-0-or-psr-4-autoload-in-composer-if-classmap-is-actually-faster 不過，PSR-0在各框架已被廣泛支援，因此建議你還是需要有所瞭解。 # 最後... 現在已經出現psr-0的替代方案，稱為psr-4。 PSR-0從2014-10-21開始被註明為不建議使用。 至於PSR-4..我們下次再談。
## 課程目標 - 學會處理 git 衝突 ## 課程內容 這課來學一下 commit 彼此有衝突，而 git 沒辦法自動合併的情況吧 先挑一個資料夾，把 `my-work-1.html` 裡面隨意加上幾行內容 ``` <p>我的第一個網頁檔案</p> <p>new content a</p> <p>new content b</p> <p>new content c</p> ``` 接著 ``` git add my-work-1.html git commit -m 'new content abc' git push ``` 順利送出！ 然後去另一個資料夾，把 `my-work-1.html` 裡面隨意加上幾行內容 ``` <p>我的第一個網頁檔案</p> <p>new content x</p> <p>new content y</p> <p>new content z</p> ``` 接著 ``` git add my-work-1.html git commit -m 'new content xyz' git push ``` 結果失敗了！一如預期，被 git 喊停了 ``` To github.com:howtomakeaturn/my-first-testing-repo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'github.com:howtomakeaturn/my-first-testing-repo.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. ``` 預期之中，這時應該 pull 對吧？ ``` git pull ``` ``` remote: Enumerating objects: 14, done. remote: Counting objects: 100% (12/12), done. remote: Compressing objects: 100% (4/4), done. remote: Total 8 (delta 3), reused 8 (delta 3), pack-reused 0 Unpacking objects: 100% (8/8), 792 bytes | 79.00 KiB/s, done. From github.com:howtomakeaturn/my-first-testing-repo d999c25..2cf01f4 main -> origin/main hint: Pulling without specifying how to reconcile divergent branches is hint: discouraged. You can squelch this message by running one of the following hint: commands sometime before your next pull: hint: hint: git config pull.rebase false # merge (the default strategy) hint: git config pull.rebase true # rebase hint: git config pull.ff only # fast-forward only hint: hint: You can replace "git config" with "git config --global" to set a default hint: preference for all repositories. You can also pass --rebase, --no-rebase, hint: or --ff-only on the command line to override the configured default per hint: invocation. Auto-merging my-work-1.html CONFLICT (content): Merge conflict in my-work-1.html Automatic merge failed; fix conflicts and then commit the result. ``` 在前一課，我們 pull 之後，會被 git 自動把雲端版本、跟本機你剛改過的版本，合併在一起，然後在終端機編輯器內，請你打一段小訊息，備註這次合併 這次，卻沒有進入終端機編輯器內，而是跳出一串訊息！ 注意看最後幾行！ ``` Auto-merging my-work-1.html CONFLICT (content): Merge conflict in my-work-1.html Automatic merge failed; fix conflicts and then commit the result. ``` 這就是 commit 衝突的情況：兩個 commit 都有改到同樣檔案，雖然先後時間不同，但是 git 不敢直接用新的蓋掉舊的！ git status 看一下 ``` Unmerged paths: (use "git add <file>..." to mark resolution) both modified: my-work-1.html ``` 清楚寫出了：both modified，兩邊都修改過！ 打開 `my-work-1.html` 看一下 ``` <p>我的第一個網頁檔案</p> <<<<<<< HEAD <p>new content x</p> <p>new content y</p> <p>new content z</p> ======= <p>new content a</p> <p>new content b</p> <p>new content c</p> >>>>>>> 2cf01f4f63f5ea9040610495688f08032761a170 ``` 看起來很嚇人，其實，只是 git 怕你看不清楚，用一種誇飾法，列出衝突的地方而已！ HEAD 段落，是你剛提交的 commit 部份 `2cf01f4f63f5ea9040610495688f08032761a170` 的部份呢？則是剛剛從 github 抓下來的 commit 代號！ 要如何處理衝突呢？其實，你就決定一下，衝突這幾行，到底要怎麼合併就可以了，然後把 git 誇飾法的地方刪掉 比方說，我決定讓行數交錯呈現吧 ``` <p>我的第一個網頁檔案</p> <p>new content a</p> <p>new content x</p> <p>new content b</p> <p>new content y</p> <p>new content c</p> <p>new content z</p> ``` 改完之後 ``` git add my-work-1.html ``` ``` git commit -m 'handle conflict' ``` 手動合併的 commit，我個人通常習慣訊息就寫 handle conflict ``` git push ``` 大功告成！這就是所謂的 git 衝突處理 ## 課後作業 接續前一課的作業 在上一次的作業，我們嘗試了兩個資料夾，同時 push 送出 commit，導致 git 比對 github 上的雲端版本時，發現有衝突，請你先 pull 再 push 的情況 上次的情況比較單純，因為雖然有衝突，但是 git 一看就知道影響不大，所以 pull 時自動處理了衝突，把事情都安排好了 這次的作業，我們要模擬「遇到衝突，而且 git 無法自動處理衝突」的情況 --- 請按照以下步驟，送出 commit **第一步** 到 `at-home` 資料夾，打開檔案 `about.html` 的內容，原本是 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發</p> ``` 請改成 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發，目標是成為厲害的前端工程師</p> ``` 然後送出 commit，接著 `git push` 出去 你會看到 github 上面就被更新了 **第二步** 到 `at-laptop` 資料夾，假設你今天出門工作，忘記先 pull 了，也忘記檔案其實你已經改好了 打開檔案 `about.html` 的內容，依然是 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發</p> ``` 請改成 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發，目標是成為厲害的軟體工程師</p> ``` 然後送出 commit，接著 `git push` 出去 這時 git 會請你先更新，於是你輸入 `git pull` 你會發現 git 表示遇到衝突，無法自動合併，請你處理！ 原來有一邊是寫「前端工程師」，另一邊是寫「軟體工程師」 git 無法自動判斷你到底是想要以哪個為準！（其實用哪個都可以吧！） 請處理這個 conflict 衝突，處理完之後 push 到 github 上面 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把 github 專案連結，貼到留言區
## 課程目標 - 學會 git pull ## 課程內容 學會把專案上傳 github 了，這次來試試把專案從 github 載下來吧 假設你現在使用另一台新電腦，專案還不在你的電腦上 打開專案頁面 https://github.com/howtomakeaturn/my-first-testing-repo 頁面上有一個 `Code` 的按鈕，點下去有 clone（複製）的指示 在電腦上先移動到別的資料夾底下，使用 clone 指令把專案抓下來 ``` git clone [email protected]:howtomakeaturn/my-first-testing-repo.git ``` 完成之後，會看到在新資料夾底下，有一份一模一樣的專案！ --- 在新資料夾底下，把 `my-work-3.html` 裡面隨意加上幾個字，接著 ``` git add my-work-3.html git commit -m 'commit from new folder' git push ``` 打開 github，會在上面看到有被更新！ --- 回到之前的「舊資料夾」底下，把 `my-work-4.html` 裡面隨意加上幾個字，接著 ``` git add my-work-4.html git commit -m 'commit from old folder' git push ``` 會發現上傳失敗！ ``` To github.com:howtomakeaturn/my-first-testing-repo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'github.com:howtomakeaturn/my-first-testing-repo.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. ``` 原因是，git 發現，你從兩個不同的地方，分別更新過不同檔案，git 怕你會搞混編輯歷史紀錄 （github 上現在有4筆 commit，目前資料夾上也是4筆 commit，git 無法分辨哪個第4筆是最新的） 所以 git 希望你能先把最新版本抓下來，再送出你的版本，比較不會有爭議！ 把新版本抓下來的指令是 ``` git pull ``` 抓完之後，因為 git 自動把雲端版本、跟本機你剛改過的版本，合併在一起了 會請你打一段小訊息，備註這次合併 通常你就使用 `ctrl + x` 或者 `:q` 離開終端機編輯器就可以了 完成之後，使用 `git log` 會看到，現在有6筆 commit 紀錄，最後一筆是剛剛自動合併的 commit ``` Merge branch 'main' of github.com:howtomakeaturn/my-first-testing-repo ``` 使用 `git status` 也會看到 ``` On branch main Your branch is ahead of 'origin/main' by 2 commits. (use "git push" to publish your local commits) nothing to commit, working tree clean ``` git 提示你目前比雲端版本還多了 2 筆 commit（一筆是你剛加的，一筆是關於自動合併的） 使用 `git push` 通通推上去 github 吧！ --- 看到這邊你可能會想，剛剛那筆自動合併的 commit 好像有點多餘？ 就把 `commit from new folder` 以及 `commit from old folder` 按照時間順序排列，不就好了嗎？ 其實，那是因為這兩筆 commit 內容沒有重疊，所以看起來很單純 實務上很多時候，兩筆 commit 會更新到「相同的檔案」之中的「同樣幾行程式碼」 這時 git 如果按照時間順序排列，就會讓「較晚送出 commit 的人」把「較早送出 commit 的人」的工作內容覆蓋掉！ 這樣一來，根本沒辦法團隊工作：晚提交的人，會一直破壞掉早提交的內容！ 所以 git 一律會多一筆「合併 commit」。平常就自動合併沒問題，有衝突時，就可以在這筆 commit 處理 有點不懂沒關係，我們下一課會練習 ## 課後作業 接續前一課的作業，專案已經傳到 github 了 假設你原本是用家裡的電腦開發，現在你打算帶著筆電，出門到咖啡廳繼續開發 請拿出你的筆電，把 github 上那個專案 `git clone` 到筆電上面 如果你沒有筆電，沒關係，在電腦上另外找個資料夾，用 `git clone` 從 github 抓專案下來 這樣兩個資料夾對應同一個專案，也可以，模擬跨裝置同步專案 --- 現在分別有兩個資料夾，內容一模一樣，我這邊分別用 `at-home` 以及 `at-laptop` 稱呼兩個資料夾 請按照以下步驟，送出 commit **第一步** 到 `at-home` 資料夾，建立一個檔案 `create-this-file-at-home.html` 內容放 ``` <p>我在家裡新增這個檔案</p> ``` 然後送出 commit，接著 `git push` 出去 你會看到 github 上面就被更新了 **第二步** 到 `at-laptop` 資料夾，建立一個檔案 `create-this-file-at-laptop.html` 內容放 ``` <p>我在咖啡廳新增這個檔案</p> ``` 然後送出 commit，接著 `git push` 出去 你會看到錯誤訊息！ git 會跟你說，有衝突，請先將資料夾內容下載同步，再更新 **第三步** 所以請輸入 `git pull` 先把資料夾更新到最新版本 接著用 `git log` 看一下，會看到有關 `create-this-file-at-home.html` 那個檔案的 commit **第四步** 這時再 `git push` 出去 你會看到 github 上面就被更新了 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把 github 專案連結，貼到留言區
## 課程目標 - 學會 git 重置指令 ## 課程內容 我們已經會「新增檔案 -> 編寫草稿 -> 放進滿意區」這個流程了 接著來學一下反過來的流程，也就是作家又覺得滿意區的內容不怎麼樣，想要移回草稿區，最後決定整個取消的過程 --- 請修改 `my-work-4.html` 的內容，原本是 ``` <p>我的第四個網頁檔案</p> ``` 改成 ``` <p>我的最後一個網頁檔案</p> ``` 使用 `git status` 看一下，應該會是紅色的 可以用 `git diff` 查看，git 會幫你比對差異的部份給你看、方便你確認草稿變化！ --- 確認沒問題的話，就可以用 `git add my-work-4.html` 放進暫存區（滿意區） 使用 `git status` 看一下，應該會是綠色的 這時用 `git diff` 查看，應該沒東西了，因為 `git diff` 只會檢查草稿區的內容 --- 假如就在此時，我們反悔了，想要把它移回草稿區，該怎麼辦呢？ ``` git reset my-work-4.html ``` 使用 `git status` 看一下，應該會是紅色的 使用 `git diff` 看一下，應該又會看到差異內容了 --- 如果對草稿區的內容不滿意，想要取消回去怎麼辦呢？ ``` git checkout -- my-work-4.html ``` 使用 `git status` 看一下，應該又是乾乾淨淨了！ --- 在前一課，我們使用 git checkout 切換版本，這一課卻用 git checkout 來取消草稿內容，怎麼回事？ 其實，取消草稿內容，某種角度來說，也算是切換版本的一種，對嗎？ 只是這次是針對單一檔案，不是針對整個資料夾而已 語法跟觀念覺得有點不清晰，沒關係，反正跟你用文書編輯軟體時，`ctrl + z` 的意義也差不了多少 就先照做、用下去、享受方便記錄與管理的好處就對了！ ## 課後作業 接續前一課的作業，你回到上一個版本看了一下，但又覺得還是拆成多個檔案比較好 請先使用 `git checkout master` 切回最新的版本 這次來模擬實際開發的時候，檔案放進暫存區，但又反悔了，放回草稿，然後取消的過程 --- 繼續開發個人品牌網站，繼續加入更多資訊 請先在 `background.html` 加入以下資訊 ``` <p>國小：開心國小</p> <p>國中：快樂國中</p> ``` 然後用 add 指令把這次更新放進暫存區 這時用 `git status` 查看，檔案名稱應該是綠色的 --- 想了一下，你突然又覺得，國中國小學歷，應該沒人關心，還是別放進去好了 請使用 reset 指令把 `background.html` 檔案從暫存區移出 這時用 `git status` 查看，檔案名稱應該是紅色的 --- 接著，使用 checkout 指令取消掉上述的修改 最後請輸入 `git status`，應該會看到乾乾淨淨的，沒有任何變動！ 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把第一次、第二次、第三次 `git status` 的結果，分別貼到留言區
## 課程目標 - 學會 git 版本切換 ## 課程內容 上次的內容順利提交之後 這次讓我們試試看切換版本功能！ 在 git log 內，每個 commit 紀錄後面，會看到一串提交代號，類似這樣 `0e78f9d62d1342f29b1a2a3af8b751f1a4d653ef` git 強大的版本歷史功能，就跟這個相關 請找到前一筆提交的代號，然後輸入切換版本指令 ``` git checkout 148106fcb1a496ab034ad5f6253c1dd8fe21eb22 ``` 看一下資料夾內容，會發現就跟「搭時光機」一樣，整個專案的狀態「回溯」到上一次提交了！ 再看一下這時 `git log` 會顯示什麼，會發現歷史紀錄也只剩兩筆了！ 你可以再找出更前一筆提交代號 ``` git checkout 0e78f9d62d1342f29b1a2a3af8b751f1a4d653ef ``` 會發現回溯到第一筆提交狀態了！神奇吧！ --- 時光機搭完了，要如何回到最新狀態呢？ ``` git checkout master ``` 這樣就行了！ master 其實是主要的 branch 名稱 先不用管 branch 是什麼意思，之後會提到 在學習 git 過程中，很多東西先「享受用起來的好處」就夠了 背後機制與觀念，有點一知半解沒關係，真的卡關再去鑽研就可以了 反正目的就是管理檔案的歷史版本而已嘛！ ## 課後作業 接續前一課的作業，你的專案目前有三個 html 檔案 你突然又有點反悔，覺得原本全部資訊寫在 `index.html` 那樣比較好？ 開發專案時，像這樣反反覆覆其實很正常，就切回去看一下，感覺看看有沒有比較好，再決定即可 請使用 `git checkout {版本}` 指令，切回前一個 commit 的版本 你可以看一下資料夾內容，應該會發現變回之前的樣子了！ --- 請輸入 `git log`，應該會發現，歷史紀錄也倒退了一個版本！ 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把整段 `git log` 顯示的文字內容複製，貼到留言區 也可以直接截圖視窗內 `git log` 的內容，上傳到留言區
## 課程目標 - 學會 git 基本指令 ## 課程內容 來建立第一個檔案吧，請建立 `my-work-1.html` 並放入以下內容 ``` <p>我的第一個網頁檔案</p> ``` 接著用 `git status` 看看狀況 會看到檔案名稱顯示為「紅色」，並放在「Untracked」訊息下方 這代表 git 已經發現它的存在了 --- 接著來開始追蹤檔案 ``` git add my-work-1.html ``` 然後輸入 `git status` 看看狀況 會看到檔案名稱顯示為「綠色」，並放在「to be committed」訊息下方 這代表 git 已經把它放入暫存區，準備好正式納入歷史紀錄了 --- 來建立第二個檔案試試吧，請建立 `my-work-2.html` 並放入以下內容 ``` <p>我的第二個網頁檔案</p> ``` 接著用 `git status` 看看狀況 會看到新的檔案又顯示為紅色，暫存區的檔案一樣是綠色沒變 接著再繼續追蹤 ``` git add my-work-2.html ``` 然後輸入 `git status` 看看狀況 會看到兩個檔案都顯示為綠色，代表都放入暫存區了 --- 之所以會分成那麼多步驟，是因為開發者寫程式，很像是作家寫小說/漫畫家畫漫畫，交給出版社那樣 首先，你手上會有很多隨手草稿，這些看不順眼可以隨時丟掉，也就是 git 顯示為紅字的部份 接著，你覺得比較滿意的幾張紙會挑出來，放在旁邊，但你不會直接交給出版社，而是先整理在旁邊，也就是 git 顯示為綠字的部份 然後，哪些是滿意的？哪些是草稿？這兩部份你會一直改變心意，也就是有的會從紅色移進綠色，有的會從綠色移進紅色，一直來回修改，到你滿意為止 最後，你才會把這次要交給出版社的那些滿意部份，通通放進牛皮紙袋，一口氣交給出版社，而 git 版本管理就是在模擬這個過程 --- 來正式提交我們的第一次版本紀錄吧！ 需要打一段提示訊息，方便日後翻閱，大致知道每個提交的內容 ``` git commit -m 'this is my first commit, i am so happy!' ``` 完成之後，請再輸入 `git status` 看看，會看到又變得乾乾淨淨了，因為目前沒有正在「工作」的稿件 然後輸入 `git log` 看看，應該會看到剛剛那筆提交紀錄囉！ --- 讓我們多提交幾次檔案，試試看多次提交的感覺！ 先建立新檔案，請建立 `my-work-3.html` 並放入以下內容 ``` <p>我的第三個網頁檔案</p> ``` ``` git add my-work-3.html ``` ``` git commit -m 'add another work' ``` --- 然後再建立新檔案一次，請建立 `my-work-4.html` 並放入以下內容 ``` <p>我的第四個網頁檔案</p> ``` ``` git add my-work-4.html ``` ``` git commit -m 'add one more work' ``` --- 然後輸入 `git log` 看看，應該會看到總共三筆提交紀錄！ --- 在 git 專有名詞中，檔案的狀態分為 untracked/unmodified/modified/staged/commited 提交則稱為 commit 不同文章，有時會用不同的稱呼，一開始有點混亂沒關係，久了會慢慢習慣 記得我說的作家與出版社的比喻即可，我會用 `草稿/紅色 vs 滿意區/綠色` 來描述檔案狀態 反正就是「新增檔案 -> 編寫草稿 -> 放進滿意區 -> 最後一口氣把滿意區的所有檔案提交出去」 然後身為作家，就是每個截稿日之前，都重複一次上面這個流程，就這樣而已 學習的過程，養成習慣，經常 `git status` `git log` 看一下，就會更清楚了！ ## 課後作業 假設你正要做一個網站，來做自我介紹、經營個人品牌 請繼續用前一課作業的資料夾，用來放整個網站的檔案 然後要模擬實際開發的時候，先寫筆記規劃，接著一直增減檔案的過程 請按照以下順序送出 commit **第一個 commit：** 新增一個 `README.md` 檔案，裡面放入以下內容（實務上，每個專案通常都會放這個檔案，內容是給自己看的專案筆記，不會出現在網站上）： ``` # 簡介 這專案用來放我的個人品牌網站內容 # 規格 預計包含簡介、學經歷，等等頁面 ``` **第二個 commit：** 新增一個 `index.html` 檔案，裡面放入以下內容 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發</p> <h1>我的學歷</h1> <p>高中：積極高中</p> <p>大學：品質大學</p> ``` **第三個 commit：** 你改變心意，覺得拆成多個頁面比較好看，也比較容易分別追蹤瀏覽次數 請把 `index.html` 檔案的內容清空，改放以下內容 ``` 我是XXX，請參考其它頁面，瞭解更多我的介紹與背景。 ``` 新增 `about.html` 以及 `background.html` 兩個檔案 並且把 `我是誰` 的內容放進 `about.html`，把 `我的學歷` 的內容放進 `background.html` --- 最後，請輸入 `git log`，應該會看到以上三個 commit 的訊息！ 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把整段 `git log` 顯示的文字內容複製，貼到留言區 也可以直接截圖視窗內 `git log` 的內容，上傳到留言區
我是web工程師，從剛開始學MVC就深感困惑： - 怎麼每個地方說的MVC都不太一樣？ - 有些文章講的MVC，跟我正在用的MVC，怎麼像完全不同的東西？ Model、Controller、View三者到底如何互動？真是一個定義不明、含糊不清的名詞。 這讓我研究了很久。最後，發覺它是一個嚴重的誤會。 這個誤會導致了學習和溝通上的代價，請聽我娓娓道來。 # 哪些是MVC？ web領域，不論前端(client-side)、後端(server-side)、不論什麼程式語言，幾乎所有framework都自稱、或被認為是「MVC」。 有哪些呢？ 前端：Backbone.js、AngularJS、Ember.js… 後端：Ruby on Rails、CodeIgniter、Laravel、Django… 真的是這樣嗎？它們全都是MVC嗎？ # MVC是什麼？ 該怎麼定義MVC呢？ 我們先來看看維基百科怎麼說： > MVC模式（Model-View-Controller）是軟體工程中的一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model）、檢視（View）和控制器（Controller）。 嗯，跟大家說的一樣。我們繼續往下看： > 模型（Model） 用於封裝與應用程式的業務邏輯相關的資料以及對資料的處理方法。「 Model 」有對資料直接存取的權力，例如對資料庫的存取。「Model」不依賴「View」和「Controller」，也就是說， Model 不關心它會被如何顯示或是如何被操作。但是 Model 中資料的變化一般會通過一種重新整理機制被公布。為了實作這種機制，那些用於監視此 Model 的 View 必須事先在此 Model 上註冊，從而，View 可以了解在資料 Model 上發生的改變。（比較：觀察者模式（軟體設計模式）） 看起來有些陌生，整段描述跟你的web開發經驗完全不同，對嗎？ 最大的疑問來自這句： > 那些用於監視此 Model 的 View 必須事先在此 Model 上註冊，從而，View 可以了解在資料 Model 上發生的改變。（比較：觀察者模式（軟體設計模式）） 後面直接叫你去看觀察者模式(observer pattern)。 問題來了：你有在view跟model之間實作observer pattern嗎？ 也就是說，你的Model在資料改變之後，能主動通知View嗎？ 沒有的話，就根本不符合MVC的定義。 # 全都不是MVC？ 我們現在發現MVC有observer pattern這個必要條件了。 事情嚴重了起來。 client-side framework或許能夠符合這個條件。 以Backbone.js官網範例來說，我們可以這樣在Model上註冊： ``` book.on({ "change:title": titleView.update, "change:author": authorPane.update, "destroy": bookView.remove }); ``` 它的確實作了observer pattern。 但server-side framework呢？ 你的Model如何能在發生改變之後去「主動通知」View？ 你平常開發web哪有用到server push的技術？ 所有server-side framework，從Ruby的Rails；PHP的CodeIgniter、Laravel；到Python的Django，他們全都不是MVC。 它們實作的，是昇陽電腦在1998年提出的「Model 2」。 # 什麼是Model 2？ Model 2名氣不大，在維基百科連中文條目都沒有。我們看看英文條目怎麼講： > Model 2 is a complex design pattern used in the design of Java Web applications which separates the display of content from the logic used to obtain and manipulate the content. > In a Model 2 application, requests from the client browser are passed to the controller. The controller performs any logic necessary to obtain the correct content for display. 它針對web而設計，讓controller進行必要的程序之後，將資料塞進view去呈現。 正是我們server-side框架在做的事情。 也就是說，server-side目前只能實作Model 2；client-side可以實作Model 2，也可以實作MVC。 # 巨大的代價 web工程師最常碰的就是client-side跟server-side框架。結果整個業界把MVC跟Model 2混為一談，都說成MVC。 這帶來了什麼後果呢？ MVC變成一個從初學者到業界工程師，永遠說不清楚、下不了定義的名詞。 這件事對於學習和討論，造成了非常巨大的成本。（參考下方的Q1和Q2） # 那該怎麼辦？ 下次有初學者詢問「什麼是MVC」的時候，怎麼回答才不會害他回家之後「越查資料越混亂」？ [Rails is not MVC](http://andrzejonsoftware.blogspot.tw/2011/09/rails-is-not-mvc.html)的作者提出了三種解決方法： > 第一個方法是聲稱MVC已經從原始意義改變了，Model 2也可以稱為MVC。如此一來，我們可以用「傳統MVC」或「真MVC」來描述原始的MVC。這是現在普遍的作法，但我不認為改變定義是一個好主意。這幾乎是越搞越亂。 > 第二個方法是到處推廣Rails其實是Model 2，MVC就留給…MVC吧。這很困難，但至少能保持定義不變。 > 第三個是直接忽略這些混亂。管它那麼多？ 我個人覺得MVC這個詞已經沒救了，不管怎麼解釋都會帶給別人混亂。 當對方同時學習client-side跟server-side時，混亂更強烈。 我選擇這樣回答： 「MVC有分很多種喔！網路上全部沒寫清楚，你一定看不懂。 沒關係，你只要知道View可以抽出來就好。 C跟M先別管，你先隨便瞎搞吧。」 --- # Q&A ## Q1: 怎麼可能各大server-side framework都搞錯？ 確實有人腦袋清醒得很，它就是Python的Django。 Django的官方文件內根本沒有「Controller」這個名詞。 看看Django官網的常見問題： > Q: Django似乎是一個MVC框架，但你們把Controller命名為「View」，把View命名為「Template」。你們幹嘛不用標準命名啊？ > A: （前略）…如果你真的很想要一個縮寫，你就說Django是一個MTV框架吧。Model、Template、View。這樣分比較有道理些。 Django不想變成搞亂MVC的幫凶，只好委屈地又發明了一個名詞「MTV」。 ## Q2: 那client-side框架有受影響嗎？ 有。client-side框架也必須為MVC巨大誤會浪費一堆時間解釋。 看看Backbone.js官網的常見問答： > Backbone跟「傳統MVC」的關聯何在？ > …我們來比較一下Backbone跟像是Rails這種server-side MVC框架的差別… Backbone實作了「傳統MVC」，卻被迫用「傳統MVC」來描述server-side的Model 2，然後花一堆篇幅解釋。 ## Q3: 知道Model 2的存在又如何？我現在依然一片混亂！ 沒錯，Model 2跟MVC都用到Model、Controller、View三個名詞，所以看起來類似。 但是，我們不應該再把時間花在思考「MVC怎麼如此難懂」。 我們討論的重點，應該是「如何分辨MVC與Model 2」、「在server-side如何實作Model 2才漂亮」、「在client-side實作MVC跟Model 2的優劣分別何在」。 ## Q4: 好，那你現在回答我，「如何分辨MVC與Model 2」？ OK，就讓我拋磚引玉一下。 分別談談Model、View、Controller吧： ### View - Model 2: 不具有行為，只是等別人塞資料進去的模板（template）。 - MVC: 具有監視Model的行為，並以此去改變呈現（presentation）。 兩種View有沒有很像？跟張飛、岳飛一樣像。 看看Backbone.js官網的View範例。你server-side的View哪是長這樣？ ``` var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", events: { "click .icon": "open", "click .button.edit": "openEditDialog", "click .button.delete": "destroy" }, initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { ... } }); ``` ### Controller - Model 2: 接收請求與參數，轉交給Model處理，再把結果（最新的資料）塞進View。 - MVC: 接收請求與參數，轉交給Model處理。沒其他事了。 兩種Controller有沒有很像？跟小狗、熱狗一樣像。 MVC的View跟Model 2的Controller可能還比較像一點。（隨便說說，千萬別這樣類比。） ### Model - Model 2: 接收Controller傳來的參數，回傳結果。 - MVC: 接收Controller傳來的參數，將結果通知View。 Model倒是有些類似。 總之，Model 2跟MVC除了三個部份的名字一樣之外，沒什麼關聯了。 ## Q5: 我決定徹底鑽研MVC跟Model 2的定義了。給我一些延伸閱讀？ http://www.ithome.com.tw/node/77330 http://andrzejonsoftware.blogspot.tw/2011/09/rails-is-not-mvc.html https://docs.djangoproject.com/en/1.7/faq/general/#django-appears-to-be-a-mvc-framework-but-you-call-the-controller-the-view-and-the-view-the-template-how-come-you-don-t-use-the-standard-names http://backbonejs.org/#FAQ-mvc https://r.je/views-are-not-templates.html --- ##一些社群的看法（2015-2-28） 附上幾個社群的連結，裡面有許多很棒的討論。 https://www.facebook.com/groups/javascript.tw/permalink/600136880087654/ https://www.facebook.com/groups/199493136812961/permalink/759391387489797/ https://www.facebook.com/groups/pythontw/permalink/10153760201638438/ https://www.facebook.com/mosky.liu/posts/10203964969186383 http://www.ithome.com.tw/voice/94877
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ## 前情提要 各位知道jquery，這個JS的函式庫提供我們非常多實用的方法，包裝好給我們用。 其中底層邏輯都還是跑不出js原生的概念， 今天就讓我們用原生JS的類來創造一些Jquery幫我們打包好的方法吧！ 來掀開它的奧秘底牌。 ## 程式碼內容 假設我們要創造一個叫做Dquery的東西，該怎麼做呢： ``` class Dquery { constructor(selector) { this.elements = document.querySelectorAll(selector); //噴出DOM來 } css(property, value) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].style[property] = value; } return this; //修改style } addClass(className) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].classList.add(className); } return this; //增加class } removeClass(className) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].classList.remove(className); } return this; } on(eventType, callback) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].addEventListener(eventType, callback); } return this; //監聽事件的運作 } html(htmlString) { if (typeof htmlString === 'undefined') { return this.elements[0].innerHTML; } else { for (let i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = htmlString; } return this; } } } function $(selector) { return new Dquery(selector); } ``` ## 觀念筆記 其實概念就是先把底層邏輯刷過一遍 最後return this 就達成jquery的效果了唷。 ## 心得 Jquery曾經非常流行，儘管後來式微了，卻還是有一批死忠的粉絲鍾愛著它的簡便， 事實上它就是JS，所以討人喜歡也是正常的， 這次學會了用ES6類的概念，會讓我們在前端的功力大幅提升唷！！
看youtube看到的 新的<dialog></dialog>標籤內建開關api 範例： ``` const dialog = document.querySelector("dialog") dialog.show() // 打開dialog(原先位置) dialog.showModal() // 打開dialog(置中且屏蔽背景) dialog.close() // 關閉dialog ``` 幾個重點： 1.不用再用CSS display開關 2.用showModal()自動置中且屏蔽背景 3.modal設定css背景方式： ``` dialog::backdrop { background-color: hsl(250, 100%, 50%, 0.25); } ``` 4.可結合form使用，form提供新的method="dialog"，或是form裡面的button設定formmethod="dialog"來關閉 ``` <dialog> <form method="dialog"> <input type="text" /> <button type="submit">Submit</button><!-- 不會submit--> <button formmethod="dialog" type="submit">Cancel</button><!-- 不會submit--> </form> </dialog> ``` 5.如果想要點擊dialog以外的地方自動關閉可用下列程式碼： ``` dialog.addEventListener("click", e => { const dialogDimensions = dialog.getBoundingClientRect() if ( e.clientX < dialogDimensions.left || e.clientX > dialogDimensions.right || e.clientY < dialogDimensions.top || e.clientY > dialogDimensions.bottom ) { dialog.close() } }) ``` 6.dialog.close()方法可以傳值到Dialog.returnValue ``` Dialog.close(valueToPass) const getValue=Dialog.returnValue ``` 參考資料： [Modals Will Never Be The Same - HTML dialog Element](https://blog.webdevsimplified.com/2023-04/html-dialog/) [影片 The New dialog HTML Element Changes Modals Forever ](https://www.youtube.com/watch?v=ywtkJkxJsdg&t=620s)
初學者接觸OOP，幾乎都會有以下疑惑： 我到底為什麼要學OOP？OOP解決了什麼問題？書上這些範例就算不用OOP也寫得出來吧？ 然後覺得「繼承」、「多型」、「介面」、「抽象類別」等等的名詞很難，覺得OOP很難。 其實這些名詞雖然重要，但對新手來說，本來就很難在一開始就搞懂。 建議先搞懂「資料跟行為在一起」是什麼，以及它的好處在哪，就可以了，其它的慢慢來。 # 什麼叫做「資料跟行為在一起」？ 假設我們在開發一個「中英文互助學習網」，鼓勵中文人士與英語人士登入討論。 這個系統的貼文、留言功能會顯示「發文日期」。 發文日期要根據使用者的註冊身份（台灣人、英語人士）顯示不同格式（台灣格式、西方格式）。 下面就以這個日期格式的功能舉例說明「資料跟行為在一起」是什麼意思。 ## 作法一：直接硬寫（不OOP、資料跟行為混在一起） 初學者通常會用最簡單、也最直覺的作法，直接硬寫出來，像這樣： ``` <?php $postDate = '2016-06-02'; # 假設資料庫取出來的發文日期長這樣 if (/* 判斷是否顯示台灣格式 */) { # 轉換成這樣 2016.6.2 $arr = explode('-', $postDate); $year = $arr[0]; $month = $arr[1]; $day = $arr[2]; echo "$year.$month.$day"; } else { // 西方格式 # 轉換成這樣 6/2/2016 $arr = explode('-', $postDate); $year = $arr[0]; $month = $arr[1]; $day = $arr[2]; echo "$month/$day/$year"; } ``` 這種寫法的資料（日期）跟行為（轉換成各種格式）混在一起。 它的優點是寫起來很簡單，缺點則有兩個： * 日期格式的邏輯會重複出現在很多地方，整段code會到處重複出現 * 整段code大概會塞在 `div` 或是 `span` 的裡面，導致它跟HTML混在一起，很亂 ## 作法二：自訂函數（不OOP、資料跟行為沒混在一起） 為了解決作法一遇到的問題，聰明的初學者很快就想到可以用「自訂函數」！就像這樣： ``` <?php function localFormat($date) { $arr = explode('-', $date); $year = $arr[0]; $month = $arr[1]; $day = $arr[2]; return "$year.$month.$day"; } function englishFormat($date) { $arr = explode('-', $date); $year = $arr[0]; $month = $arr[1]; $day = $arr[2]; return "$month/$day/$year"; } $postDate = '2016-06-02'; # 假設資料庫取出來的發文日期長這樣 if (/* 判斷是否為台灣人身份 */) { echo localFormat($postDate); } else { // 英語人士身份 echo englishFormat($postDate); } ``` 這種寫法將行為（轉換成各種格式）用自訂函數給獨立出來，也大幅改善了作法一遇到的問題。 對小型的網頁程式來說，這招非常好用，不但開發快速、簡單，還漂亮地將資料跟行為拆開。 但是程式規模變大之後，為了將各種行為拆出來，會寫出很多自訂函數，類似這樣： ``` ?php function localFormat($param) { // blah blah ... } function englishFormat($param) { // blah blah ... } function someTask($param) { // blah blah ... } function anotherTask($param) { // blah blah ... } function otherTask($param) { // blah blah ... } //... ``` 於是又衍生出三個問題： 1. 像localFormat、englishFormat這樣的函數名稱意義模糊，看不出是處理日期、人名，還是什麼東西的格式 2. 這些自訂函數各有不同的行為，全部放在一起顯得很亂，應該要想辦法分類、整理這些函數 3. 像localFormat、englishFormat這樣的函數，只吃特定格式的參數，最好能跟某種資料的形式綁在一起，以後要改程式時，能讓相關的資料跟行為一起被看到 問題1很好解決，只要替函數名稱加前綴字變成dateLocalFormat、dateEnglishFormat就行了。 問題2也很好解決，只要多開幾個檔案，把相關的函數放進同一個檔案就行了。 問題3就很棘手，資料跟行為拆開之後，如何在概念上又找方法整理在一起？ ## 作法三：使用class（OOP、資料跟行為在一起） 正是這些處理資料、整理行為的問題，導致了OOP的誕生： ``` <?php class Date { public $year; public $month; public $day; public function __construct($date) { $arr = explode('-', $date); $this->year = $arr[0]; $this->month = $arr[1]; $this->day = $arr[2]; } public function localFormat() { return $this->year . '.' .$this->month . '.' . $this->day; } public function englishFormat() { return $this->month . '/' .$this->day . '/' . $this->year; } } $postDate = '2016-06-02'; # 假設資料庫取出來的發文日期長這樣 $date = new Date($postDate); if (/* 判斷是否為台灣人身份 */) { echo $date->localFormat(); } else { // 英語人士身份 echo $date->englishFormat(); } ``` OOP的寫法，一次解決了前述三個問題： 問題1 => 現在從類別名稱就可以知道底下方法的意義了 問題2 => 現在相關的函數都整理進同一個類別底下成為方法了 問題3 => 現在資料的形式都統一在constructor處理一次，之後不管新增多少方法都不用處理資料了 這就是所謂的「資料跟行為在一起」，也正是OOP的核心概念。 利用這種方式整理程式碼、寫出一個又一個的類別，可以大幅提昇程式碼的品質。 # 結論 上述的作法一跟作法二並沒那麼糟糕，但確實會帶來一些問題。 對於小型的網頁程式來說，可能還算夠用。 但是隨著程式規模變大，如果將概念上相關的資料跟行為整理在一起，會很有幫助。 實務上也可以先從作法二開始寫起，直到發現某些資料跟行為關係密切，再拉出來整理成類別即可。 至於很多OOP教學會提到的「繼承」、「多型」、「介面」、「抽象類別」等等名詞，一時搞不懂沒有關係，你可能實務上也暫時用不到。之後找時間慢慢搞懂它們的用途就好。 光是知道「將資料跟行為放在一起」的技巧，就能夠開始寫OOP程式碼了。 （註：本篇文章的程式碼純屬教學用途。實務上PHP已經有DateTime類別可以使用，或是用更漂亮的Carbon類別。） ## Q&A Q1：我常常設計一些類別，只有資料沒有行為，聽起來OK嗎? 不OK，這很不OOP，而且沒意義。 乾脆直接用關聯式陣列去表示那些資料就好。 Q2：我常常設計一些類別，只有行為沒有資料，聽起來OK嗎? 這個要看情況，不一定。 但唯一可以確定的是，這種作法很不OOP。 因為OOP的核心是「資料跟行為在一起」。 這也是為什麼你會看到有人明明寫了類別、用了物件，別人卻說「這不夠OOP」。 然後你又會看到像JavaScript這樣連「類別」關鍵字都沒有（ES5以前），卻能夠寫出很OOP程式碼的關係。 判定的標準都是一樣的，而且也就只有這麼一個標準：資料跟行為有沒有在一起。 Q3：一個類別包含的概念是越大越好，還是越小越好？ 不一定。不過我們從作法一到作法三的過程，有一個明確目的：希望讓程式碼更好懂。 如果聲稱一個類別包含的概念很大（例：設計LanguageHelpWebsite類別，用來代表「中英文互助學習網」需要的所有功能），那會把幾乎整個網站的所有行為跟資料都放進去，成為所謂的God object。它可沒有讓程式碼更好懂。 相反地，如果聲稱一個類別包含的概念很小（例：分別設計LocalDate、EnglishDate類別），雖然意義可能更精準了，但用一整個Date類別的概念去思考，程式碼會更容易理解，也就是所謂的內聚性（Cohesion）更高。 所以要替OOP就是「資料跟行為在一起」加個但書： 要以方便理解程式為前提，將資料和行為放在一起。
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
