JavaScript options object merge

這很有用喔,JavaScript 把零散程式封裝成插件時,會傳入物件相關選項 options,使封裝的程式因為選項 options 的屬性值不同而能實體化出更多可能。

建立封裝程式的選項 options 物件

為維持程式正常運行,通常都會建立一個預設值物件,在實體化的時候傳入一個選項 options 物件 ,與預設選項物件合併,後者覆蓋前者,以下為範例程式:

_default 為預設物件

options 為傳入物件

_options 為合併後物件

output:

options merge

如果兩個對象都有一個具有相同名稱的屬性,則第二個對象屬性將覆蓋第一個對象。

ES6在2015年引入了spread運算符【…】,這是將兩個簡單對象合併為一個的完美方法:

output:

參考資料:

https://stackoverflow.com/a/171256/6784662

[……]

閱讀更多

JavaScript import get Error : Cannot use import statement outside a module

JavaScript es6 有引入外部文件的功能 import

import 後得到一個錯誤

Uncaught SyntaxError: Cannot use import statement outside a module

解決方法

必須要宣告為js的模組,在引入js的script tag中加入type=”module” 這個屬性如下

[……]

閱讀更多

Google Map JavaScript API 語言切換

Google Map JavaScript API 產生地圖,預設是英文,雖然英文編排比較好看,哈,但真的要找路會瘋掉,地圖的用途還是讓使用者快速得到位置的資訊

切換成中文其實很簡單,初始化地圖前會引入 Google Map JavaScript API,在引入網址後方再多加入一個參數即可

引入 Google Map JavaScript API 長這樣

加入語言參數 language=zh-TW:

[……]

閱讀更多

PHP Cookie 儲存陣列資料

有個陣列,希望將陣列儲存至 Cookie 中,這裡提供兩種方法

在官網的範例中,可用下方的方式達成目的
https://www.php.net/manual/en/function.setcookie.php

output:

雖然是達到目的了,但事實上是建立了三個Cookie,怎麼看都不優雅,更難想像若是一個複雜的多惟陣列,會產生多少Cookie

再來介紹一個比較優雅的做法,我也比較喜歡,先將陣列序列化成字串存入Cookie

需要用到的時候,再將字串反序列化,是不是方便多了呢

output:

[……]

閱讀更多

CSS 選擇器,模糊查找匹配元素

CSS選擇器中沒有所謂的「萬用字元(*)」,可以透過一些方式接近模糊查詢方式,查找匹配屬性或值的元素

歸納出幾種用法

下表屬性名稱不一定為Class,可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值

使用範例:

See the Pen
CSS 選擇器,模糊查找匹配元素
by VECTOR.cool (@ann71727)
on CodePen.

[……]

閱讀更多

PHP array_merge do not reset index

array_merge 用來進行2個或多個陣列合併

輸出結果:

輸出出結果,陣列的索引重新排序了。某些情況陣列的索引與值是有關聯的,這麼做丟失索引及值的關聯,目前 array_merge 並沒有是否重建索引的選項,所以要透過另外一種方式來合併陣列,並保持索引鍵與值的關聯。

透過下面的代碼實現:

輸出結果:

就這樣,用運算符「+」來進行陣列的累加,非常簡單,且保持 鍵與值的關聯。

請注意型態必須都為 array
但也不必太擔心,型態錯誤會報錯

[……]

閱讀更多

vscode 搜尋檔案,停用排除 .gitignore 中的檔案

原來vscode搜尋會排除.gitignore中的檔案,害我今天在Debug花了蠻多時間的,開發時看錯誤訊息明明有某一個function,用Ctrl+Shift+f 做整個站的查詢,就是找不到那個function,後來才發現,vscode會排除 .gitignore中的檔案,本文告訴你開關在這邊。

按下組合鍵 Ctrl + Shift + f 開啟全站查詢面板,輸入要查詢的關鍵字

開關就在這邊,超級不明顯,如果這個icon有藍框,代表啟用排除,反之,再按一下,藍框消失即停用搜尋排除,停用後 .gitignore中的排除檔案或目錄,也可以找得到囉

reference:
https://github.com/Microsoft/vscode/issues/45487

[……]

閱讀更多