Сколько знаний о DOM должен иметь код JavaScript?

Question

Я внедряю OpenID и OAuth на моем сайте, в C# и ASP.NET MVC 3.Я базируюсь на DotNetOpenAuth для внутреннего интерфейса и openid-selector для внешнего интерфейса.

Мне понравилось openid-selector но он не имеет поддержки OAuth из коробки, поэтому я начал адаптировать его (с помощью реализации StackOverflow и 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 (слишком много идентификаторов или текущее состояние 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 и написанию веб-приложений.

Простая система (как мне кажется), которая справляется с этим лучше, это backbone.js.Исходный код разборчив, и он довольно хорошо отделяет проблемы представлений от проблем бизнес-логики.

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

Answer 2

Также для более MVVM-подхода (он же привязка данных) knockoutjs - опция.У них также есть хороший интерактивный учебник , с которого можно начать.