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

[……]

閱讀更多

jQuery / JavaScript Loaded Event

DOM 解析完成觸發

不需完成圖片、CSS、iframe等加載,只要DOM解析完成就觸發,這邊介紹兩種寫法,完成相同任務

JavaScript

jQuery

資源載入完成觸發

圖片、CSS、iframe…等,資源載入完成後觸發, 這邊一樣介紹兩種寫法,完成相同任務

JavaScript

jQuery

HTML事件參考

https://html.spec.whatwg.org/multipage/indices.html#events-2

[……]

閱讀更多

Youtube embed iframe API loop/repeat not working

有效解決這問題,除了loop=1以外,要多加一個 playlist 參數playlist=VIDEO_ID ,這對我有效

參考資料:
https://developers.google.com/youtube/player_parameters#loop
https://stackoverflow.com/a/25781957/6784662

[……]

閱讀更多

YouTube JavaScript API not triggering onYouTubeIframeAPIReady

YouTube JavaScript API 於載入完成後會呼叫一次 onYouTubeIframeAPIReady 這個全域方法,只會呼叫一次,但如果其他程式已經先載入了 YouTube JavaScript API 並初始後另外再加載 YouTube JavaScript API 則 onYouTubeIframeAPIReady 這個方法將會被覆蓋,導致最後載入的程式將不會被呼叫

也不知道為什麼 YouTube JavaScript API 不用事件觸發的方式,而且 function 名稱也沒辦法改,使用一些主題或模板,根本不知道有沒有先載入過YouTube JavaScript API,Debug到昏倒

載入 YouTube JavaScript API

為了避免 onYouTubeIframeAPIReady 這方法已被占用,這裡不用這個方法,首先一樣載入 API:

建立建構方法

接著建立建構方法取代原 onYouTubeIframeAPIReady 中的程式

計時器重複判斷 YT 是否被初始

接著透過計時器重複判斷 YT 是否被初始,若 YT 已初始就呼叫上方建構方法,如此即可不用依賴 onYouTubeIframeAPIReady 這方法,避免被覆蓋的問題

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

[……]

閱讀更多

jQuery YTPlayer 占用 YouTube JavaScript API 的onYouTubeIframeAPIReady function

YouTube JavaScript API 於載入完成後會呼叫一次 onYouTubeIframeAPIReady 這個全域方法,只呼叫一次,如果已經使用了 jQuery YTPlayer 另外再加載 YouTube JavaScript API 則,onYouTubeIframeAPIReady 這個 function 將會被覆蓋,不管誰覆蓋誰,總之就是有個會被覆蓋,導致另一段初始的程式將不會被呼叫

也不知道為什麼不用事件觸發的方式,而且 function 名稱也沒辦法改,使用一些主題或模板,根本 也不知道有沒有先載入過YouTube JavaScript API,Debug到昏倒

幸好 YTPlayer 算有良心的,沒有霸佔這個方法, YouTube JavaScript API 呼叫 YTPlayer的 onYouTubeIframeAPIReady 後會發送一個 YTAPIReady 事件,偵聽這個事件,可以將本來在自己的 onYouTubeIframeAPIReady 要做的事改在事件觸發後執行,以下如以下代碼:

如此一來,兩個 onYouTubeIframeAPIReady 都正確被執行拉

https://github.com/pupunzi/jquery.mb.YTPlayer/issues/163

如果沒有使用 YTPlayer 一樣可以解決這個問題,可參考此篇

[……]

閱讀更多

AI illustrator 嵌入圖片另存新檔

用過 Office PowerPoint 的人應該熟悉另存圖片的功能,客戶、行銷或企劃常常把一堆圖丟進PPT裡,存成很肥的一大包,設計師再將需要的圖另存出來使用,對啦,其實也是挺方便的啦。

網頁設計師接到設計的AI稿子後,其實也想存原圖出來使用,把解析度最好的圖存出來,再下去轉存需要尺寸,想說illustrator應該也有這種功能吧,找了半天居然找不到!!認真的去摸索了一下,找到方法了

illustrator匯入圖片有兩種方式,一種是「連結」一種是 「 嵌入 」, 「連結」是早期電腦運算能力沒太強大,為方便排版,避免吃光記憶體,會採用的方式,圖片「連結」或 「 嵌入 」個有其優缺點 ,至於它們的差異本文不多做介紹囉,相信設計師們也知道啦。

“通常” 網頁的稿子都會用「嵌入」圖片的方式,把所有圖片檔案都存入AI檔案中,包成一個檔案, 這是不是跟 PowerPoint 很像呢? 這麼做是盡可能避免 「連結」 圖片方式可能產生的 「 掉圖 」 問題,切板時要把圖檔 「 另存 」 出來用,但是在一啦點選圖片開啟影像面版,按右鍵都沒有匯出圖片或檔案的選項。

在 「 一拉 」 中沒有把原始嵌入物件做所謂的 「 另存新檔 」 的動作跟詞,但可以透過 「 取消嵌入 」 方式另存圖片,在點選圖片後,於上方工具列有個 「 取消嵌入 」 按鈕 ,按下去就對了,除了取消嵌入圖片動作外還會再將嵌入圖片匯出,接著跳出另存原始圖片的對話框(如下圖),這時將圖片檔案另存即可

若AI檔仍想維持嵌入圖片的狀態,再按 Ctrl+Z 恢復上一動的即可

我也不知道流程為什麼要這麼設計,其實圖片旁加另存新檔選項不是比較直覺嗎?是不是什麼銷售層面考量,這我就不得而知了,但可以解決問題就好囉:)

[……]

閱讀更多

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:

[……]

閱讀更多

CSS 文字圓標教學

圓標是網頁表現手法很常見的一種方式,尤其電商,很常見用來突顯商品特價 產品 或新產品的標籤,以下介紹圓標的製作方式

HTML

先建立一個兩層結構的HTML如下,圓標文字包裹在內層div中

CSS

未方便辨識,先把兩個容器背景設為綠色及紅色的純色,這樣就能清楚了解容器範圍,並且先製作外層容器

接著用 CSS3.0 水平垂直居中的技巧,讓文字固定於正中間

再給文字添加一些樣式

透過顏色的區分,很容易看到兩個容器的關係,最後再慢慢調整文字及圓表尺寸顏色等樣式,以下是本教學的範例

完成樣子

See the Pen
文字圓標
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

閱讀更多