針對第三方套件使用的合宜性來進行審視,並透過 async component 與 webpack 代碼分割功能來實現 Lazy Loading Routes 機制,讓打包後產出的 bundle 檔案能依照各頁面需求載入所需的代碼。
[Vue] 跟著 Vue 闖蕩前端世界 - 14 使用 C# 同步多國語系註解
筆者在套用語系時,習慣將該 key 值對應的中文語系文字當作註解一併插入,但語系文字會經常被調來調去,此時註解在畫面的文字就會有不同步的情況;本文透過 C# 實作一個同步語系文字的工具,讓「語系檔」與「語系套用註解」永遠保持一致的狀態。
[Vue] 跟著 Vue 闖蕩前端世界 - 13 使用 keep-alive 保留表單狀態
在填寫多步驟式的表單資料時,若需要在回上一步後顯示先前填寫過的資料,可以使用 keep-alive 標籤包裹,讓指定的步驟組件狀態被快取,輕鬆完成這類需求。
[Vue] 跟著 Vue 闖蕩前端世界 - 12 使用 vee-validate 進行多語系表單資料驗證
表單驗證是每個網站必備的工作項目,本文使用 vee-validate 實作表單驗證,並搭配 vue-i18n 語系檔來打造友善的多語系錯誤提示環境。
[Vue] 跟著 Vue 闖蕩前端世界 - 11 使用 vue-i18n 打造多國語系網站環境
要讓網站也可以提供給外籍人士使用,不可免俗的需要多國語系的支援,因此本文透過 vue-i18n 來打造一個多國語系網站,並介紹基本的使用情境及用法。
[Vue] 跟著 Vue 闖蕩前端世界 - 10 利用 Mixins 重複使用組件的方法
當多數組件中有共同方法及物件是會被經常使用到的時候,絕對會希望抽出成獨立的方法讓所有組件重複使用,因此 Vue 提供幾個不同的方式來發便開發人員建立複用的機制,可以依照需求特性選擇作法。
[React] 使用 Error Boundary 作為子組件渲染異常的破壞邊界
在 React 16 版本後新增錯誤邊界 (Error Boundary) 的概念,新加入 componentDidCatch 組件生命週期方法來捕捉「子組件」錯誤,當邊界內層子組件發生不預期錯誤時,不會影響到邊界外層父組件;當然也會有一些限制存在,本篇文章來針對 Error Boundary 進行說明。
[React] 在 React Router 4 中建立具有權限檢核的 Private Route 組件
在開發具有登入功能的網站時,各功能頁面將所屬不同權限用戶使用,因此進入頁面前都需進行權限檢核;這篇文章將在 React Router 4 版本中實作一個符合基本需求的 PrivateRoute 組件,讓用戶在切換路由時進行權限的檢核,達到頁面功能權限控管的需求。
[Tips] 以圖片作為郵件讀取紀錄的發送管道
透過電子郵件中的圖片作為電子郵件讀取紀錄的發送管道。
[NLog] 自訂 Event Context Layout 將額外錯誤資訊寫入 DB 獨立欄位
在透過 NLog 記錄 Exception 錯誤至 DB 時,當有其他「額外」資訊需要一併紀錄到「獨立」欄位時,可以利用自訂 Event Context Layout 來自行決定需輸出的欄位資訊,讓錯誤訊息清楚地呈現在每一筆 Log 資料的特定欄位中,對於錯誤釐清與各項資訊交叉比對都較為方便。
[SQL] 使用 CTE 拆解逗號相隔的字串為資料列
在處理 DB 資料時常會遇到以逗號分隔的字串資料,例如功能關鍵字就可能以特殊符號相隔存入資料庫,而當需要針對各關鍵字進行統計時,就需要將文字拆解出來為一筆筆的資料;本文藉由一個實際情境來說明如何透過 CTE 遞迴達到拆解字串的目的。
[JS] 使用 JavaScript Standard Style 來規範前端代碼樣式
- 2967
- 0
- JavaScript
- 2017-10-21
本文介紹使用 JavaScript Standard Style 來維持語法樣式的一致性,使用上不需要額外的設定檔,以最簡單的方式來強迫統一樣式,讓我們把時間花在那些真正該解決的問題上吧。
[C#] 排除 TransactionScope 中使用 await 所產生的跨執行續交易錯誤
在 TransactionScope 中使用 await 會發生 「TransactionScope 必須在當初建立所在的執行緒上進行配置」錯誤訊息,本文以此錯誤來檢視 async / await 機制與流程,並且透過設定來排除 Task 或 async/await 這類非同步作業所產生的跨執行續交易問題。
[Git] 基本 Git 常見情境操作說明
此篇文章將就一名新進工程師的日常,試圖將 Git 常見的操作情境依序串接起來,期望可以在情境中直覺地學習使用 clone, commit, push, pull, rebase, stash, branch, merge 等指令功能,協助讀者掌握 Git 基本的版控操作技巧。
[JS] 看懂 React 開發中常用的 ES6+ 語法
- 4324
- 0
- JavaScript
- 2017-10-21
筆者近期因專案需求而開始使用 React 作為前端開發框架,說真的剛接觸 ES6+ 語法時,面對完全無法腦補出的程式語意,猛然發現 JavaScript 世界真的已經變了 (其實是自己腳步慢了),因此本篇稍微整理了一些比較常用的功能,希望能幫助讀者對這些語法有一定的熟悉度,這樣在學習任何前端框架時才不會陌生感太重。
[JS] 理解 Promise 狀態及使用方式
- 12431
- 0
- JavaScript
- 2017-10-21
在做中學的過程中,遇到 Promise 物件總是 then 來 then 去,雖然大致了解作法及應用方式,但是一直沒有時間停下腳步仔細看看,內心覺得有點不踏實;因此最近花了一點時間看看文章,寫了一下筆記希望能幫助到需要的人。
[效能調教] 善用快取提高效能 - 建立 MemoryCache 共用模組
快取機制主要就是用「記憶體空間」來換取「資料查詢時間」,並且潛藏著資料時效性問題,因此開發人員需在天秤兩端讓「效能」及「資料即時性」達到完美的平衡,才可以將快取效果發揮到極致;本文先針對快取共用模組進行設計,後續會在此基礎上實踐不同情境下快取的使用方式。
[SQL] 並未為 RPC 設定伺服器 'LinkedServer'
有呼叫連結伺服器 Stored Procedure 需求時
請記得開啟 RPC (Remote Procedure Call) 功能
避免「並未為 RPC 設定伺服器」錯誤產生
[Troubleshoot] 在 IE 中無法於 input box 中輸入文字
- 742
- 0
- Troubleshoot
- 2017-07-27
在 IE 中使用 iframe 有可能發生無法輸入文字的情況
可考慮在使用後清除並移除 iframe 來避免此問題的發生
[效能調教] 避免使用 CTE 串接大量資料
使用 CTE 的出發點應是增加 TSQL 可讀性,但是在濫用的情況下對於效能的衝擊是相當大,因此請在發生 DB 效能問題的時候,不仿也考慮一下 CTE 是否為效能瓶頸的重要關鍵。