zhiwei. huang

zhiwei. huang

如何在 pug 上實作 vue slot 的功能

slot 是 Vue 非常使用的功能,常常在做一些模組化的開發時都會去使用到,最近在使用 pug 開發一些靜態的頁面時,查看 pug 的官方文件,卻沒有相關的資訊 比較相近的應用就只有 block 與 extend 的語法 但是在使用上卻又一些落差,花了一點時間,尋找答案,發現是可以在 pug 上實作 slot 的

Web AR 入門: AR.js Tracking.js Three.js A-frame.js

WebAR 可拆分兩個部分相機與圖片識別和3D模型 其實不名思義就是使用相機取得現實中的畫面作為背景,在藉由相當的 圖片辨識 的技術,在特定的座標位置,渲染出對應的 3D 模型,使使用者感受到與現實做連結,也就是 增强現實 (簡稱為 AR) 根據上面的敘述,我們可獨立分成兩個部分進行說明,這也是我個人在學習 Web AR 時,所得知的結論與紀錄 最廣受人知的 AR 範例:PokeMon GO WebAR 取得攝像鏡頭畫面 圖片識別 3D 圖形繪製與操作 相機與圖片識別

[JavaScript] 抽象語法樹 Abstract syntax tree :打包工具 與 代碼編譯 的核心原理

在前端開發中,我們往往會使用一些前端的開發工具來提升我們開發的效率和速度 比較常見的工具包含: Webpack (代碼打包工具) ESLint (Conding Style 管理工具) Babel (ES6 代碼的編譯工具) … 不過上面舉例的項目基本上都跟我們在編譯時,撰寫的代碼比較又直接關係 這是如何做到的? 這是一個還蠻有趣的問題,讓我們繼續往下看 拿 Babel 來舉例,他是如何直接將 : // ES6 的箭頭函式 const myfn() => { return 'hello world' } // 轉譯為 ES5 var

[JavaScript] 檢查 DOM 載入狀態 Document.readyState

有點經驗的前端工程師都知道需要使用 window.onload 、 addEventListener('load') 或是 jQuery 的 $(document).ready() 來確定 DOM 載入完成, 用來確保 JavaScript 不會因為找不到 DOM , 而導致程式無法運行 不過只是單單使用上面的監聽方式是不夠的,這邊分享一下實際踩雷的經驗 當今天有使用者使用你開發的套件的時候,他不一定會在一開始就會載入你開發的套件 用下面的代碼來解釋: game.js const run = () => { const startGame = document.createTextNode('活動開始嘍~