javascript代码应该具备多少DOM知识

How much knowledge of the DOM should javascript code have?

本文关键字：多少 DOM 知识 代码 javascript      更新时间：2023-09-26

我正在C#和ASP.NET MVC 3中的站点上实现OpenID和OAuth。我以DotNetOpenAuth作为后端，以openid选择器作为前端。

我喜欢openid选择器，但它没有开箱即用的OAuth支持，所以我开始对它进行调整（借助StackOverflow的实现和js美化程序）。

我发现了很多这样处理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);

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

我认为，因为你怀疑这是一件坏事。

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

backbone.js是一个简单的系统（我发现），它能更好地处理这一问题。源代码清晰可见，它很好地将视图问题与业务逻辑问题分离开来。

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

对于更MVVM的方法（也称为数据绑定），knockoutjs也是一个选项。他们还有一个很好的互动教程，让你开始。

相关文章：