如何定义模块并使用它在dojo与AMD？ [英] How to define Module and use it in dojo with AMD?

问题描述

我正在维护和扩展一个是AMD前的旧项目。
我想向应用程序添加一个图表。为此，我创建了一个js文件如下：

  define（[dojox / charting / Chart，... dijit / Dialog，dojo / dom-construct]，
函数（Chart）{
 
 function showDailyChart（data）{
 //显示图表的代码在一个对话框
} 
 return customModules.singleChart; 
}）; 
  

我已将此文件另存为 /customModules/singleChart.js

在我的主HTML页面中，我已将其添加到包中，如下所示：

  var dojoConfig = {parseOnLoad：true，
 packages：[....，{name：customModules，
location：location.pathname。替换（/ \ / [^ /] + $ /，）+/ modules} 
]}; 
  

我想称之为的功能是AMD之前的功能。所以我叫它如下：

  dojo.require（customModules.singleChart）; 
。 
。 
。 
 customModules.singleChart.showDailyChart（data）; 
  

我可以看到 /customModules/singleChart.js 加载在Firebug控制台以及Net Tab中。但是没有 customModules.singleChart 对象。奇怪的是，也没有错误。我已经在Firebug以及Google Chrome的开发人员工具中进行了测试。

使用 dojo.require调用AMD模块的正确方法是什么？ ？还是有更好的方法来做我需要的？

解决方案

要使用您的widget与AMD之前的代码，您需要使用dojo / _base / define声明你的模块，并且你的define函数的第一个参数是以dot符号表示的模块ID，如下所示：

  define（[dojo / _base / declare，dojox / charting / Chart，....dijit / Dialog，dojo / dom-construct]，function（declare，Chart）{
 return declare（customModules.singleChart，null，{
 showDailyChart：function（data）{
 //在对话框中显示图表的代码
} 
} ）; 
}）; 
  

声明函数的第二个参数是继承自的类的类或列表，或者为null

然后，您可以使用这个小部件，使用new关键字实例化。

  var foo = new customModules.singleChart（）; 
 foo.showDailyChart（data）; 
 ... 
  

如果你想要一个静态功能，你可以这样做：

  define（[dojo / _base / declare，dojox / charting / Chart，....dijit /对话框，dojo / dom-construct]，function（declare，Chart）{
 var widget = declare（customModules.singleChart，null，{
}）; 
 
 widget.showDailyChart = function（data）{
 //在对话框中显示图表的代码
} 
 
 return widget; 
}）; 
  

然后，您可以这样使用：

  customModules.singleChart.showDailyChart（数据）; 
  

这里有更多细节： http://dojotoolkit.org/reference-guide/1.9/dojo/_base/declare.html#signature

I am maintaining and extending an old project which was pre-AMD. I wish to add an Chart to the application. for this, I have created a js file as follows:

define(["dojox/charting/Chart",...."dijit/Dialog","dojo/dom-construct"],
    function (Chart) {

    function showDailyChart(data){
       //code to show the chart in a dialog
     }
    return customModules.singleChart;
});

I have saved this file as /customModules/singleChart.js

In My main HTML Page, I have added it to the packages as follows:

var dojoConfig = { parseOnLoad: true,
        packages: [....,{"name":"customModules",
             "location":location.pathname.replace(/\/[^/]+$/, "")+"/modules" }
                         ]};

The function from which I want to call it, is pre-AMD. So I am calling it as follows:

dojo.require("customModules.singleChart");
.
.
.
customModules.singleChart.showDailyChart(data);

I can see that /customModules/singleChart.js is loaded in the Firebug console as well as Net Tab. However there is no customModules.singleChart object. Strangely enough there is no error either. I have tested this in Firebug, as well as Google Chrome's developer tools.

What is the correct way to call an AMD Module using dojo.require? Or is there a better way to do what I need?

解决方案

To use your widget with pre-AMD code, you need to declare your module using dojo/_base/define, and have the first argument of your define function be the module ID in dot notation, like this :

define(["dojo/_base/declare","dojox/charting/Chart",...."dijit/Dialog","dojo/dom-construct"], function (declare, Chart){
    return declare("customModules.singleChart", null, {
        showDailyChart: function(data){
           //code to show the chart in a dialog
         }
    });
});

The second argument to the declare function is the class or list of classes you inherit from, or null in this case.

You can then use this widget by instantiating it with the "new" keyword.

var foo = new customModules.singleChart();
foo.showDailyChart(data);
...

If instead you want a static function, you can do it like this :

define(["dojo/_base/declare","dojox/charting/Chart",...."dijit/Dialog","dojo/dom-construct"], function (declare, Chart){
    var widget = declare("customModules.singleChart", null, {
    });

    widget.showDailyChart = function(data){
       //code to show the chart in a dialog
    }

    return widget;
});

You can then use it like this :

customModules.singleChart.showDailyChart(data);

More details here : http://dojotoolkit.org/reference-guide/1.9/dojo/_base/declare.html#signature

这篇关于如何定义模块并使用它在dojo与AMD？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！