Question

我正在学习dojo开发一个从移动客户端使用的简单应用程序。我发现某些小部件在dojox/mobile/*和dijit/form/*之间具有不同的功能。例如，来自ComboBox的{{1}}具有一个属性，用于选择dijit商店的哪个字段使用Memory），而来自searchAttrb的字段中的dojox没有＆＃39}。 T：

https://dojotoolkit.org/reference-guide/1.10/dojox/mobile/ComboBox.html

https://dojotoolkit.org/reference-guide/1.10/dijit/form/ComboBox.html

第一个问题：您是否会建议将dijit小部件用于将从智能手机使用的应用程序？

我知道dojo/domReady!的含义。但我不确定是否必须在嵌套需求中使用它。例如：

require(["dojo/request/xhr", "dojo/json", "dojo/domReady!"], function (xhr, JSON) {
    xhr("api/dummy", {
        handleAs: "json"
    }).then(function (data) {
        require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], function (Memory, ComboBox) {
            var mystore = new Memory({
                data: data
            });

            var comboBox = new ComboBox({
                id: "idCombo",
                name: "blabla",
                store: mystore,
                searchAttr: "field"
            }, "idCombo").startup();
        });    
    }, function (err) {
        console.log(err);
    });
});

此代码段会检索服务器上的文件并创建Memory商店。然后使用字段＆＃34;字段＆＃34;填充ComboBox。内部dojo/domReady!是否必需？我想不，因为只有在执行外部函数后才能访问该代码。

我看到很多以不同方式编写的dojo个例子。有些人在dojo包含之后声明了所有必需项。其他只需要功能所需的项目，按功能运行。有什么区别？

实施例

http://download.dojotoolkit.org/release-1.10.4/dojo-release-1.10.4/dojox/mobile/tests/test_FormControls.html?theme=Custom

将所有项目声明在一起，并且没有关联的函数，因此没有项目的名称：

<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

<script type="text/javascript">
    require([
        "dojox/mobile",
        "dojox/mobile/parser",
        "dojox/mobile/compat",
        "dojox/mobile/Button",
        "dojox/mobile/CheckBox",
        "dojox/mobile/ComboBox",
        "dojox/mobile/RadioButton",
        "dojox/mobile/Slider",
        "dojox/mobile/TextBox",
        "dojox/mobile/SearchBox",
        "dojox/mobile/ExpandingTextArea",
        "dojox/mobile/ToggleButton"
    ]);

在这里：

https://dojotoolkit.org/documentation/tutorials/1.10/checkboxes/demo/CheckBox.html

require指令后跟一个函数：

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
<script>                
    require(["dijit/form/CheckBox", "dojo/parser", "dojo/domReady!"], function(CheckBox, parser) {

当然他们应该有不同的含义和用例，但我不确定哪个。

Answer 1

看到GibboK报道了1和2我会去3！

在我开始之前，有许多不同的方法与dojo库一起工作，老实说我不确定是否有错误的方法。

我玩过不同的结构，它实际上只取决于你正在做什么，我所做的大多数应用程序都强调代码重用，所以我倾向于只定义我需要的脚本。

而不是

<script type="text/javascript">
    require([
        "dojox/mobile",
        "dojox/mobile/parser",
        "dojox/mobile/compat",
        "dojox/mobile/Button",
        "dojox/mobile/CheckBox",
        "dojox/mobile/ComboBox",
        "dojox/mobile/RadioButton",
        "dojox/mobile/Slider",
        "dojox/mobile/TextBox",
        "dojox/mobile/SearchBox",
        "dojox/mobile/ExpandingTextArea",
        "dojox/mobile/ToggleButton"
    ]);

我倾向于独立地引入我的模块并传递任何全局对象，我也使用dojo/_base/declare我将使用dojoConfig的任何自定义模块并将脚本作为包引用。

var dojoConfig = {
    packages: [
        { name: "my", location: "../my" },
        { name: "package2", location: "/js/package2" }
    ]
};

因此，我首先使用构造函数定义一个person对象作为示例，它接受2个值。

＆＃13;

// in "my/Person.js"
define(["dojo/_base/declare", "dojo/_base/lang"],
  function(declare, lang) {
    return new declare("person", null, {
      fistName: null,
      lastName: null,

      constructor: function(firstName, lastName) {
        this.firstName = firstName;
        this.LastName = lastName;
      },
      getFullName: function() {
        return this.firstName + " "
        this.lastName;
      },
      changeLastName: function(lastName) {
        this.lastName = lastName;
      }
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>

＆＃13;

然后我会使用dojoConfig引用文件夹../my并创建一个传递2个值的新人物对象

define(["dojo/_base/declare", "my/person"],
      function(declare, person) {
        return declare("admin", null, {
          person: null,

          constructor: function() {
            this.person = new person("Jon","Doe");
          },
          fullName: function() {
            console.log(this.person.getFullName);
          },
        });
  });

我不确定这是否能解决您的所有问题

http://dojotoolkit.org/documentation/tutorials/1.10/modules/

Answer 2

问题01

dojox/mobile/*提供了可用于为移动设备构建基于Web的应用程序的小部件。

dojox/mobile/*中的小部件旨在尽可能轻量级，并特别关注移动体验。

使用dojox/mobile/*构建移动设备时，可以排除许多依赖关系，因为它们与dojo基础的依赖性较小。

如果您的目标低端设备使用dijit更多套件桌面应用程序，我建议您使用这些小部件。

问题02

dojo/domReady!内部require不需要它。

对于问题03：

在dojo中，您可以通过声明或编程方式以两种方式声明小部件。

使用声明式方法，您可以在HTML中启动小部件，并使用dojo/parser来挂钩框架提供的JavaScript行为。

请注意HTML data-dojo-type

中的数据属性

示例：

<button type="button" id="myButton" data-dojo-type="dijit/form/Button">
    <span>Click Me!</span>
</button>
<script type="text/javascript" src="lib/dojo/dojo.js"
    data-dojo-config="async: true"></script>
<script type="text/javascript">
    require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],
    function(parser){
        parser.parse();
    });
</script>

使用程序化方法，您完全使用JS，并在HTML中添加一个＆＃34;占位符＆＃34;小部件将被挂钩/创建的地方。

请注意，HTML中没有数据属性data-dojo-type。

示例：

require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
    // Create a button programmatically:
    var myButton = new Button({
        label: "Click me!",
        onClick: function(){
            // Do something:
            dom.byId("result1").innerHTML += "Thank you! ";
        }
    }, "progButtonNode").startup();
});
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>

根据我的个人经验，我多次看到一种声明性方法的使用，这种方法适用于主要在HTML支持下创建的简单小部件方案，其中包括＆＃34; spiced＆＃34;服务器端脚本添加的HTML。对于更复杂的SPA JavaScript应用程序，采用更具编程性的方法。

关于dojo / dijit / dojox的问题

2 个答案: