Yang Yang

在設計元件的時候，有時候因應專案的需求要不斷的增加新功能，隨著功能的增加，該如何一邊增加功能一邊增強元件的維護性呢？一起來看看吧！ 設計元件一開始開發專案的時候，我們可能會先設計一個元件： 123456789const Button = ({ children, onClick, disabled }) => { return ( <button className="btn" onClick={onClick} disabled={disabled} >{children}</button> );} 但是後來又其他需求，所以又要多加一些新的功能在同個元件上： 123456789101112131415161718const handleWarning = (onWarning, onClick, type, target) =&g ...

React官方最近提倡大家使用Functional programming來設計React，其中也有提到為什麼要用React hooks的原因以前大家常犯的錯誤有哪些，以下就來針對這些情境來探討。 React的side effect介紹談到React的side effect，最具有代表性的就是： componentDidUpdate useEffect 介紹最近剛入手React的人可能對useEffect比較熟悉，而已經使用一段時間的人，大概都認識componentDidUpdate（而且也被它折騰了好一陣子了）此外，React官方目前統稱在React中effect都稱為side effect，所以當我們在使用side effect這個名詞時，需要稱為定位一下他的意思。 兩者差異最大的差異就是在React 16.8版本之後，React hooks系列才正式使用，也是React開始提倡全面使用functional component的開始。componentDidUpdate則是以前class based component的產物。 componentDidUpdate當Virt ...

相信有在開發程式的，不管是前端還是後端都有看過函式串燒這種東西，這次就來認識他吧！ 你看過這些東西嗎？ 前端也許你看過這個 123const score = catList .map(cat => cat === isCute) .reduce((cuteSum, cuteScore) => cuteSum + cuteScore, 0); 後端也許你會看過這個 123String[] nameCard = new String[2];nameCard[0] = employee.getName().substring(employee.getName().indexOf(" ") + 1);nameCard[1] = employee.getName().substring(0, employee.getName().indexOf(" ")); 你可能會覺得很神奇，到底是怎麼辦到的？其實原理比你想像中的簡單 設計計算機現在來用簡單的計算機來介紹，一開始我們會設計這樣的功能 123456789101112var ...

儘管nodejs簡單易學的特性，也讓很多人發現到一些值得優化的地方需要改善，例如：容易寫出攏長的程式。為了提升開發者體驗，expressjs就此誕生了，他作為一個middleware，簡化了一些攏於的設定，讓開發者不必再做一些重複的動作，只有在非必要的時候，才需要額外傳遞參數設定。那麼以下就來介紹使用方式吧！ 為什麼要用Expressjs你可能會問，同樣都是在開發Nodejs，但是為什麼要用它？Express字面上有便捷快速的意思，他是一個提升開發效率的一個middleware，開發者不再需要去記那些多又雜亂的名稱，即可順利開發。如果你有看過上一篇文章的話，相信你已經被Nodejs摧殘過後，更了解需要尋求改善開發效率的重要性了！ 使用npm安裝 首先你需要初始化npm我們很常會用到第三方library時，使用到npm 1npm init 安裝相關套件 1npm install express --save 使用Express 載入express通常我們會用app去接express，這樣app裡面就包含各種實用的功能可以使用。當然，也少不了listen去監聽port。 12345 ...

nodejs在前幾年是一個非常熱門的框架，因為他使用上非常容易上手，而在短時間之內爆紅。最常見的就是在小團體或是新創團隊，希望在短時間之內建立簡易的後端小程式，而nodejs就會是相對合適的選擇。以下就來看nodejs的使用方式吧。 簡單架構設定讓我們來看看純用Nodejs如何寫一個後端 載入http 1const http = require('http'); 使用createServer產生服務使用方式就是從http裡面使用方法，而裡面需要放的是requestListener，如果參考文件的話，可以發現這個requestListener有兩個參數分別叫做req, res，可以用來判斷使用者發送的請求是什麼類型，還有回傳的資料是什麼。以這個例子，會用一個server接住產生的服務。 1const server = http.createServer((req, res) => {...}); 設定port接著使用剛剛宣告過的server去設定需要監聽的port。意思是當你啟動這個服務的時候，你可以在指定的port連結和這個服務互動。 ...

當我們設計Component一段時間之後，Component會隨著時間不斷的壯大，到最後就會面臨效能的議題，如果使用者在使用部分Component的時候，需要花過多的時間載入，一定會影響到使用者對產品的喜好程度。因此以下討論優化Component的思路。 React.memo在學習useMemo與useCallback之前，讓我們先來認識什麼是React.memo。官方的介紹為：React.memo 是一個 higher order component。如果你的 function component 每次得到相同 prop 的時候都會 render 相同結果，你可以將其包在 React.memo 之中，透過快取 render 結果來在某些情況下加速。這表示 React 會跳過 render 這個 component，並直接重用上次的 render 結果。 簡單來說，你可以把React.memo想像成是一個cache，只有偵測到props改變才會render。 如果你在child Component寫一個log測試render的次數，你可能會發現光是一個click事件就render了好幾 ...

