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 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 一樣可以解決這個問題,可參考此篇

[……]

閱讀更多

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” 這個屬性如下

[……]

閱讀更多

jQuery TinyMCE remove html head body tag in textarea

TinyMCE Editor 是一個很常見的所見及所得文字編輯器,功能很強大,並提供很多插件來擴展編輯器功能,但安裝4.8.2版本時,在textarea中會自動包覆<HTML><head><body>等標籤,即便未輸入內容,然然會存入 <HTML><head><body>等標籤 。

解決方法

非常簡單,在初始 TinyMCE 的時候不要使用 fullpage 這個 plugin 舊可以了。

參考:

jQuery TinyMCE Editor

[……]

閱讀更多

JQuery Invalid or unexpected token

在載入 jquery.min.js 會出現下列錯誤:

Uncaught SyntaxError: Invalid or unexpected token

沒有去編輯 jquery.min.js 理論上應該不會出現這種錯誤,如果你已經嘗試各種方法還是會出現這錯誤,並確認程式編寫沒問題,仍然出現此錯誤,無計可施求助無門可以繼續看看這篇文章,也許對你會有幫助。

常見原因:

大部分的情況都是因為程式碼錯誤而造成,常見錯誤全形或半形 「<」「<」、
「“」「”」 、 「`」「’」,或是字串引號開頭結尾不同,請詳細您的檢視程式碼,就可以快速排除這錯誤。

但本篇文章是載入原生地 jquery.min.js 出現的錯誤,顯然不是這方面錯誤。

排除錯誤:

場景:這支 jquery.min.js 在遠端 Server 上是可運行的,透過 Filezilla FTP下載原始碼到 localhost Server 上用相同HTML引入這支 jquery.min.js 並於 Server 中運行,就會得到上述錯誤。

除錯開始

理論上 jquery.min.js 不會犯這種錯誤,所以我們先從周邊著手,先找出問題,我試著建立一個非常簡單的 HTML(下圖)只載入 jquery.min.js 這支程式,以排除其他程式造成錯誤的可能性,但仍然產生錯誤。

也因如此,縮小錯誤範圍了,錯誤就是 jquery.min.js 這支程式,但奇怪的是 jquery.min.js 我並沒有去編修他,而且執行遠端的HTML也是不會有錯誤的,為了證實,接著我修改 local HTML 用 Http 載入遠端的 jquery.min.js 就不會發生錯誤,怪了。

那錯誤是什麼呢?

再度縮小範圍,遠端的 jquery 是可以運行的,本地端卻不行,理論上是相同檔案,沒有道理遠端可以,本地端不能運行,所以,最有可能的原因就是傳輸過程中出了問題。

所以我直接透過瀏覽器直接下載 jquery.min.js 這檔案並用本地端 HTML 載入,結果沒有問題,由此可證,jquery.min.js 是沒有問題的,最有可能的是下載程式碼的軟體出了問題,而我們是透過 Filezilla 用 FTP 方式下載檔案,Filezilla 是一個卓越的免費FTP軟體,理論上也不會有問題,所以試著朝設定方面著手。

配置 Filezilla

再將 Filezilla 重新連線,結果出現了,正常運作,喔耶!!

所以錯誤的原因就是在傳輸過程中的編碼,Filezilla 預設是(自動),天知道自動是自動用什麼傳輸型式到本地端,所以我們指定使用二進位檔案方式,解決這問題,

我的名言:

找到錯誤,錯誤就解決一半了

— 鄭小安

[……]

閱讀更多