JavaScript-код в MVC - комментарий и предложения


Прежде чем я начну работать на JavaScript и тяжелых приложений, я бы хотел, чтобы Вы комментарий Мой с JS и MVC подход.

  • Как его можно улучшить?
  • Существуют ли какие-либо ошибки/проблемы, которые я должен знать?

Так как приложение будет иметь несколько модулей, я хотел бы разделить код на отдельные модули, которые могут быть загружены как требуется (какие предложения как это сделать?)

HTML-код

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="container">
            <input type="button" id="button" value="world"/>
            <div id="message"></div>
        </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js" type="text/javascript"></script>        
        <script type="text/javascript" src="project.js"></script>
        <script type="text/javascript" src="utils.js"></script>
    </body>
</html>

project.js

var GLOBAL = {} || GLOBAL;

GLOBAL.SETTINGS = function($) {

    var global = {
        fontColor:"red"
    }

    return {
        MODEL : {
            text : "Text Inside The Containter"
        },

        VIEW : {
            container: $(".container")
        },

        CONTROLLER : {
            style : function() {
                GLOBAL.SETTINGS.VIEW.container.css("color",global.fontColor).append("<h2>" + GLOBAL.SETTINGS.MODEL.text + "<h2>");
            }
        },

        init : function() {
            GLOBAL.SETTINGS.CONTROLLER.style();
        }
    }
}(jQuery);

GLOBAL.SETTINGS.init();

utils.js

GLOBAL.UTILS = function($) {

var text = "SOMETHING"; //local

    return {
        MODEL : {
            text : "World"
        },

        VIEW : {
            button :   $("#button"),
            container: $("#message")
        },

        CONTROLLER : {
            hello : function(msg) {
                GLOBAL.UTILS.VIEW.container.append( "Hello " + GLOBAL.UTILS.MODEL.text + "<br/>" );
            }
        },

        EVENTS : function() {
            GLOBAL.UTILS.VIEW.button.click( function() {
                GLOBAL.UTILS.CONTROLLER.hello();
            });
        },

        init : function() {
            GLOBAL.UTILS.EVENTS();
        }
    }
}(jQuery);

GLOBAL.UTILS.init();


1024
2
задан 26 июля 2011 в 06:07 Источник Поделиться
Комментарии
2 ответа

Я бы настоятельно рекомендуем вам взглянуть на Spine.js. Это маленькая библиотека, разработанная Алекс Маккоу.

Чтобы полностью понять его подход (который похож на один из Backbone.js), вы также должны взглянуть на его книгу "Разработка веб-приложений на JavaScript", где он высоко оценивает использование паттерна MVC.

Пример приложения, где позвоночник может быть найден здесь:
http://maccman-holla.heroku.com/

2
ответ дан 28 июля 2011 в 03:07 Источник Поделиться


Поскольку вся приложение будет иметь несколько модулей, я хотел бы разделить
код в отдельные модули, которые могут быть загружены как требуется (любой
предложения как это сделать?)

Использовать динамический модуль загрузчика, таких как помощью RequireJS. Вы можете использовать его, чтобы загрузить модули динамически с помощью AJAX, и она имеет инструмент оптимизации, объединять скрипты в один файл, чтобы уменьшить количество HTTP-запросов на сервер.


Как его можно улучшить?

Придерживаться общего правила для именования переменных. Не используйте все заглавные на обычные переменные, только если вы хотите указать значение константы.

Использовать имя, специфичные для вашей appliation/сайт, организации или компании, а не глобальной глобальной переменной, ссылающейся на корень вашей библиотеки, если таковые имеются: она уже не нужна, используя асинхронный модуль определения с помощью RequireJS.


Существуют ли какие-либо ошибки/проблемы, которые я должен знать?

Вы должны думать о том, как вы хотите обрабатывать связи между модулями. Последняя тенденция абстрагироваться и отделить сообщения, используя схему публикация/подписка.

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

1
ответ дан 28 июля 2011 в 01:07 Источник Поделиться