使用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

回答

相關問題