Introduce
Share a single global instance throughout our application
Ensure a class only has one instance, and provide a global point of access to it.
Singletons 是被實例化一次的類別，這個類別(single instance)能訪問整個 application
OOP 分為兩種類型:
基於「類別」(Class-based) 的物件導向 Ex: Java
- Demo Code @ Code Sandbox 適合使用的時機 多個元件需要相依在一起才能使用時 CSS 彼此之間有父層和子層的相依關係 都需要在某個 Provider 內才能作用 實作 舉例來說，一個 FlyOut 中會包含 List、Item、Toggle 這三個元件，但 List、Item、Toggle 都需要 Flyout 提供的狀態（相依於 Flyout 的狀態），這時候如果我們使用 Compound Component Pattern，就可以讓開發者只需要 import FlyOut 這個元件：
趙子榮 changed 3 years agoView mode - What's New Concurrent rendering Server rendering APIs Automatic batching useId Dropping Support for Internet Explorer Install npm install react@rc react-dom@rc趙子榮 changed 3 years agoView mode
- 上機考 Link 考 JS 語言特性 Format 資料能力 React 觀念 What will the code below output to the console? console.log(foo); // undefined趙子榮 changed 3 years agoView mode
- HackerRank 前測 1. Number of characters escaped 簡單來說，輸入一組字串，長度是 1 ~ 10^5，且++只由小寫字母、符號 !、符號 # 組成++，裡面有跳脫字元(escaped character)，但此跳脫字元有特定規則: ! + 英文字母，例如: !a、!f ..等。而且跳脫字元要被兩個 # 符號包住才算！ 請問此字串出現幾個跳脫字元？ input 字串一定有 "#" 且，有開始"#"，就一定有結尾"#"，他們是雙雙成對的(open & close) "#" 不會有 nest 情況出現 若跳脫字元是以下這種情況也無法列入計算，因為 start #1 與 end #1 中間無值，start #2 與 end #2 是 po，!r則不在任何 "#" 內趙子榮 changed 4 years agoView mode
- 去萬寶華填資料，跟人資聊天，聊技術與經驗還有預期薪水，之後給你一台Window電腦加滑鼠，Code打在Word裡面，沒有網路可以查，考時限時1.5hr Please try answer the following questions as detailed as possible. You are given 90minutes to finish the test. Q1: Please implement below mutiply functiion to make it work. Output multiply(2)(5); // 10 完成下面程式趙子榮 changed 4 years agoView mode
- Document link - Event-Names :::success compoenent 與 props 命名種類 camel case -> basicComponent pascal case -> BasicComponent kebab case -> basic-component snake case -> basic_component :::趙子榮 changed 4 years agoView mode
- :::warning 版本要注意 In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots. It replaces the slot and slot-scope attributes, which are now deprecated, but have not been removed and are still documented here. The rationale for introducing the new syntax is described in this RFC. ::: Slot Content Slot：透過父層就可以決定子代Component的內容 沒放Slot:趙子榮 changed 4 years agoView mode
- Transitioning Single Elements/Components CSS Transitions 以下四個情況會觸發動畫效果 Conditional rendering (using v-if) Conditional display (using v-show) Dynamic components Component root nodes 6個狀態: 進場開始 - 正在進場 - 進場到哪 - 退場開始 - 正在退場 - 退場到哪趙子榮 changed 4 years agoView mode
- Mixins <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Day 14</title> </head> <body>趙子榮 changed 4 years agoView mode
- Plugin (12:18) Plugin 通常是增加個全域新功能在Vue身上，它沒有嚴格的範疇，以下是範例： Add some global methods or properties. e.g. vue-custom-element Add one or more global assets: directives/filters/transitions etc. e.g. vue-touch Add some component options by global mixin. e.g. vue-router(增加一些component功能 Ex:vue-router/router-link/router-view/beforeRouterEnter) Add some Vue instance methods by attaching them to Vue.prototype.(作在實體上的功能) A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. vue-router(可以在Vue塞一些功能，Ex: vue-router 的 go() / replace() / push()) vue-touch 套件增加touch事件，可以幫手機觸控做事件偵聽趙子榮 changed 4 years agoView mode
- Getting Started (16:00) HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Day 16</title> </head>趙子榮 changed 4 years agoView mode
- Nested Routes 通常指路由內的Content還有路由 /user/foo/profile /user/foo/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ |趙子榮 changed 4 years agoView mode
- Named Routes 有時候幫路由命名比較方便，我們可以多給一個 name 屬性，注意 name 名稱不要重複 通常name取名比path短，而且 /user/123 的 123 想用程式操控就會使用物件，這樣就不用做字串組合這麼麻煩 <body> <div id="app"> <p> <router-link to="/">home</router-link> <router-link to="/page1">page1</router-link>趙子榮 changed 4 years agoView mode
- Passing Props to Route Components (13:00) <body> <div id="app"> <p> <router-link></router-link> </p> </div> </body> <script> const Index = {趙子榮 changed 4 years agoView mode
- 5:30 Demo 範例 Ex: 發文的圖片群組中，點圖片，圖片放大變成LightBox，切換圖片時，網址會變 24:28 user flow 的幾種可能 注：Ｘ 代表不開 lightbox，V 代表開啟 light box user -> Home -- X --> Pic -- X --> Pic 26:32 => user -> PicList(FB文章) -- V(點擊圖片) --> Pic -- V(lightbox仍開著) --> Pic 27:23 => user -> Pic -- X --> Pic -- X --> Pic趙子榮 changed 4 years agoView mode
- Cofounder 來面試 問題： React 比原生JS多得好處: 資料驅動畫面 Vitaul Dom => 優化效能 =>大專案渲染時，不用一次渲染所有DOM ::: React build a virtual dom(and event system) Optimized for performance and memory footprint趙子榮 changed 4 years agoView mode
