直接看程式碼：
測試範例 1 的執行結果跟我想的完全不一樣
我一直以為 var data = {} 沒有被執行到的話
data 應該會是外面定義的值！
結果是就算沒執行到，只要暱名 function 有任何地方宣告就算了
就不會再往上找變數的定義！
測試範例 1 的執行結果跟我想的完全不一樣
我一直以為 var data = {} 沒有被執行到的話
data 應該會是外面定義的值！
結果是就算沒執行到，只要暱名 function 有任何地方宣告就算了
就不會再往上找變數的定義！
- 11月 18 週五 201611:57
[JavaScript] 暱名 function 裡的 scope 問題
- 1月 06 週三 201617:33
[JavaScript] Underscore 的 template 功能測試
官網：http://underscorejs.org/
因為之前用的 JS 樣版引擎 jQuery Template 已經停止更新很久很久了，
所以後來改用 Underscore 來當樣版引擎，以下是最簡單用法的筆記
請看程式
因為之前用的 JS 樣版引擎 jQuery Template 已經停止更新很久很久了，
所以後來改用 Underscore 來當樣版引擎，以下是最簡單用法的筆記
請看程式
- 2月 26 週四 201510:38
[JavaScript] 如何解決某些瀏灠器上一開始就會觸發 popState 事件的問題
這問題之前在 chrome 和 IOS 的 safari 會發生，但 chrome 的好像拿掉這個行為了。
請參考 StackOverflow 解法: http://stackoverflow.com/questions/10756893/how-to-ignore-popstate-initial-load-working-with-pjax
解法1: 使用 flag
1.1 做 pushState 之前寫一個 Flag 去記，代表已經有 pushState 了。
1.2 在 popState 判斷有那個 Flag 才實際去做事。
解法2: 使用 pjax:popstate (但似乎要用 pjax 的套件能會有用，不過沒試過)
將原本的
請參考 StackOverflow 解法: http://stackoverflow.com/questions/10756893/how-to-ignore-popstate-initial-load-working-with-pjax
解法1: 使用 flag
1.1 做 pushState 之前寫一個 Flag 去記，代表已經有 pushState 了。
1.2 在 popState 判斷有那個 Flag 才實際去做事。
解法2: 使用 pjax:popstate (但似乎要用 pjax 的套件能會有用，不過沒試過)
將原本的
- 2月 26 週四 201510:24
[JavaScript] 如何得知 function 是被誰呼叫
Stackoverflow 解法：http://stackoverflow.com/questions/280389/how-do-you-find-out-the-caller-function-in-javascript
程式碼：
function Hello()
{
alert("caller is " + arguments.callee.caller.toString());
}
程式碼：
function Hello()
{
alert("caller is " + arguments.callee.caller.toString());
}
- 1月 12 週一 201516:41
[JavaScript] 表單資料先用 jQuery 判斷再做傳送
因為 PHP 在 POST 傳送資料的時候，有資料量的限制(post_max_size)，也有欄位數量的限制(max_input_vars)
一般來說可以修改 php.ini 的 post_max_size 及 max_input_vars 來避開這個問題(雖然可能不太好)
但在虛擬主機上可能無法自行修改這兩個設定，所以必須減少 POST 的資料量以及欄位數量
如果是 form 表單上的欄位非常的多，這裡或許可以用 jQuery 判斷及收集有輸入值的欄位
再一次送 POST 到下個頁面去做處理，大概要做以下幾個動作
1. 拿掉所有 form 上面物件的 name 換成 id (這樣才不會自動被 post 出去)
2. form onsubmit 時先到 JavaScript 去判斷
3. 承上，判斷所有欄位，有輸入的欄位再加入 post_data
4. 最後加上一個 hidden 欄位，將 post_data 轉成 Json 格式塞入，並送出 post
5. 下一頁接收時，要先做 php 的 json_decode
以下是簡單的範例說明
一般來說可以修改 php.ini 的 post_max_size 及 max_input_vars 來避開這個問題(雖然可能不太好)
但在虛擬主機上可能無法自行修改這兩個設定，所以必須減少 POST 的資料量以及欄位數量
如果是 form 表單上的欄位非常的多，這裡或許可以用 jQuery 判斷及收集有輸入值的欄位
再一次送 POST 到下個頁面去做處理，大概要做以下幾個動作
1. 拿掉所有 form 上面物件的 name 換成 id (這樣才不會自動被 post 出去)
2. form onsubmit 時先到 JavaScript 去判斷
3. 承上，判斷所有欄位，有輸入的欄位再加入 post_data
4. 最後加上一個 hidden 欄位，將 post_data 轉成 Json 格式塞入，並送出 post
5. 下一頁接收時，要先做 php 的 json_decode
以下是簡單的範例說明
- 12月 16 週二 201414:58
[JavaScript] 解決使用新注音輸入時選字按 Enter 會送出的問題
這問題是發生在 IE 的輸入框使用新注音等要選字的輸入法時，選字完按 Enter 時會送出 Enter 的問題
一般我們使用 Enter 來觸發送出事件時就會有問題，基本上應該算是輸入法的 BUG
以下這個簡單的範例，如果使用新注音來輸入的時候就會發生問題
<input id='fm_text' type='text' placeholder='Please...'>
<script src='http://www.leo-kuo.com/global/js/jquery.js'></script>
<script>
$('#fm_text').bind('keyup', function (event)
{
if (event.keyCode == 13)
{
alert('Enter!');
}
});
</script>
一般我們使用 Enter 來觸發送出事件時就會有問題，基本上應該算是輸入法的 BUG
以下這個簡單的範例，如果使用新注音來輸入的時候就會發生問題
<input id='fm_text' type='text' placeholder='Please...'>
<script src='http://www.leo-kuo.com/global/js/jquery.js'></script>
<script>
$('#fm_text').bind('keyup', function (event)
{
if (event.keyCode == 13)
{
alert('Enter!');
}
});
</script>
- 12月 15 週一 201416:09
[JavaScript] 如何得知某物件上現在綁定的事件有哪些？
在 JavaScript Debug 的時候，經常會想知道某物件上目前綁定的事件有哪些，不過我一直找不到方法
現在我終於知道了，趕快來分享一下：
1. Firefox (測試版本為 34.05)
Step.1 按右鍵彈出選單選擇 "檢視元素(Q)"
Step.2 使用開發工具左上方的 "挑選頁面中的元素" 按鈕
Step.3 選擇你要檢查的物件
Step.4 按原始碼中物件旁邊的 "ev" 字樣即會彈出該物件所綁定的所有事件
2. Chrome (39.0.2171.95 m)
Step.1 按右鍵彈出選單選擇 "檢查元素(N)"
Step.2 使用開發工具左上方的 "放大鏡" 按鈕
Step.3 選擇你要檢查的物件
Step.4 按開發工具右上方頁籤 "EventListeners"
- 11月 23 週六 201311:50
[jQuery] 自己實作把 jQuery Template 的 html 字串回傳回來的 jQuery Plugin：tmpl_html
因為 jQuery Templat 似乎目前回傳的似乎是物件，而不是 html 的字串，所以若要做字串相加會無法處理
只好找網路上的範例，然後封裝成 jQuery Plugin 的格式來用
函式部份 $().tmpl_html
/**
* 把 jQuery Template 的 html 傳回來
* 因為 jQuery Template 似乎沒有提供此功能，只好自己包一個 jQuery Plugin 的介面
* @author Leo Kuo <et282523@hotmail.com>
*/
(function($)
{
$.fn.tmpl_html = function(data)
{
return this.template("#" + this.attr('id'))($, {data: data}).join('');
};
})(jQuery);
只好找網路上的範例，然後封裝成 jQuery Plugin 的格式來用
函式部份 $().tmpl_html
/**
* 把 jQuery Template 的 html 傳回來
* 因為 jQuery Template 似乎沒有提供此功能，只好自己包一個 jQuery Plugin 的介面
* @author Leo Kuo <et282523@hotmail.com>
*/
(function($)
{
$.fn.tmpl_html = function(data)
{
return this.template("#" + this.attr('id'))($, {data: data}).join('');
};
})(jQuery);
- 10月 12 週六 201316:39
[JavaScript] jQuery Plugin 的一個簡單練習：說明方塊
在這簡單做一個說明方塊的範例，點擊時會在該物件下面顯示方塊，點別的地方會消失
<html>
<head>
<title>jqury plugin</title>
<style>
#helpBox
{
position : absolute;
padding : 5px;
border-radius : 5px;
border : 1px solid #ccc;
z-index : 999;
background : #eeF;
}
</style>
<script type="text/javascript" src='jquery.js'></script>
<script>
(function($)
{
$.fn.helpBox = function (msg)
{
// 指定移除 box 的事件
var remove_this = function(event){$('#helpBox').remove(); }
// 只能有一個 helpBox
remove_this();
// 加上 box
this.append("<div id='helpBox'>" + msg + "</div>");
// 指定位置
var position = this.position();
var size = this.size();
var x = position.left;
var y = position.top + size.height;
$('#helpBox').css({left:x, top:y});
// 註冊移除 helpBox 的事件
$(document).bind('click', remove_this);
// 讓 jquery 可以繼續串接
return this;
};
})(jQuery);
$(function()
{
$('p, #content').bind('click', function (event)
{
event.stopPropagation();
$(this).helpBox('Hello World!');
});
});
</script>
</head>
<body>
<div id='base' style='margin:0 auto; width:600px;'>
<p>123123</p>
<p>123123</p>
<p>123123</p>
<p>123123</p>
<div id='content'>在這裡出現吧</div>
</div>
</body>
</html>
<html>
<head>
<title>jqury plugin</title>
<style>
#helpBox
{
position : absolute;
padding : 5px;
border-radius : 5px;
border : 1px solid #ccc;
z-index : 999;
background : #eeF;
}
</style>
<script type="text/javascript" src='jquery.js'></script>
<script>
(function($)
{
$.fn.helpBox = function (msg)
{
// 指定移除 box 的事件
var remove_this = function(event){$('#helpBox').remove(); }
// 只能有一個 helpBox
remove_this();
// 加上 box
this.append("<div id='helpBox'>" + msg + "</div>");
// 指定位置
var position = this.position();
var size = this.size();
var x = position.left;
var y = position.top + size.height;
$('#helpBox').css({left:x, top:y});
// 註冊移除 helpBox 的事件
$(document).bind('click', remove_this);
// 讓 jquery 可以繼續串接
return this;
};
})(jQuery);
$(function()
{
$('p, #content').bind('click', function (event)
{
event.stopPropagation();
$(this).helpBox('Hello World!');
});
});
</script>
</head>
<body>
<div id='base' style='margin:0 auto; width:600px;'>
<p>123123</p>
<p>123123</p>
<p>123123</p>
<p>123123</p>
<div id='content'>在這裡出現吧</div>
</div>
</body>
</html>
- 9月 28 週六 201314:36
[JavaScript] 物件導向寫法的筆記 (番外篇) 類似 jQuery 的宣告方式
請注意，這只是我個人的筆記，因為還沒有完全研究，所以如果內容有錯誤，請各位指正，謝謝
(比如說 jQuery 有用到 prototype 來定義物件，我這裡就還沒看懂是怎麼處理的)
--
<script>
// 以 jQuery.trim 為例來建立類似 jQuery 的物件定義方式
// 只是類似而以，因為 jQuery 還有使用 prototype 的方式來定義
// 目前還沒有研究
// 以 my_jQuery 及 $$ 來命名
(function(window)
{
// private 的屬性及方法
var Version="0.0001";
// public
var my_jQuery =
{
// 去除字串前後空白
trim : function(str)
{
return str.replace(/^\s+/, '').replace(/\s+$/, '');
},
// 傳回目前版本
version :function()
{
return Version;
}
};
// 直接在 window 定義物件(所以不用回傳值)
window.my_jQuery = window.$$ = my_jQuery;
})(window);
// 這裡使用立即函式來定義 my_jQuery，請注意執行時將 window 當參數傳入
// 所以能直接在 window 下定義 my_jQuery，所以才不需要回傳值
// 也就是這樣，所以才能使用 .noConflict 的方式來放棄對 window.$ 變數的控制
//================== 測試 ==========================
// 看看目前 my_jQuery 的定義
console.log("my_jQuery", my_jQuery);
// 查看 my_jQuery 的版本
console.log("my_jQuery Version: " + $$.version());
// 測試 my_jQuery.trim
var str = " 123 ";
console.log("原始字串 = '" + str + "'");
str = $$.trim(str);
console.log("trim 後字串 = '" + str + "'");
</script>
(比如說 jQuery 有用到 prototype 來定義物件，我這裡就還沒看懂是怎麼處理的)
--
<script>
// 以 jQuery.trim 為例來建立類似 jQuery 的物件定義方式
// 只是類似而以，因為 jQuery 還有使用 prototype 的方式來定義
// 目前還沒有研究
// 以 my_jQuery 及 $$ 來命名
(function(window)
{
// private 的屬性及方法
var Version="0.0001";
// public
var my_jQuery =
{
// 去除字串前後空白
trim : function(str)
{
return str.replace(/^\s+/, '').replace(/\s+$/, '');
},
// 傳回目前版本
version :function()
{
return Version;
}
};
// 直接在 window 定義物件(所以不用回傳值)
window.my_jQuery = window.$$ = my_jQuery;
})(window);
// 這裡使用立即函式來定義 my_jQuery，請注意執行時將 window 當參數傳入
// 所以能直接在 window 下定義 my_jQuery，所以才不需要回傳值
// 也就是這樣，所以才能使用 .noConflict 的方式來放棄對 window.$ 變數的控制
//================== 測試 ==========================
// 看看目前 my_jQuery 的定義
console.log("my_jQuery", my_jQuery);
// 查看 my_jQuery 的版本
console.log("my_jQuery Version: " + $$.version());
// 測試 my_jQuery.trim
var str = " 123 ";
console.log("原始字串 = '" + str + "'");
str = $$.trim(str);
console.log("trim 後字串 = '" + str + "'");
</script>
程式設計 (22)