鳥毅的Blog

在Vue 2時我都用 Vue.Draggable ，到Vue 3時代一直沒找到好的替代品；試過 Vue.Draggable.Next ，效果很差完全不建議使用，不要去試。 直到前幾天找到  VueDraggablePlus   ，終於完美替代 Vue.Draggable ，誠心推薦。

使用新版(2021年底到2022年初)的Vue 3樣板時，會出現很多奇怪的錯誤，我又遇到一個：error  Component name "XXX" should always be multi-word 。 查了原廠手冊，發現是 Vue Style Guide  裡有提到要使用 Multi-word component names ，可是我抓 Vue Mastery的 Github 範例 也有使用 Single word component name 耶！ 無論如何，總是要讓現有的程式能夠成功編譯，查到是在eslint-plugin-vue 裡檢查的，所以只要改　.eslintrc.js ，加上  rules: {    "vue/multi-word-component-names": "off" }, 就可以忽視這個規則，成功編譯。

當使用<script setup> 語法撰寫時，若出現 defineEmits is not defined 或 defineProps is not defined 時，不一定是真的錯，很可能只是eslint檢查出錯。 解決方法：  加上import { defineEmits, defineProps } from "vue";  直接在 .eslintrc.js 加上 env: { "vue/setup-compiler-macros": true }, ，就不必在每個vue檔裡加入上述引用

廢話就不說了，現在的JavaScript比起十幾年前真是好寫多了，語法這幾年來也沒有大改版，所以我這兩年花點時間學了一下現代的JavaScript語法，但程度仍然低落。

認識我的朋友都知道，我不但是重灌狂人級，也是升級狂人，手邊的OS或軟體一定要升級到最新版才爽。 前年底做了個小系統，使用FullCalendar，一開始是jQuery 1.3.2，然後我就一直升級jQuery，也都沒什麼問題，直到這個月從 jQuery 1.6.4升到 jQuery 1.7.1時，問題出現了。 我一直以為 jQuery UI 和 jQuery 是同一家出品，只要最新版本應該都相容， jQuery UI 也只有寫jQuery 1.3.2+，沒想到 jQuery UI 的 drag and drop 出現問題，它只能用在jQuery 1.3.2~jQuery 1.6.4。 根據在下去看 jQuery UI 的source code，是因為它大量使用isNaN， jQuery 1.7 把isNaN廢掉了。 結論：升級前請停、看、聽。

因為FullCalendar的變數命名空間及呼叫方式，要在不動原始.js檔情況下建立自己的View很困難，因此先用「硬改」fullcalendar.js 的方式。 It's difficult to make a new view without modifying the source code of "fullcalendar.js", thus I chose the easy way.

因為之前都去硬改 FullCalendar ，它一直改版我老是跟不上，今天終於下定決心好好的看看怎麼擴充別人寫好的jQuery Plugin，關鍵字是extend jQuery plugin。 在查到 這篇 之前，我以為是利用prototype，但是jQuery內建 extend 這個方法，所以只要寫成： var dummyClass = { myMethod1: function () { return alert('方法1有效'); } }; $.extend(true, $.fn.fullCalendar,dummyClass ); 或者更簡化成： $.extend(true, $.fn.fullCalendar, { myMethod1: function () { return alert('方法1有效'); } }); 因為 FullCalendar 寫 得相當Ugly 有些變數的可視性僅限於內部，用這種寫法其實還有很多問題，如果有改成功就會有下篇 @@ ，目前試出來能夠增加View，但是options仍然只能在初始化時設定，不算成功。

需求：有一個動態網頁，每個物件都是動態載入，每一種物件都允許自訂顏色，因此我用物件的type id做為CSS的名稱，設定後立即生效。

剛才MIS小姐的程式出現一個奇怪的Bug，在IE可以正常執行但是在Chrome完全沒有反應。我看了一下發現她用AJAX load一個完整的html進來塞在div裏，她認為這樣在第一頁有載入 jQuery，在這頁就不用再載入。

因為1997年看過一點第一代的JavaScript，到2000年時就大幅度改寫，於是我一直很討厭學JavaScript。 最近因為被主管要求寫一個具有AJAX效果的網頁，所以再拿出jQuery in Action來看，書沒看完就寫code果然犯了兩個嚴重錯誤。

Test compression rate via following tools: Closure Compiler (2010/01/04) YUI Compressor 2.4.2 (2009/06/10) Microsoft Ajax Minifier 1.1 (2009/11/15) Source file: jQuery 1.3.2 regular , jQuery 1.3.2 minified jQuery 1.3.2 regular jQuery 1.3.2 minified Original 124,995 57,254 Closure Compiler (default) 55,334 55,334 Closure Compiler (advanced) 49,647 49,647 YUI Compressor 57,524 56,705 Microsoft Ajax Minifier (default) 72,346 56,061 Microsoft Ajax Minifier (hypercrunching) 53,573 53,570 由上表可知， Closure Compiler 不管source是否有經過其他方式壓縮，都能做出正確地壓縮，達成最小壓縮；贏家為： Closure Compiler ！ Conclusion:  Closure Compiler  can provide minimized javascript, it's the best choice! 2011 Update: Please take a look at  UglifyJS – 更強大的 JS Compressor

