[JS][jQuery] Events Hooking – 元件觸發事件開發

Intro JS基本的Callback這篇就不多談,現在主要是開發JS元件的Events Pattern。 例如Bootstrap Modal Events Pattern 以jQuery實作,自定義Event Namespace 利用jQuery Event及jQuery Trigger <a>Ancher</a> <!– jQuery required –> <script> $(“a”).click(function(){ alert(‘Click’); var e = $.Event(“namespace”); $(this).trigger(e); }); $(“body”).on(“namespace”, function(){ alert(‘A’) }) $(“body”).on(“namespace”, function(){ alert(‘B’) }) $(“a”).on(“namespace”, function(){ alert(‘C’) }) </script>

[Network] Coin-Hive (coinhive.com) Block – 惡意廣告挖礦防範

Coin-Hive猖狂了Javascript惡意挖礦市場,實在令人看不下去。 想要體驗測試被挖礦的話,可以到這篇網頁:http://blog.xuite.net/jason_kuso/kuso/556581915 進入後即可查看CPU使用量;最後測試日期:2018-02-13 Hosts解法 C:\Windows\System32\drivers\etc: 127.0.0.1 coinhive.com 瀏覽器擴充套件解法 畢竟Coinhive只是其中一間做這種的,要防範多種還是得靠社群的力量: uBlock Origin AdBlocker Ultimate

[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要開啟,這就是亮點!