Реализация AMD в JavaScript с использованием RequireJS

Я совершенно новичок в RequireJS, поэтому я все еще пытаюсь найти способ обойти это. У меня был проект, который отлично работал, затем я решил использовать RequireJS, поэтому я все испортил :)

В связи с этим у меня есть несколько вопросов о RequireJS и о том, как он все определяет. У меня есть файловая иерархия внутри папки скриптов:

введите здесь описание изображения

У меня есть следующая строка в моем файле _Layout.cshtml:

<script data-main="@Url.Content("~/Scripts/bootstrap.js")" src="@Url.Content("~/Scripts/require-2.0.6.js")" type="text/javascript"></script>

А вот мой файл bootstrap.js:

require.config({
    shim: {
        'jQuery': {
            exports: 'jQuery'
        },
        'Knockout': {
            exports: 'ko'
        },
        'Sammy': {
            exports: 'Sammy'
        },
        'MD': {
            exports: 'MD'
        }
    },
    paths: {
        'jQuery': 'jquery-1.8.1.min.js',
        'Knockout': 'knockout-2.1.0.js',
        'Sammy': 'sammy/sammy.js',
        'MD': 'metro/md.core.js',
        'pubsub': 'utils/jquery.pubsub.js',
        'waitHandle': 'utils/bsynchro.jquery.utils.js',
        'viewModelBase': 'app/metro.core.js',
        'bindingHandlers': 'app/bindingHandlers.js',
        'groupingViewModel': 'app/grouping-page.js',
        'pagingViewModel': 'app/paging-page.js'
    }
});

require(['viewModelBase', 'bindingHandlers', 'Knockout', 'jQuery', 'waitHandle', 'MD'], function (ViewModelBase, BindingHandlers, ko, $, waitHandle, MD) {
    BindingHandlers.init();

    $(window).resize(function () {
        waitHandle.waitForFinalEvent(function () {
            MD.UI.recalculateAll();
        }, 500, "WINDOW_RESIZING");
    });

    var viewModelBase = Object.create(ViewModelBase);
    ko.applyBindings(viewModelBase);
    viewModelBase.initialize();
});

    require(['viewModelBase', 'bindingHandlers', 'Knockout'], function (ViewModelBase, BindingHandlers, ko) {
        BindingHandlers.init();

        var viewModelBase = new ViewModelBase();
        ko.applyBindings(viewModelBase);
        viewModelBase.initialize();
    });

Затем я реализовал свои модули с помощью функции define. Примером является модуль pubsub:

define(['jQuery'], function ($) {
    var 
        publish = function(eventName) {
            //implementation
        },
        subscribe = function(eventName, fn) {
            //implementation
        }
    return {
        publish: publish,
        subscribe: subscribe
    }
});

Я в основном сделал то же самое для всех своих файлов javascript. Обратите внимание, что фактический файл, содержащий модуль pubsub, находится jquery.pubsub.js в папке /Scripts/utils. Так же и с другими модулями.

ОБНОВЛЕНИЕ:

Хорошо, я обновил свой загрузочный файл, теперь, когда думаю, я понимаю, что такое прокладка и почему я должен ее использовать. Но это все еще не работает для меня, хотя я также объявил все пути, которые, как я думаю, вызвали бы у меня проблемы с их правильным определением. Дело в том, что он даже не входит в мой обратный вызов require внутри файла начальной загрузки, поэтому я предполагаю, что у меня все еще есть проблема в том, как я настраиваю или определяю свои модули?


amd javascript jquery requirejs revealing-module-pattern
person Kassem    schedule 05.09.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Ну, во-первых, если вы собираетесь использовать не-амд-библиотеку, скажем, jQuery, с требованием и передать функцию jQuery обратному вызову, вам нужно указать прокладку с экспортом в требуемой конфигурации, например так:

require.config({
    shim: {
        jQuery: {
            exports: '$'
        }
    },
    paths: {
        jQuery: 'jquery-1.8.1.min.js',
    }
});

Кроме этого, я не уверен, что понимаю, в чем именно заключается ваша проблема.

person Ryan Lynch    schedule 05.09.2012
comment
Райан, спасибо за ответ. Моя проблема в том, что RequireJS неправильно разрешает зависимости. Например, первая ошибка, которая появляется в консоли, — jQuery не определен в модуле pubsub. - person Kassem; 06.09.2012
comment
Где находится файл _Layout.cshtml в вашей структуре каталогов? - person Ryan Lynch; 06.09.2012
comment
Хорошо, я прочитал больше о том, что такое прокладка, как ее настроить и все такое, но я все еще не мог заставить ее работать. Я обновил свой пост. Что я еще делаю не так? Спасибо. - person Kassem; 09.09.2012
comment
Проверьте свою сетевую панель и посмотрите, нет ли ошибок 404. - person Ryan Lynch; 10.09.2012

arrow_upward
0
arrow_downward

Если вы используете ASP.NET MVC, взгляните на Требуется JS для .NET

Проект RequireJS для .NET плавно интегрирует платформу RequireJS с ASP.NET MVC на стороне сервера, используя файлы конфигурации xml, атрибуты фильтра действий, базовый контроллер для наследования и вспомогательные классы.

person Stefan P.    schedule 07.09.2012
comment
Кажется интересным! Но я лучше сначала разберусь, как эта штука работает, прежде чем начну пользоваться чужими библиотеками, но все равно спасибо :) Кстати, я обновил свой пост выше, не могли бы вы взглянуть, пожалуйста? - person Kassem; 09.09.2012

arrow_upward
0
arrow_downward

Я не совсем понял, в чем проблема. Но если это касается JS-библиотек, загружаемых с помощью require.js, то этот загрузочный файл работает для меня:

require.config({
    paths: {
        "jquery": "/scripts/jquery-1.8.2",
        "sammy": "/scripts/sammy-0.7.1"
    },
    shim: {
        "sammy": {
            deps: ["jquery"],
            exports: "Sammy"
        }
    }
});

require(["jquery", "sammy"], function ($) {
    $(document).ready(function () {
        alert("DOM ready");
    });
});

Обратите внимание, что в путях нет '.js'.

Кстати, если вы используете MVC 4, вам больше не нужен @Url.Content в «href» и «src».

person ILog    schedule 10.11.2012