目前分類：JavaScript (36)

瀏覽方式： 標題列表 簡短摘要

直接看程式碼：

測試範例 1 的執行結果跟我想的完全不一樣
我一直以為 var data = {} 沒有被執行到的話
data 應該會是外面定義的值！

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

官網：http://underscorejs.org/

因為之前用的 JS 樣版引擎 jQuery Template 已經停止更新很久很久了，
所以後來改用 Underscore 來當樣版引擎，以下是最簡單用法的筆記

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

這問題之前在 chrome 和 IOS 的 safari 會發生，但 chrome 的好像拿掉這個行為了。

請參考 StackOverflow 解法: http://stackoverflow.com/questions/10756893/how-to-ignore-popstate-initial-load-working-with-pjax

解法1: 使用 flag

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

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());
}

 


wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

因為 PHP 在 POST 傳送資料的時候，有資料量的限制(post_max_size)，也有欄位數量的限制(max_input_vars)
一般來說可以修改 php.ini 的 post_max_size 及 max_input_vars 來避開這個問題(雖然可能不太好)
但在虛擬主機上可能無法自行修改這兩個設定，所以必須減少 POST 的資料量以及欄位數量


如果是 form 表單上的欄位非常的多，這裡或許可以用 jQuery 判斷及收集有輸入值的欄位

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

這問題是發生在 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>

 

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

在 JavaScript Debug 的時候，經常會想知道某物件上目前綁定的事件有哪些，不過我一直找不到方法
現在我終於知道了，趕快來分享一下：

1. Firefox  (測試版本為 34.05)
   Step.1  按右鍵彈出選單選擇 "檢視元素(Q)"

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

因為 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);

 

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

在這簡單做一個說明方塊的範例，點擊時會在該物件下面顯示方塊，點別的地方會消失

<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>

 
這裡有幾點要注意的地方

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

請注意，這只是我個人的筆記，因為還沒有完全研究，所以如果內容有錯誤，請各位指正，謝謝
(比如說 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>

 
執行結果：

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

1. $(id).tmpl(obj) 若 obj 是一個陣列結構，則會自動就同一個 tmplate 產生好幾個元素

這裡有一篇介紹的很清楚
http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates


wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

這裡講的是類似 Class 的宣告方式，是因為 JavaScript 並沒有真的 Class，而是利用 function 來宣告
和一般的 Class 一樣要使用 new 來產生一個實體，以下是範例說明
--

<script src='jquery.js'></script>
<script>
// 以下範例為組合目前的網址
var Content = function(param) 
{
    // 宣告變數及預設值
    this.link  = (param.link) ? param.link : '';    // 連結
    this.page  = (param.page) ? param.page : 1;     // 分頁
    this.order = (param.order) ? param.order : '';  // 排序

    // 取得連結
    this.getLink = function() 
    {
        return this.link + '?page=' + this.page + '&order=' + this.order
    };

    // 物件處理，注意物件觸發時 this 會指向觸發事件的元素，所以要另外取得物件的值
    // 導向網址
    this.redirect = function(event)
    {
        // 取得自己
        var _self = (event.data) ? event.data : this;

        // 換頁
        window.location.href = _self.getLink();
    };

    // 綁定按鈕做換頁的動作
    // 注意第二個參數，我把 this 傳進去
    // 不然因為事件觸發的關係， redirect 的 this 會指向 #fmBtn
    $('#fmBtn').bind('click', this, this.redirect);
}

$(function()
{
    // 初始化物件
    var content = new Content(
    {
        link  : 'http://localhost/',
        page  : 2,
        order : 'account'
    });

    // 呼叫物件的方法
    // 結果為： http://localhost/?page=2&order=account
    console.log(content.getLink());
});
</script>
<!-- 
    這裡會去呼叫 content.redirect 去換頁
    請注意呼叫後 content.redirect 裡的 this 會指向 #fmBtn
 -->
<input id=fmBtn type='button' value='按我換頁'>

 --
但是上面的範例裡，因為 getLink 及 redirect 是直接定義的，所以每一個 new 出來的實體(instance)都會有一份

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

最近開始在研究 JavaScript 的物件導向寫法，發現 JavaScript 實在是太彈性了
很多用法很難以理解，不過卻很好用，看來不做點筆記，會完全記不起來，以下會寫好幾篇來記錄目前研究的心得
--

物件導向寫法的筆記 (一) 直接宣告物件

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

最近看書的時候，發現了這個現象
因為 JavaScript 會自動補上沒有打的分號，理論上這是一個很貼心的功能，但在下面這個例子卻會造成不可預期的回傳值

<script type="text/javascript">
function func () 
{
    return 
    {
        name : "leo"
    };
}
console.log(func());
// 結果為 undefined
</script>

 

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

將 checkbox 勾選時，若使用的是下列的語法
$('checkbox').attr('checked', true);
如果一開始沒有在 checkbox 裡定義 checked 的值，則會沒有反應

請改用 prop ，這樣讓屬性不存在的時候，就會先建立該屬性，再給定屬性值，如

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

使用方法很簡單，在要計算的地方開始和結尾使用 console.time 及 console.timeEnd

開始計時
console.time($timer_name);
結束計時

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

網址：http://jsbeautifier.org/
說明：將你的 javascript 程式碼自動格式化，拿來看已經 min 的檔案超好用的
註：
我的程式習慣是中括號要對齊在同一行，所以
第四個下拉選單要設為：Braces on own line

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

因為在 JavaScript 裡，function 也是一個變數(物件)，所以可以當成參數來傳遞
但是那要呼叫的時候呢？就只能用 call 或是 apply 來呼叫
這裡簡單整理一下重點
1. 第一個參數必須是件物，在呼叫的時候，會指派給該 function 的 this 來使用
2. 第二個之後參數，就是呼叫該 function 時所需要的參數

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top

例如要設小數點後兩位
youNumber.toFixed(2);


wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top
說明：
下面這個我在測試 jQuery 時撰寫的程式，有興趣的話可以下載下來玩看看，建議使用 firefox 的 firebug 來觀察呼叫的過程
1. 請在上面那個輸入的地方輸入你要的數字，然後按下面的計算，就會把 a 和 b 丟給 http_ajax.php 做運算，再將結果送回來
2. 請先按 'run test' 按鈕，試試看有無反應，再去按 '$.getScript' 按鈕，然後再試一次

(繼續閱讀...)

wbkuo 發表在 痞客邦 留言(0) 人氣()

▲top
1 2