jQuery tmpl

动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。

这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版,JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法。

就我自己的几次使用,感觉很不错,用更加直观方面的 HTML 写法而不是 JavaScript 拼凑 来写结构,然后用 JSON 变量来占位的方式来填充数据,代码看起来好多了。

Update

需要说明的是,由于我相对熟悉的是 PHP,尽管是使用 $ 作为变量开始符号,但与 tmpl 的 ${} 标识没有冲突;而 JSP 本身使用 ${} 来作为变量内容输出,所以在 JSP 会导致模版无法正常工作,这里是一些相关问答

解决方法:

  1. 禁用(本项目) JSP 的 ${} 标签功能, 方法见相关问答;但明显代价太大。
  2. 对 tmpl 中的 ${} 进行转义,即使用 \${}的方式;这样将静态 demo 转为 开发版本需要细心更正一下。
  3. 不想用模版的就依然手动拼字符串;仍想用模版的就切换到别的不是使用 ${} 来解析的模版。

退出或刷新页面时提示

先看代码

1
2
3
4
5
6
7
8
9
10
11
12
// as my test, Opera do not fire the event
window.onbeforeunload = function (e) {
    e = e || window.event;
   
    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure to quit?';
    }
   
    // For Safari and Chrome
    return 'Sure to quit? Data might not be saved.';
};

继续阅读“退出或刷新页面时提示”

使用 JavaScript 生成随机字符串

用途:如 Oauth 认证等需要的等长随机字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * By James from http://www.xinotes.org/notes/note/515/
 */

function randomString(length) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
   
    if (! length) {
        length = Math.floor(Math.random() * chars.length);
    }
   
    var str = '';
    for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
    }
    return str;
}

/* examples */

// generate a random string of random length
randomString();

// generate a random string of length 8
randomString(8);

Tab 切换可能引发 flash 重新下载

Tab 切换是一个常见的功能特性,称呼好像很多,比如焦点图、舌签切换等,我常叫为 Tab 切换。一个示意图如下:

yahoo tab 切换

普通的切换显示文字、图片,甚至是 Ajax 加载一般都不会有什么问题,不过,最近在做 flash 切换的时候发现了个问题,采用 display:block / none 来控制显示隐藏会导致 flash 重新加载。需要说明的是,并不是简单的重新渲染,而是重新请求下载。

继续阅读“Tab 切换可能引发 flash 重新下载”

允许复制

想复制些东西却发现用 JavaScript 禁止了复制,于是想起了 keakon 的『破解网页禁止复制的Chrome插件:Enable Copy』,不错相对于插件,我更喜欢 bookmarklet 这种形式,于是将插件中的代码提取了出来(作者介意否?)

1
javascript:(function(){var doc = document;var body = doc.body;body.onselectstart = body.oncopy = body.onpaste = body.onkeydown = doc.onselectstart = doc.oncopy = doc.onpaste = doc.onkeydown = doc.oncontextmenu = null;})();

document.write

document.write(markup)是一个常用的简单的语句,但其中也蕴藏着一些东西。

document.write(markup)是一个比较常用的语句,不过对它的规定其实没真正看过,直到看到有人问在jQuery的ready使用document.write的问题才令我想起去看看语言定义。

在MDN上找到相关说明

向由document.open打开的文档流写入字符串。

继续阅读“document.write”

鼠标页面坐标

一个常见的需求,无数人写过的东西,记录于此。

1
2
3
4
5
6
7
8
function mousePos (event) {
    e = event || window.event;
    doc = document.body || document.documentElement;
    return {
        'x' : e.pageX || e.clientX + doc.scrollLeft,
        'y' : e.pageY || e.clientY + doc.scrollTop
    };
}

JS版本的迅雷、旋风和普通链接的转换

偶尔看到个PHP版本的迅雷、快车、QQ旋风专有链接的转换,然后看了一下迅雷、快车、QQ旋风专链转换原理,再加上看到说除IE外的浏览器都已经支持base64的加密、解密,其中btoa是加密,atob是解密。一时兴起,就写了个JS版本。

demo地址

Table注意事项

首先是一段 HTML 代码:

1
2
3
4
5
6
<table id="tb">    
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>           
    <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>

DOM解析

对于一段 table 的 HTML 代码,即使没有显式写出 tbody 结构,浏览器在解析的时候都会加上 tbody 结构。所以,对于以上代码,若想获取第一行,需要使用代码:

1
2
document.getElementById('tb').lastChild.firstChild; //第一行
//document.getelementById('tb').lastChild 得到的不是最后一行而是 tbody

继续阅读“Table注意事项”