以Prototype为例说明现代的js用法（适用于其它js库）-优快云博客

1、选择元素
旧用法

document.getElementById()

新用法

$()或$$()

评论
新的用法不限于用id选择元素，一般的库都支持CSS的选择语法，无论单选还是多选都非常方便。

2、namespace
旧用法

function submitBreakfastLogEntry(event) {
    . . . . . .
}
function cancelBreakfastLogEntry(event) {
    . . . . . .
}

新用法

var BreakfastLog = {
    submitEntry: function(event) {
        . . . . . .
    },
    cancelEntry: function(event) {
        . . . . . .
    }
};

评论
这主要是为了防止新函数与已有函数发生重名，在较大一点的项目中这确实是一个问题。

3、 在适当的时候执行页面初始化的js代码
旧用法
整个页面下载完毕后执行onload事件。

<body οnlοad="some_function()">. . . . . .</body>

新用法
DOM tree创建完毕，但所有资源（比如一些大的图片）尚未下载完的时候，运行js代码。

document.observe("dom:loaded", function() {
    . . . . . .
});

评论
页面加载完成后，我们可能会对页面进行一些初始化操作。比如我们要隐藏某个链接，按照旧的用法，如果页面有几个较大的图片下载的很慢，这时DOM tree已经构建完毕并且页面的绝大部分已经显示给用户了（包括本该被隐藏的链接），而onload事件还没有执行，这时用户就有可能点击这个链接从而引发错误。

4、仿照CSS的风格进行事件监听
旧用法

<input type="submit" id="save_as_draft" value="Save as Draft" οnclick="postBreakfastLogEntryWithStatus('draft');"/>
<input type="submit" id="save_and_publish" value="Save and Publish" οnclick="postBreakfastLogEntryWithStatus('published');"/>
<input type="submit" id="discard" value="Discard" οnclick="postBreakfastLogEntryWithStatus('discarded');"/>

新用法

$('save_and_publish', 'save_as_draft', 'discard').each( function(button) {
    button.onclick = postBreakfastLogEntry;
});

评论
理想状态下，页面的结构(HTML)、行为(js)、展现(CSS)的代码应该是分开的。HTML是主干，js和css通过类似AOP的方式把相关的属性和行为赋给HTML。