Browse by Tags

【茶包射手日記】網頁 Enter 鍵誤擊刪除鈕疑雲

同事報案，在「以 MVVM 清單實作資料編輯介面」的經典應用場景（ Knockout版範例 、 Angular版範例 ）遇見怪事。新増一筆資料後，將焦點移至 <input type="text"> 輸入欄位，若按下 Enter 資料會莫名消失，按一次消失一筆… 程式用了 jQuery、Bootstrape、Knockout、KendoUI，加上一堆自訂程式庫，無法斷定是誰造成，只好抽絲剝繭，以能重現問題為原則，將掛載的程式庫及 DOM 元素一一拆除。歷經一番功夫，最後竟發現是個...

Posted 28 June 2017 11:46 PM 由 Jeffrey | 3 comment(s) 6,940

Filed under: Javascript, Trouble-Shooting

實例分析－彈出式視窗被瀏覽器封鎖

昨天剛在公司解完案例，今天又在日常生活遇到實例，老天爺這暗示明顯無比，趕緊來篇筆記，以防出門雷劈！ 最近迷上蝦皮拍賣。能跟 LINE 一樣跟賣家溝通超方便，尤其問完問題馬上接到賣家的實體照片真令人感動，不用出門與人面對面又保有臨櫃交談的即時性，真是阿宅的救星。遇到一個賣家很妙，凌晨四點多發訊息通知我補寄商品今天會到（不知對方有沒有早起的拎杯秒回「謝謝」嚇到？ XD）。 在中華郵政網站輸入包裹號碼，按下「運輸資料」查詢鈕… 登楞！ JavaScript 試圖彈出視窗被 Chrome 瀏覽器封鎖了！...

Posted 16 June 2017 11:01 AM 由 Jeffrey | with no comments 6,258

Filed under: Javascript, AJAX

onbeforeunload 事件不再支援自訂訊息

要防止使用者網頁輸入資料時誤按超連結或回上頁鍵，來不及儲存（送出）就離開，有個古老技巧是攔截 onbeforeunload 事件，使用 return "…" 傳回提醒文字，讓使用者有機會反悔，選擇停留在原頁面。（參考： 如何避免使用者在特定網頁表單在未經送出時意外離開 ） 這招用了多年，今天在寫某個設定網頁時卻發現 Chrome 沒有顯示我在 onbeforeunload 傳回的提醒文字，而是出現「系統可能不會儲存你所做的變更」字樣。 原以為是寫法有誤不符 Chrome 要求...

Posted 04 January 2017 10:49 PM 由 Jeffrey | with no comments 4,421

Filed under: Javascript

小試 JavaScript Promise

