發表文章

目前顯示的是有「JavaScript」標籤的文章

[javascript] 雙問號運算子 nullish coalescing operator

圖片
?? (nullish coalescing operator) 用法 // pseudocode,大概示意,非完整 code const items = ["abc", "", 123, 0, true, false, null, undefined]; {items.map(item => { return ( {`${item} ?? '找不到 item'`} ); })} 結果圖 情境 有一個 data 回傳值如下,且 true、false 在程式內都可能用到 data: { isTeacher: false } 如果預設值為 false,那使用 || 或是 ?? 都是沒有問題 data.isTeacher || false //output: false data.isTeacher ?? false //output: false 但如果預設值為 true,那這時候使用 ?? 才會正確,或是用 || 並配合額外處理的 code data.isTeacher || true //output: true data.isTeacher ?? true //output: false || (or operator) 用法 // pseudocode,大概示意,非完整 code const items = ["abc", "", 123, 0, true, false, null, undefined]; {items.map(item => { return ( {`${item} || '找不到 item'`} ); })} 結果圖 情境 || 就大部分情況都在使用,像回傳值為 undefined,就直接使用「 data.count || 0 」,就能得到 0 此預設值。 ...

[React] SPA,前後端分離,到底該如何動態修改 meta tag ?

概述 How to update meta-tag in react? 這問題想必前端工程師都有碰過,但這邊先告訴大家,想透過「純前端」修改... 「不可能」...!! 為什麼? Google 搜尋引擎在爬文的時候,透過 javascript 產出來的標籤是無法爬到。 像現在有使用 react、vue、angular 等等這類的框架,這種 SPA、前後端分離的程式架構,都是透過 javascript render 出來的網頁,因此 SEO 肯定受限十足。 又有人可能會說,Google 搜尋引擎已經可以爬 javascript 產生的 tag,確實現在框架的盛行,Google 勢必還是得對這做處理,畢竟他們的網站也是有使用框架來進行。 問題 那 Google 都能爬 javascript 產生的 tag 現在還會有什麼問題呢? 「動態產生 meta tag」 這部分並非透過前端就能「完美」達到。 怎麼說? 透過動態產生出來的,那網址剪下貼至 FB、Line 等等之類的,都會無法顯示那些 tag,那 SEO 上勢必還是打折了。 解決 相信很多人一定都有找了很多解法,以下就列出幾個解法供參考 (X) 1. react-helmet (X) 2. react-helmet-async (X) 3. react-super-seo (O) 4. next.js (O) 5. remix (O) 6. environment variable (env) 從以上可以看出 javascript 前端方式處理得仍無法解決,必定要透過 SSR 的方式,或是環境變數來處理。

[React] 動態修改 meta-tag 解決 SEO,透過 env(environment variable)

圖片
概述 update meta-tag in react 正確的動態解決 meta-tag 方式,透過 env。 沒有裝 next.js 的專案可以用這招。 嘗試過 react-helmet 無效者也請用這招。 流程 1. get data in node.js -> 2. set env to index.html -> 3. build and test -> 4. success! 1. get data in node.js 純前端者,不要看到後端就跑,這邊只是寫一點點,沒很多 建立 script.js // const fs = require('fs'); // const pathConfig = './config.json'; // const config = JSON.parse(fs.readFileSync(pathConfig)); // const title = config.title; // const description = config.description; const execSync = require('child_process').execSync; const title = 'EJ的網站標題'; const description = 'EJ的網站描述'; const favicon = 'https://firebasestorage.googleapis.com/v0/b/deploy-for-chien313jay-test.appspot.com/o/images%2Ffavicon.ico?alt=media&token=d019d820-16a3-45fd-b5e5-15b8aa355ea8'; execSync(`VITE_APP_TITLE="${title}" VITE_APP_DESCRIPTION="${description}" VITE_APP_FAVICON="${favicon}" CI=false npm run dev`); 這樣就把 env 寫至你的 ...

[React] react 使用 Google Analytics - 追蹤 button、select

