1

在定义要由 JSP 标记引用的单独 javascript 模块时，我正在尝试遵循最新的 Dojo1.9 最佳 AMD 实践。我曾经在同一个 JSP 文件 MyJayEsspEe.jsp 中有一个大的 javascript 部分，其中 javascript 部分定义了由各种元素 onClick 属性调用的函数。现在，我使用 Dojo 定义机制将 javascript 分离到一个名为 MyCallbacks.js 的新文件中。

MyCallbacks.js 的格式如下：

define(["dojo/dom", "dojo/dom-style", "dojo/has", "dijit/registry", "dojo/on"], 
 function (dom, domStyle, dojoHas, registry, on) {
...
   function clickedOnButton1() {
      console.log("Clicked on button1");
   }
   function clickedOnLinkTwo() {
      console.log("Clicked on second link");
   }
...    
   return {
      clickedOnButton1: clickedOnButton1,
      clickedOnLinkTwo: clickedOnLinkTwo
   }
});

在 MyJayEsspEe.jsp 文件中，我目前正在使用丑陋的标记，其中包括：

...
    <button data-dojo-type="dijit/form/Button" type="button" onclick="require(['commonjs/MyCallbacks'], function(mycallbacks) {mycallbacks.clickedOnButton1();});">First Button</button>

    <a id="testLinkId" href="#" onclick="require(['commonjs/MyCallbacks'], function(mycallbacks) {mycallbacks.clickedOnLinkTwo();});">Link Two</a>
...

但我希望有一种方法来定义模块并要求它，以便在标记中我可以有更清晰的回调，如下所示：

...
    <button data-dojo-type="dijit/form/Button" type="button" onclick="mycallbacks.clickedOnButton1();">First Button</button>

    <a id="testLinkId" href="#" onclick="mycallbacks.clickedOnLinkTwo();">Link Two</a>
...

我一直在查看定义模块和回调的 Dojo 参考文档，但到目前为止还没有找到指向我正在寻找的干净解决方案的指针。有比我一直使用的更清洁的解决方案吗？

谢谢你的时间，格雷戈尔

4

2 回答 2

0

如果您无法在 JS 端创建完整的小部件并使用模板附加事件，则使用当前示例，您可以这样编写：

<button data-dojo-type="dijit/form/Button" type="button" onclick="require('commonjs/MyCallbacks').clickedOnButton1();">First Button</button>

<a id="testLinkId" href="#" onclick="require('commonjs/MyCallbacks').clickedOnLinkTwo();">Link Two</a>

你的 JS 看起来有点奇怪，你如何返回你的函数。通常它会这样写：

define(["dojo/dom", "dojo/dom-style", "dojo/has", "dijit/registry", "dojo/on"], 
   function (dom, domStyle, dojoHas, registry, on) {

      var MyCallbacks={};

      MyCallbacks.clickedOnButton1 = function() {
         console.log("Clicked on button1");
      };

      MyCallbacks.clickedOnLinkTwo = function() {
         console.log("Clicked on second link");
      };
      ...
      return MyCallbacks;
});
于 2013-10-30T21:56:34.753 回答
0

作为最佳实践，始终建议将小部件的行为封装在其自身中。小部件应该处理的所有回调都应该在小部件中定义。在单个模块中定义所有回调会破坏模块的模块化和可移植性。

要回答您的问题：

<script>
    require(['dojo/dom', 'dojo/on', 'commonjs/MyCallbacks'], function(dom, on, MyCallbacks) {
      // register all event handlers here
      on(dom.byId('testLinkId'), 'click', MyCallbacks.clickedOnLinkTwo);
    });
</script>

<a id="testLinkId" href="#">Link Two</a>
于 2013-11-01T04:42:57.217 回答