簡單地說，因為 MS09-054 ，發布 KB974455 ，在此更新中微軟讓VBScript以前常用的一個DHTML技巧 showModalDialog 不再具有Array的 returnValue ，只能有單值的 returnValue 。請參考 MSDN上的討論

為了個人需求，需要用JavaScript做unicode escape轉換。 對岸的高手在 Native2Ascii的JavaScript实现 (便于平时使用) 有，但他寫的ascii2native明顯有Bug。 不才在下修改成： function ascii2native() { a = document.getElementById('ascii').value; n = unescape(a.replace(/\\u/ig, "%u")); document.getElementById('native').value = n; }

剛才看 Douglas Crockford's Wrrrld Wide Web 裏這篇 The World's Most Misunderstood Programming Language Has Become the World's Most Popular Programming Language （中文版： JavaScript：從最受誤解的編程語言演變為最流行的語言 ） 裏頭的結語 " It is better to be lucky than smart. "實在是切中要點呀！拿來當做今日格言吧。

前幾天雅痞學弟說要跨 frame 設定CSS，我想這應該需要靠JavaScript才做得到。今天抽空稍微試了一下，果然很容易。 假設分為二個frame，在一個frame用 var document1 =parent.frames[0].document; 就可以輕鬆存取另一個頁面的dom物件。 今天忽然想到，若是iframe呢？查了一下 w3c school ，可以用 contentDocument 屬性，也就是 var document1 = document.getElementById('iframe1').contentDocument; 可惜IE不支援。接著就只好找非標準的寫法， 這 有解。 簡單地說，利用contentWindow屬性，同樣能找到document物件。 var document1 = document.getElementById('iframe1').contentWindow; contentWindow屬性算是非標準，但Firefox其實也支援。 上文 中的 window.frames[frame名].document 的方式，把 iframe 當 frame 看待，感覺上怪怪的，而且又是IE only，您就別用了。 參考： contentWindow at mozilla contentWindow Property at msdn （在下強烈建議別用document.all這種非標準的寫法呀...）

昨天問MIS小姐新任務要用Web Form還是Windows Form，她毫不考慮就決定用Windows Form。原因是她的程式只需要對單一使用者，安裝不是問題，除錯與開發的時間絕對是Windows Form比較快，安全性也比較好。 　　在下並不喜歡用Javascript，從1997年寫的Javascript到1999年變成不能用之後，對於Javascript 的相容性有種莫名的恐懼。當然2000年後 Javascript向前相容已經很好，但是debug的難度仍然非常高。最近火紅的AJAX開發很困難，就算用Ajax.asp.net都有一定的複雜度與限制。先不論省頻寬或浪費頻寬，AJAX其實很耗CPU資源，若是做拖拉或放大縮小等特效時連Core 2 Duo都不是很流暢。在下公司桌上那台用了快六年的P3 1G還沒換，連Rainbow Portal的menu都有點慢，根本不敢試Dojo Toolkit的圖形處理。 HTML並不是設計成程式化的開發環境，希望能有不同的application model，但看來是不太可能，我還馬上是去天瓏一趟，買本好書來看。

看了MSDN上 使用物件導向技術來建立進階 Web 應用程式 ，才知道自己完全不懂JavaScript。那位仁兄能提供好書嗎？

今天和Randy討論IE7相容性時，他提到設定style的不相容，我建議使用DOM 2＋JavaScript Core，於是寫了一個範例來測試，最後DOM標準寫法在Sofari、IE6、IE7、Firefox都可以正常使用。 建議像我一樣不熟DOM模型的人，可以用 Aptana 這套免費好用的JavaScript IDE。 注意：今天發生一個陷阱，obj.style.width="100px"; 第一次我誤打成 obj.style.width="100px;"， 多一個分號在Firefox居然可以執行，但其他Browser就認為錯誤，IE稱為"引數錯誤"。另外obj.style.width="0px"會錯，obj.style.width="0"才是正確的寫法，不可不注意。 < html > < head > < meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > < title > 測試 < /title > < /head > < body > < script language= "JavaScript" type= "text/javascript" > <!-- function click2 (xyz) { var obj ; obj = document .getElementById(xyz) ; obj.style. width = "100px" ; obj.style. height = "20px" ; obj. value = "...

最近看到某大軟體公司的asp程式，發現IE特有的事件處理方式。 宣告函數名稱： 控制項 id_事件() 就會在事件發生時觸發。限定在VBScript使用，JavaScript無效。 IE7在beta版時把這些非標準DHTML移除，但在正式版又重新支援，另一個例子像document.all(id)；如果改寫，請記得改為 document.getElementById (id)，這是目前的DOM標準。 另外，在這次測試無意中發現 Firefox的JavaScript 函數名稱會分大小寫 ，而IE不會。 以下為測試網頁原始碼： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>測試IE6、IE7與Firefox 2.0相容性</title> </head> <body> 測試OnChange事件，隨便填一個字後點到空白處或按Tab <script language="vbscript" type="text/vbscript"> <!-- sub t1_onChange() alert ("t1 OnChange VBScript 事件") end sub --> </script> <script language="JavaScript" type="text/javascript"> <!-- function t1_onChange() { alert("t1 OnChange JavaScript 事件"); } function ClickMe() { var label1; label1 = document.getElementById('t2'); label1.value= label1.value + "getElementById "; label1 = document.all('...