javascript - JavaScript 代码应该掌握多少 DOM 知识？

Question

我在我的网站上使用 C# 和 ASP.NET MVC 3 实现 OpenID 和 OAuth。我基于 DotNetOpenAuth用于后端和openid-selector对于前端。

我喜欢 openid-selector但它没有开箱即用的 OAuth 支持，所以我开始调整它(在 StackOverflow's implementation 和 jsbeautifier 的帮助下)。

我发现了很多这样处理 DOM 的代码:

function highlight(boxId) {
    // remove previous highlight.
    var highlight = $('#openid_highlight');
    if (highlight) {
        highlight.replaceWith($('#openid_highlight a')[0]);
    }
    // add new highlight.
    $('.' + boxId).wrap('<div id="openid_highlight"></div>');
};

或

function useInputBox(provider) {
    var area = $('#openid_input_area');
    var id = 'openid_username';
    var html = '';
    var value = '';
    var style = '';
    var label = provider.label;
    if (label) {
        html = '<p>' + label + '</p>';
    }
    if (provider.name == 'OpenID') {
        id = this.input_id;
        value = 'http://';
        style = 'background: #FFF url(' + spritePath + ') no-repeat scroll 0 50%; padding-left:18px;';
    }
    html += '<input id="' + id + '" type="text" style="' + style + '" name="' + id + '" value="' + value + '" />'
         +  '<input id="openid_submit" type="submit" value="' + this.signin_text + '"/>';
    area.empty();
    area.append(html);
    $('#' + id).focus();
};

在我看来，他们都对 DOM 假设过多(太多的 ID，或 DOM 的当前状态)。

让 javascript 与 DOM 紧密耦合可以吗？避免这样的代码并遵循侵入性较小的方法的最佳方法是什么？

我想令我困惑的是电话:

openid.init('openid_identifier', '', 'http://cdn.sstatic.net/Img/openid/openid-logos.png?v=8', true);

当脚本文件中已经有这么多假设时。

Answer 1

我会争论，因为你怀疑这是一件坏事。

Javascript UI 开发中非常缺乏设计模式。我猜很多人都是直接从 html 开始学习一些 jQuery，然后编写 Web 应用程序。

一个简单的系统(我发现)确实能更好地处理这个问题，它是 backbone.js。源代码清晰易读，并且很好地将 View 关注点与业务逻辑关注点分开。

• http://documentcloud.github.com/backbone/
• http://martinfowler.com/eaaDev/uiArchs.html