圖片
react 使用 Google Analytics (以下簡稱GA), 你也可以不使用套件,直接使用GA上提供的「全域網站代碼(gtag.js)」 1.安裝 GA 套件 2.初始化 GA 3.將 url 加入 GA 4.將 button 加入 GA 5.將 select 加入 GA 6.將其寫成 component 置於 src/index.js 1.安裝 GA 套件 npm i react-ga4 2.初始化 GA import ReactGA from 'react-ga4' ReactGA.initialize('G-XXXXXXXXXX') //你的GA評估ID 3.將 url 加入 GA ReactGA.send('https://www.xxx.xxx') //你要偵測的URL 理論上加完,並執行該網頁,就會在GA平台上看到如下的狀況 4.將 button 加入 GA const gaEventTrack = () => { // body 外無 hasAttribute 方法,避免錯誤 const body = document.querySelector('body'); body.addEventListener('click', (e) => { let target = e.target; // 查找元素不包含 data-ga-action,且到 BODY 後跳出 while(target.hasAttribute('data-ga-action') === false && target.tagName !== 'BODY'){ // 父元素覆寫當下元素 target = target.parentNode; } if(target.hasAttribute('data-ga-action')){ const dataGaCategory = target.getAttrib...

[JavaScript] 閉包(closure)簡單例子

是說,對閉包還是不解,所以直接把簡單的例子紀錄下來... 重點是記憶延續,從例子可以看到 count 不會因重新呼叫而被重新宣告 const counter = () => { let count = 0; return () => { return count++; } }; const count1 = counter(); console.log(count1() // 0 console.log(count1() // 1 console.log(count1() // 2

[JavaScript] 判斷物件內是否有該屬性 hasOwnProperty() & 其他方法(更便利!)

(前情提要) 乾,在公司被唸說看不懂 ? 這寫法,我反問對方這要怎麼查,他說他不知道,且說不重要... 唉.. 最後我另外花時間找,並記錄下來好了... (正式來) 有時 API 傳回來的資料,連那個 key 都沒有,render 就會出問題,那這時就得判斷該物件內是否存在該屬性,這就衍生出以下三種方法 一、hasOwnProperty() 二、? (???.... 是在問號三小... 你沒看錯.. 就是?...) 三、?? 結論 (這問號想逼使誰... 一、hasOwnProperty() 此方法即可判斷物件有無屬性存在,下方程式碼即在判斷 objA, objB 是否有 'chi' 這個 key const objA = {}; const objB = { chi: 'chiValue' }; // 無印出 if (objA.hasOwnProperty('chi')){ console.log('objA.hawOwnProperty(chi): ', objA.hasOwnProperty('chi')); } // 印出 objB.hawOwnProperty(chi): true if (objB.hasOwnProperty('chi')) { console.log('objB.hawOwnProperty(chi): ', objB.hasOwnProperty('chi')); } 二、? 此為 es2020 之方法,跟 '一、' 可以達到一樣效果,但更方便 const objA = {}; const objB = { chi: 'chiValue' }; // 印出 objA?.chi: undefined console.log( 'objA?.chi: ', objA?.chi ); // 印出 objB?....

[JavaScript] fetch、ajax、axios 基本用法(前後端溝通、串接API)

圖片
記錄一下.. 面試或工作、 前後端溝通 上 (一般 HTML 或 React、Node.js) 都常用到.. 我個人是比較喜歡用 axios ~ 股票 API (JSON 格式): https://www.twse.com.tw/exchangeReport/STOCK_DAY?response=json&date=20210702&stockNo=2330 會看到這樣的資料 (json) 如果以上不能用,可以使用這位大哥的 API (text 格式):https://script.google.com/macros/s/AKfycbw5PnzwybI_VoZaHz65TpA5DYuLkxIF-HUGjJ6jRTOje0E6bVo/exec?name=${name}&age=${age} 會看到這樣的資料 (text) 程式撈取結果大概會長這樣 fetch: 1. promise based (可改為 async/await) 2. HTML5 API let btn = document.querySelector('.btn'); btn.addEventListener('click', () => { fetch('https://www.twse.com.tw/exchangeReport/STOCK_DAY?response=json&date=20210702&stockNo=2330', { method: 'GET', }) .then((response) => { return response.json(); }) .then((result) => { console.log(result); }); }); ajax: 1. xhr based 2. 須引用 jQuery $('.btn').on('click', () => { $.ajax({ ...

[JavaScript] Cookie、SessionStorage、LocalStorage 基本比較

圖片
 記錄一下.. 面試也常問..