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 的需要