以下將會以前端開發作為例子，讓大家更了解耦合與內聚的概念是什麼。 耦合（Coupling）簡單來說就是相依性，如果討論的對象，彼此的相依性越強烈，那麼我們就可以說彼此的耦合性越大。 代表人物如果要拿來擬人的話，最具代表性的人，大概就是國文課本的賣油翁了。大家最熟悉的課文：康肅問曰：「汝亦知射乎？吾射不亦精乎？」翁曰：「無他，但手熟爾。」康肅忿然曰：「爾安敢輕吾射！」翁曰：「以我酌油知之。」乃取一葫蘆置於地，以錢覆其口，徐以杓酌油瀝之，自錢孔入而錢不濕。因曰：「我亦無他，惟手熟爾。」 賣油翁雖然其他的事並不會，但是他只負責賣油這個任務，而且很專精。 共用元件耦合性可以讓同樣頁面擁有的Component, function…，重複被使用，因為我們在開發程式的時候，一定會時常遇到類似的情境需要用到類似的功能，因此會把這些東西便成為共用元件。例如以下的例子： config.js12345export const categories = [ {label: '全部', value: 0}, {label: '未滿一年&# ...

組合和繼承的概念時常讓大家混淆，都是獲得一樣的功能，為什麼又要分成兩種呢？這次將要帶大家用前端框架來看常見的組合與繼承。 先來看React官方的說法React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. 設計樣式的組合與繼承雖然討論到設計樣式就會想到OOP，可是我們可以從OOP上的心得，將部分的精髓應用在前端上。下面先來分別討論組合與繼承。 組合(Composite Design)其實當你在組合V-DOM的Component的同時，你可能就已經使用過組合了，以下來看例子。假設今天設計了一張GiftCard如下： 12345678910const GiftCard = () => { return ( <div className="card-warp card-warp-primary"> <h2 classN ...

當我們在使用一套框架或是架構的時候，多少都會好奇為什麼當初要這樣設計？以下將帶大家以React的視角，從MVC討論到MVVM。 關於React首先必須要知道的是，React嚴格上來說，並非是一個完整的Framework，只能稱得上是Library。像是Vue, React這種前端框架，就是種Library，和Angular提供的Solution不太一樣，主要原因是因為他們並沒有提供完整的解決方案來設計網頁，很多功能還是需要相依外部很多套件才能設計出玩網頁。 MVC架構 Model 資料型態與處理 View 畫面呈現 Controller 主要處理Model與View之間的邏輯 讓我們先撇開前端框架討論何謂MVC，如果要比照程式的話，大概就是： Model: Data View: HTML Controller: JavaScript 簡單來說就是，使用者瀏覽View來使用Controller更新Model。這在早期的網頁架構其實很夠用了，從網頁操作到更新資料，最後再回去View更新顯示的資料。流程看起來很合理也很正常，但是隨著網頁發展不斷的進步，大家開始發現一些問題 ...

報名原因其實關注網頁切版直播班也有一段時間了，從開始正式開班的第一屆就有開始在關注，發現學生和助教的發文頻率比以往開設影片教學多很多，報名也能拿到很多份多頁式RWD設計稿，我和同學認為進去應該會蠻充實的，因此最近和同學一起報名了六角學院開的切版直播班。雖然我們都已經是前端工程師了，也能具有在時限內完成需求的能力，但是我們希望能夠更專精切版的部分，因此報名切版直播班每週督促自己學習。 為什麼要選擇直播班現在很流行影片教學，而教學主要分直播和紀錄片，紀錄片對我來說就像是字典，我如果遇到問題，我會從我已經買的課程去看別人的思路與解法，因此我買的紀錄片並不會全部100%標示看完。而直播班是一種有目標的routine，大家有明確的目標做一件事情，並且還能從中得到回饋與建議，這是紀錄片不太容易得到的資源。 為什麼選六角學院我會報名六角學院開設的直播班也是因為我蠻認同他們的一些理念，尤其是共學與互助。有很多人因為問題過於簡單就不敢發問，擔心可能會在網路社群上給大家看笑話，但其實不問才是不好的，不管是簡單的或是難的問題，問題終究是問題。六角學院營造出的氛圍就是鼓勵大家多發問，問題總是要解決的，放著只 ...