Как правильно использовать пространства имен javascript в View / PartialView

Question

Я уже давно играю с MVC, но с тех пор, как проект, над которым я работаю, начинает набирать обороты, к нему добавляется все больше и больше людей. Так как я отвечаю за хакинг, чтобы найти «лучшую практику», я особенно осторожен в отношении возможного неправильного использования javascript и хотел бы выяснить, как можно было бы наилучшим образом воспроизвести наши взгляды и частичные взгляды. с JavaScript.

На данный момент у нас есть код, который выглядит следующим образом (только упрощенно, например)

<script type="text/javascript">
    function DisableInputsForSubmit() {
        if ($('#IsDisabled').is(':checked')) {
            $('#Parameters :input').attr('disabled', true);
        } else {
            $('#Parameters :input').removeAttr('disabled');
        }
    }
</script>

<%=Html.SubmitButton("submit", Html.ResourceText("submit"), New With {.class = "button", .onclick = "DisableInputsForSubmit(); if ($('#EditParameters').validate().form()) {SetContentArea(GetHtmlDisplay('SaveParameters', 'Area', 'Controller'), $('#Parameters').serialize());} return false;"})%><%=Html.ResourceIcon("Save")%>

Здесь мы сохраняем форму и публикуем ее на сервере, но отключаем ввод, который мы не хотим проверять, если установлен флажок.

немного контекста

• Пожалуйста, игнорируйте биты Html.Resource *, это управление ресурсами хелперы
• Метод SetContentArea переносит вызовы ajax и GetHtmlDisplay решает URL относительно области, контроллер и действие
• У нас установлены гребенки, которые заботятся о сжатии, минимизации и обслуживание сторонних библиотек и то, что я четко определил как повторно используемый JavaScript

Моя проблема в том, что если кто-то еще определяет функцию DisableInputsForSubmit на другом уровне (скажем, на главной странице или в другом файле javascript), могут возникнуть проблемы.

Много видео в Интернете ( Resig о дизайне jQuery или Дуглас Крокфорд за его выступление в Google о хороших частях javascript) рассказывают об использовании пространств имен ваши библиотеки / фреймворки. Пока все хорошо, но в этом случае это выглядит немного излишне. Каков рекомендуемый путь? Должен ли я:

• Создать весь фреймворк внутри пространства имен и ссылаться на него глобально в приложении? Похоже, много работы для чего-то такого крошечного, как этот метод
• Создайте каркасную структуру и используйте локальный javascript в моих представлениях / частичках, в конечном итоге переводя части встроенного javascript в состояние платформы, в зависимости от того, какое использование мы используем? В этом случае, как я могу чисто изолировать встроенный JavaScript от других представлений / частичных?
• Не беспокойтесь и положитесь на тестирование пользовательского интерфейса, чтобы уловить проблему, если она когда-либо случится?

На самом деле, я думаю, что даже код JS, который я написал, который находится в отдельном файле, выиграет от ваших ответов:)

Answer 1

В целях безопасности / передовой практики вы всегда должны использовать шаблон модуля.Если вы также используете обработчики событий вместо того, чтобы вставлять javascript в атрибут onclick, вам не нужно беспокоиться о конфликтах имен, и ваш js легче читать:

<script type="text/javascript">
(function() {
    // your button selector may be different
    $("input[type='submit'].button").click(function(ev) {
        DisableInputsForSubmit();

        if ($('#EditParameters').validate().form()) {  
            SetContentArea(GetHtmlDisplay('SaveParameters', 'Area','Controller'), $('#Parameters').serialize());
        } 
        ev.preventDefault();
    });

    function DisableInputsForSubmit() {
        if ($('#IsDisabled').is(':checked')) {
            $('#Parameters :input').attr('disabled', true);
        } else {
            $('#Parameters :input').removeAttr('disabled');
        }
    }
})();
</script>

Это легко извлечьво внешний файл, если вы решите.

Редактировать в ответ на комментарий:

Чтобы сделать функцию многократно используемой, я бы просто использовал пространство имен, да.Как то так:

(function() {

    MyNS = MyNS || {};

    MyNS.DisableInputsForSubmit = function() {
        //yada yada
    }

})();