标签: js-amd

我用 requireJs 构建了一个项目，我的文件结构如下：

js/
   lib/
       noty/
           layouts/
               bottom.js
               top.js
               ...
           themes/
               default.js
           noty.jquery.js
       jquery.js
       jquery-ui.js
   user/
      user.js
   app.js

而我的配置：

js/
   lib/
       noty/
           layouts/
               bottom.js
               top.js
               ...
           themes/
               default.js
           noty.jquery.js
       jquery.js
       jquery-ui.js
   user/
      user.js
   app.js

我担心的是要集成 noty，这是一个我可以在任何模块中使用的通知插件。这个插件需要加载：

js/lib/noty/noty.jquery.js
js/lib/noty/layout/top.js
js/lib/noty/themes/bottom.js

我不确定这样做的方法是什么？

• 连接文件 ?

• 将每个文件加载为依赖项？：

  requirejs(['jquery', 'jquery-ui', 'noty/noty.jquery.js', 'noty/layout/top.js'等]

• 为 requireJs 创建某种插件/模块？

谢谢

我需要在加载模块时加载 css，所以我使用 shims 这样做：

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

requirejs.config({ paths: paths, shim: {
    'easyzoom': {
        'deps': ['jquery'],
        init: function () { loadCss('/lib/easyzoom/css/easyzoom.css'); }
    }}
});

它适用于其他库，如 Datatables，因为它们是非 Amd 模块。但是对于 Amd 模块，requireJs 不会寻找垫片，因此不会提升我的 init 函数。

有没有办法在加载模块后调用回调？或者加载一个 Amd 模块，因为它是一个普通的 javascript 文件来寻找垫片？

代码摘要:

main.js:

    require.config({
        paths: {
            'uiBootstrap': '../lib/bootstrap/angular-bootstrap/ui-bootstrap-tpls.min'
        },
        shim: {***},
        priority: ['angular'],
        deps: [
            './bootstrap'
        ]
            });

bootstrap.js:

    define([
        'require',
        'angular',
        ...
    ], function (require, ng) {
        'use strict';
        require([
                'domReady!',
                'uiBootstrap'
                ], function (document) {
                    ng.bootstrap(document, ['app']);...

app.js:

    define([
        'angular',
         ...
    ], function (ng) {
        'use strict';

        return ng.module('app', [
            ...
            'uiBootstrap'
        ]);
    });

尝试不同的组合时,我遇到了一系列不同的错误.直到我进入ui-bootstrap-tpls.min.js并实际上将所有ui.bootstrap替换为uiBootstrap并修改了模块名称引用,如上所示.并且presto - ui-bootstrap工作正常.

显然,这不是最佳解决方案.

任何人都可以提供深入了解为什么会发生这种情况以及解决问题的更好方法是什么,所以我不会公开使用这个源代码修改过的ui-bootstrap？

谢谢!

当我查看dojo 1.7 amd依赖列表的源代码时,我看到以下内容:

define(["./_ base/kernel","./ has","./"","./ on","./ _ base/array","./ _ base/lang","./ selector/_loader","./ selector/_loader!default"],

我知道感叹号的唯一用途就是插件,我以前没见过这个"!default".
我读了这页"https://github.com/amdjs/amdjs-api/wiki/AMD"并用Google搜索,但我没有找到任何答案.
任何人都可以帮助我!
谢谢
沃尔夫冈

更新:
感谢Ates Goral,感谢您的回答.
现在一切都很清楚了.
然后,对于我这个特殊情况的令人恼火的事情是,"./ selector/_loader"在上面的行中出现两次,一次没有参数,下一次带有参数.我看到有人写"dojo/domReady!",所以我认为必须为插件写一个感叹号,即使没有参数.现在我了解到插件不需要"!" 我会写"dojo/domReady".

另一个更新:
今天我发现了以下有趣的声明(https://github.com/csnover/dojo-boilerplate的 main.js ):

模块名称后面的"!"表示您要使用特殊的插件功能; 如果您只需要"dojo/domReady",它将像任何其他模块一样加载该模块,而不需要任何特殊的插件功能.

我不知道这句话是否正确.它是正确的,那么"./selector/_loader"会有某种混合功能吗？

关于AMD(异步模块定义)我读了这样的阶段:

AMD格式来自于想要一个比今天更好的模块格式"编写一堆具有隐式依赖关系的脚本标签,你必须手动订购"以及一些易于直接在浏览器中使用的东西.

javascript上下文的目的是什么？你能举个例子吗？pro et contro使用AMD？

我正在尝试为我的骨干应用创建命名空间,以便我可以在全球范围内进行呼叫.

通常,我会这样做:

var myNamespace = window.myNamespace || {};
myNamespace.SomeView = Backbone.View.extend(..);

不确定如何使用require js实现此目的

是否有任何干净的方式来加载除js扩展名以外的文件而不是AMD内容？

我使用enforceDefine配置来确保我的实际AMD代码在开发时工作.

到目前为止,我已经设法组建了一个将enforceDefine设置为false 的插件,因此我可以加载第三方库:require(['noamd!handlebars']).这对我来说似乎不太讨厌,但我想知道是否有更好的方法.

我正在测试noext插件,它可以完成它的工作,但也是一种hacky方式.我注意到它将noext参数两次应用于url(test.txt?noext=1&noext=1).我可以忍受,但最佳的我想摆脱所有额外的参数.可以这样做吗？

我在RequireJS中有点像菜鸟; 我最近阅读了API文档,并且遇到了这两个术语:module ID和module name.它们可以互换使用吗？或者他们是不同的概念？

摘录:

http://requirejs.org/docs/api.html#jsfiles

RequireJS默认情况下还假定所有依赖项都是脚本,因此它不希望在模块ID上看到尾随的".js"后缀.在将模块ID转换为路径时,RequireJS会自动添加它.

http://requirejs.org/docs/api.html#config-paths

用于模块名称的路径不应包含扩展名,因为路径映射可以用于目录.在将模块名称映射到路径时,路径映射代码将自动添加.js扩展名.

http://requirejs.org/docs/api.html#modulenotes

加载程序按名称而不是内部路径存储模块.因此,对于相对名称引用,相对于作为引用的模块名称进行解析,然后在需要加载时将该模块名称或ID转换为路径.

我想包括应用程序实例来使用它的事件聚合器显示在这里

当我在视图中包含实例时出现错误.

从App.Bootloader.js中的Requirejs配置文件中解决问题:

require(['App'], function (App){
      App.start();
      });

来自App.js:

define(function (require){

  //...requisite includes $, _, Backbone, Marionette ...

var Layout = require('Layout');

  var App = new Marionette.Application();

        App.addRegions({
            main: '#view_content'
        });

        App.addInitializer(function (){

                App.main.show(new Layout());
                //... adding router etc ...    

                Backbone.Marionette.TemplateCache.loadTemplate = function (template, callback){
                   callback.call(this, Handlebars.compile(template));
                };
                Backbone.history.start();

        });

    return App;
});

来自Layout.js:

define(function(require){
   var View = require('folder/folder/View');
   //template contains #sub div
   var template = require('text!template.html');

   return Marionette.Layout.extend({
      template: template,
      regions: {
         sub: '#sub'
      },
      initialize: function(){
         //wait …