非同步邏輯是寫 JavaScript 逃不掉的複雜課題，古早流行的做法是傳入 Callback 函式當參數，待特定作業完成再呼叫，缺點是串接程序一旦變多，就會出現波動拳式排版，寫到渾然不知身處夢境第幾層： asyncJob1( function () { //Callback 函式： asyncJob1 完成後呼叫 //...... ayncJob2( function () { //Callback 函式： asyncJob2 完成後呼叫 //...... ayncJob3( function...

Posted 22 December 2016 10:34 PM 由 Jeffrey | 1 comment(s) 6,516

Filed under: Javascript, jQuery, TypeScript

【笨問題】JavaScript取字串split()結果最後一段

困擾我很久的一個問題：寫程式時常遇到用Split切字串再取最後一節的情境，例如：「DomainName\Account」取Account、「Oracle.ManagedDataAccess.Client.OracleConnection」取OracleConnection。 這類需求用C#寫，當然二話不說，Split()加LINQ .Last()一行搞定: "Domain\\Account" .Split( '\\' ).Last() 但同樣一件事搬到JavaScript我就發傻了...

Posted 10 July 2016 07:50 PM 由 Jeffrey | 3 comment(s) 6,092

Filed under: Javascript

在JavaScript模擬C# Dictionary、LINQ Where、Select與OrderBy

一週內被兩位同事問到幾乎相同的問題，這一定是天意！趕緊寫篇FAQ以免天公伯不開心～ 【問題】 用JavaScript要怎麼實現Dictionary<string, T>？ JavaScript有沒有類似LINQ Where()、Select()、OrderBy()的東西？ 回答第一個問題，JavaScript物件本身就具備Dictionary<string, T>的特性，範例如下： <! DOCTYPE html > < html > < head...

Posted 03 July 2016 12:40 PM 由 Jeffrey | with no comments 9,264

Filed under: Javascript, jQuery

Hash對講機－IFrame跨站台網頁通訊程式庫

這是最近 跟老IE纏鬥 衍生的副產品。 雖然已研究出 用document.domain克服無法與IFrame跨站台網頁溝通問題 ，但實務上常不免會遇到使用IP、機器名稱或別名連上網站的場合，document.domain法只適用URL採FQDN完整網域名稱且後段網域相同的情境，實用性大減。 針對IFrame跨站台溝通， 浏览器同源政策及其规避方法 一文提到三種解法： window.name 跨文件傳輸API（Cross-Document Messaging） 片段識別碼（Fragment Identifier...

Posted 18 June 2016 11:49 AM 由 Jeffrey | 1 comment(s) 3,658

Filed under: Javascript, IE

克服入口網站內嵌其他網站之跨網站存取限制

文章標題有點饒舌難懂，直接說我需求就清楚了。我想在員工入口網站（例如：portal.utopia.com）加入人事、行政、會計、電子表單等現成網站功能，這些應用程式各有自己的網站（例如：webap.utopia.com），最簡單的整合方法是在入口網站放個Iframe將其他網站的網頁內嵌進來，兩分鐘搞定，用膝蓋就能完成。 BUT，人生最機X的就是這個BUT！ PM/老闆/使用者一定不會這麼簡單放過你，既然網頁已經整在一起，那麼切換樣式跟入口網站融為一體，審完表單入口網站的待審數字要減一，非常合情合理...

Posted 07 May 2016 03:00 PM 由 Jeffrey | 6 comment(s) 9,659

Filed under: Javascript, HTML5

【茶包射手日記】勿用UrlEncodeUnicode/escape

寫WebClient.DownloadString()時用了"some.aspx?t=" + HttpUtility.UrlEncodeUnicode("中文")寫法組網址及Query String參，遇到一些問題，學到一些知識，筆記之。 先來個範例好說明。為便於測試，我寫了一個超簡單的ChkQueryString.aspx傳回Request.Url.Query檢查URL查詢參數： <%@ Page Language="C#"%>...

Posted 05 May 2016 12:06 AM 由 Jeffrey | with no comments 5,586

Filed under: Javascript, ASP.NET

【茶包射手日記】JS Bin的無窮迴圈保護機制

同事報案，用 JS Bin 跑迴圈計算從1加到n測試效能，發現 for 迴圈次數增加到100萬後加總結果不對，每次執行會得到小於正確值（499999500000）的隨機數字；但若不用for改用 lodash _.times() ，跑再多次結果也是正確的。 為了調查，先將程式碼簡化到可重現問題的最精簡內容： var count = 1000000; var sum = 0; for ( var i=0;i<count;i++) sum += i; console.log( "Inline...

Posted 27 April 2016 07:41 AM 由 Jeffrey | 1 comment(s) 2,932

Filed under: Javascript

【茶包射手日記】Java內嵌IE網頁疑案

接獲報案：某支Java開發的程式以內嵌IE方式顯示特定網頁，在特定機器執行時網頁出現異常。 初步蒐集情報如下： 於問題機器單獨使用IE或Chrome可正常顯示該網頁 問題機器之IE版本為IE11 問題僅出現在特定機器，同一Java程式於其他機器執行正常 於異常網頁按右鍵檢視HTML原始碼完整，異常部分推測為JavaScript出錯導致 IE在內嵌模式下無法使用F12開發者工具，偵錯困難 沒有F12可用，改用 Fiddler 側錄往來封包，找出後半段Request未發送證據，推測最大可能是JavaScript程式在某階段中止執行...

Posted 19 March 2016 12:27 AM 由 Jeffrey | with no comments 3,330

Filed under: Javascript, IE

C# TypeScript雙頻式View Model型別程式產生器範例

NG筆記3-使用TypeScript 一文曾提及「另建程式碼產生器專案，將ViewModel規格轉成JavaScript(或TypeScript)、C#類別」的做法，方便Client及Server端共享一致的強型別ViewModel，規格如有更動，重跑程式產生器就能同步更新。 日前網友Ark詢問，有無上述做法的實際範例可供參考。先前其他專案也曾有類似程式產生器需求，手邊有運行多時的實例，但綁死過多專屬邏輯，複雜度過高難以抽離重用，算一算手邊的確缺少一組能獨立運行的淺顯範例，索性另起一套簡單的概念驗證...

Posted 21 September 2015 11:47 PM 由 Jeffrey | 4 comment(s) 6,368

Filed under: Javascript, .NET

偵測JavaScript物件屬性異動時機

由Knockout跨到Angular半年，對於NG的Dirty Check機制卻始終 沒好感 ，老覺得它髒，為了偷懶不宣告Observable跟少寫一些訂閱連動，卻無法預期程式觸發次數與時機，讓我很沒安全感。如果可以選擇，我寧可乖乖多寫一些Code，100%掌控程式運作，避免陷入程式 一旦複雜就可能失控的擔憂。（註：我想Angular RD也認同這點，在2.0將另推Observable。 參考 ：… One approach is to replace the dirty checking that...

Posted 06 February 2015 06:12 AM 由 Jeffrey | with no comments 5,093

Filed under: Javascript, AngularJS

【茶包射手日記】IE CORS跨網域存取的特殊規則

同事報案，安裝SPA專案在localhost，跨網域發出AJAX請求到ServerA時出現存取被拒訊息，而該情況獨獨出現於IE11，Chrome與Firefox並無問題。 排除Web API端的CORS配套機制的問題（由Chrome及Firefox具名擔保，延伸閱讀： CORS OPTIONS Preflight Request與IIS設定 ），且更玄的是問題只發生在同事的IE11，在我的IE11測試本機localhost SPA專案發送同樣的AJAX需求到ServerA，一切正常。 經過一番診察...

Posted 15 January 2015 11:12 PM 由 Jeffrey | with no comments 8,256

Filed under: Javascript, IE

自製jQuery waitFor函式：等待條件成立執行作業

在寫JavaScript程式時，常有協調非同步作業的需求，像是作業B必須等待作業A完成後再進行，傳統做法多使用Callback函式，例如： function doJobA(callback) { //do something callback(); } function doJobB() { //do another thing } doJobA(doJobB); 學會jQuery.Deferred後，我幾乎都改用Deferred處理非同步作業，不管串接多個作業循序執行[ 參考 ]或等待多項作業完成再進行...

Posted 28 December 2014 06:55 PM 由 Jeffrey | with no comments 7,681

Filed under: Javascript, jQuery

搜尋