[JavaScript] 類別物件寫法 (建構&靜態物件) – Class Object Coding Style (constructor & static class)

情境 JavaScript如何達到靜態類別設計? https://github.com/yidas/js-design-patterns/blob/master/class/ Constructor Class var Class = function (options) { this.render = function () {} }; var object1 = new Class(); object1.render(); Literals Object JavaScript靜態物件的第一個想法, var Class = { render : function () {} }; Class.render(); 架構不錯,缺點為在物件內無法宣告區域變數(亦即達不到private變數或方法)。 若在物件方法中再次用到function,且須使用this指到物件本身就會有瓶頸,得每次帶入物件‵this‵本身,而無法從物件那層定義個物件區域變數代表this。 Static […]

[Javascript] HTML to CSV – Charset UTF-8 BOM – 完美匯出CSV

使用情境 Javascript在匯出EXCEL有ASCII Code瓶頸不能完美支援,所以匯出CSV是較佳的選擇。 CSV匯出的亮點會在於Charset,例如支援中文而使用BOM。 技術亮點 var csvContent = “欄位A,欄位B\n值A,值B”; var link = window.document.createElement(“a”); link.setAttribute(“href”, “data:text/csv;charset=utf-8,%EF%BB%BF” + encodeURI(csvContent)); link.setAttribute(“download”, “upload_data.csv”); link.click(); 其中Link格式,使用UTF-8 with BOM: “data:text/csv;charset=utf-8,%EF%BB%BF” + encodeURI(csvContent) JSFiddle

[Javascript] HTML固定頭部擋到表單錨點 – HTML5 input required is blocked by Fixed Header/Navbar

問題情境 在做 HTML5 input required 送出檢查時,網頁錨點捲動是以物件做TOP定位點,可能會被 Fixed Header/Navbar 擋到。 解決方法 使用scrollIntoView override方法: var elements = document.querySelectorAll(‘input,select,textarea’); for (var i = elements.length; i–;) { elements[i].addEventListener(‘invalid’, function () { this.scrollIntoView(false); }); } jsfiddle

[JavaScript][GA] Google analytics – 兩組帳號、多帳號並存一網站 (通用分析)

看以下Code即可: <script> (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’); ga(‘create’, ‘UA-12345678-1’, ‘auto’); //建立第一個帳號 ga(‘create’, ‘UA-87654321-2’, ‘auto’, ‘secondGA’}); //建立第二個帳號 ga(‘require’, ‘displayfeatures’); //啟用客層和興趣報表 ga(‘send’, ‘pageview’); //送出第一個帳號PV ga(‘secondGA.send’,’pageview’); //送出第二個帳號PV </script> Refer:https://developers.google.com/analytics/devguides/collection/analyticsjs/creating-trackers

[jQuery] AJAX跨網域 | AJAX Cross Domain Request withCredentials (Access-Control-Allow-Origin)

做個AJAX跨網域可是容易忘記細節的,這就來篇Note, 後端部分,Server Header請開啟(以PHP動態Header為例): header(“Access-Control-Allow-Origin: *”); header(“Access-Control-Allow-Credentials: true”); Cookie夾帶 如需夾帶Cookie則前端的AJAX需開啟Credentials,JQuery為例: $.ajax({ xhrFields: { withCredentials: true }, type: “GET”, url: “http://www.example.org/ajax.php” }).done(function (data) { console.log(data); }); xhrFields中withCredentials要開啟,這就是亮點!

[JS][jQuery] AJAX Cross Domain Request | AJAX跨網域應用

做個AJAX跨網域可是容易忘記細節的,這就來篇Note, 後端部分,Server Header請開啟(以PHP動態Header為例): header(“Access-Control-Allow-Origin: *”); header(“Access-Control-Allow-Credentials: true”); 重點是前端的AJAX呀,JQuery為例: $.ajax({ xhrFields: { withCredentials: true }, type: “GET”, url: “http://www.example.org/ajax.php” }).done(function (data) { console.log(data); }); xhrFields中withCredentials要開啟,這就是亮點!