使用RequireJS在JavaScript实现AMD

我完全陌生的RequireJS所以我仍然试图找到我周围的路。我有一个项目工作完全正常，然后我决定使用RequireJS，所以我搞砸了:)使用RequireJS在JavaScript实现AMD

这样一来，我有几个关于RequireJS的问题以及它如何计算出所有内容。我有脚本文件夹中的文件层次：

enter image description here

我有我的_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文件都做了同样的事情。请注意，/Scripts/utils文件夹中包含pubsub模块的实际文件是jquery.pubsub.js。其他模块也是如此。

UPDATE：

好吧，我更新了我的引导文件，现在我想我了解垫片是什么，为什么我应该使用它。但它仍然不适合我，尽管我还宣布了所有我认为会让我纠正错误的方法。问题在于，它甚至没有进入bootstrap文件中的require回调，所以我想我在配置或定义模块方面仍然存在问题？

来源

2012-09-05 Kassem

那么，如果你打算使用一个非amd库，用jQuery来描述require，并且把jQuery函数传递给回调函数，那么你需要在你的require配置文件中指定一个带有导出的填充块，就像所以：

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

除此之外，我不知道我明白你的问题到底是什么。

来源

2012-09-05 21:06:36

Ryan，谢谢你的回答。我的问题是RequireJS没有正确解析依赖关系。例如，控制台中出现的第一个错误是pubsub模块中的“jQuery未定义”。 – Kassem

目录结构中的_Layout.cshtml文件在哪里？ –

好的，我已经阅读了更多关于什么是垫片，以及如何配置它们以及所有这些，但我仍然无法实现它的工作。我更新了我的帖子。我还在做什么错了？谢谢。 – Kassem

如果您正在使用ASP.NET MVC看看RequireJS for .NET

的用于.NET项目RequireJS顺利集成了ASP.NET MVC使用XML配置文件，操作筛选属性服务器端的RequireJS框架，继承和辅助类的基础控制器。

来源

2012-09-07 08:35:24

看起来很有趣！但是我宁愿在开始使用其他人的图书馆之前先理解这件事情是如何工作的，但无论如何感谢:)顺便说一句，我已经更新了我的帖子，请看看吗？ – Kassem

我没有完全理解的问题是什么。但是，如果它涉及到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' 了。

来源

2012-11-10 14:01:24 ILog

使用RequireJS在JavaScript实现AMD

回答

相关问题