javascript & jquery 優化問題

Question

我正在創建一個通過 JavaScript 本地化的網站，但是......我有很多頁面，每個頁面中都有很多文本輸入項，我正在使用這個插件

http://code.google.com/p/jquery-watermark/

要在我的輸入上應用水印，現在我只需要指南以獲得更好的性能。

1. 所有水印都應該在一個 javascript 文件中，還是每個頁面都應在其自己的 javascript 文件中擁有自己的水印？

2. 我應該創建一個 JavaScript 文件，其中包含所有系統$(object).watermark() （我按類選擇對象），還是每個頁面都有自己的 JavaScript 文件必須包含 ZF590B4FDA2C30BE28DD3C8C3BC3 行水印代碼？

Answer 1

TBH 我不會這樣做。 我會在 HTML 中應用水印（或眾所周知的占位符），如下所示：

<input type="text" placeholder="Hello mum!" />

然后我會使用 jQuery 和 Moderizer 來確定當前瀏覽器是否支持占位符。 如果是這樣，您不必擔心，因為已經完成了艱苦的工作。 如果沒有，您可以使用如下腳本：

if ( !Modernizr.input.placeholder )
{
    $( '[placeholder]' ).focus( function()
    {
        var i   = $( this );

        if ( i.val() === i.attr( 'placeholder' ) )
        {
            i.val( '' );
        }
    }).blur( function()
    {
        var i   = $( this );

        if ( i.val() === '' )
        {
            i.val( i.attr( 'placeholder' ) );
        }
    }).blur();
}

這個腳本本質上是檢查用戶是否點擊了輸入。 如果有，它將占位符作為文本刪除。 如果他們留下輸入並且在那里留下了文本，它不會改變任何東西。 但是，如果輸入為空，則使用占位符填充它。

我希望這會有所幫助。

Answer 2

一般：通常你會在頁面特定的 javascript 中有頁面特定的東西。

你的問題; 假設您的 html 看起來像這樣；

<input type='text' name='bla'></input>

你可以重寫它來閱讀；

<input type='text' name='email' class='watermark' data-watertype='email'></input>

您可以應用單個 javascript 片段並將其包含在整個頁面中；

    var texts={ "email":"Please enter a valid email address", .... },
        elems=jQuery("input.watermark"),
        elem,
        watermarkType;

    elems.each(function(i,elem){
        elem=jQuery(elem);
        watermarkType = texts[ elem.attr("data-watertype") ] || "";
        if (watermarkType.length!==0){
            //apply the watermark
            elem.watermark(watermarkType);
        }
    }
//this isn't tested but should work as expected!

從而解決了為每個頁面應用水印的特定 javascript 的需要