关于 dojo/dijit/dojox 的问题

Question

我正在学习 dojo 开发一个简单的应用程序以供移动客户端使用。我看到一些小部件在 dojox/mobile/* 和 dijit/form/* 之间具有不同的功能。例如，来自 dijit 的 ComboBox 有一个属性到 select，Memory 商店的哪个字段使用 (searchAttrb) 而来自 dojox 没有:

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 存储。然后使用字段 "field" 填充 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

第 01 题

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

dojox/mobile/* 中的小部件设计为尽可能轻便，并特别注意移动体验。

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

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

第 02 题

dojo/domReady! 内部 require.

不需要

第 03 题：

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

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

请注意HTMLdata-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 中仅添加一个 "placeholder"，其中小部件将 hooked/created.

请注意 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 支持的简单小部件场景中创建，服务器端添加了 "spiced" HTML脚本。对于更复杂的 SPA JavaScript 应用程序，更程序化的方法。

Answer 2

看到 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 any custom modules I would use a dojoConfig 并将脚本作为包引用。

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

所以我首先定义一个带有构造函数的 person 对象作为示例，它接受 2 个值。

// 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;
      }
    });
  });

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

然后我将使用引用文件夹 ../my 的 dojoConfig 并创建一个传入 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/

关于 dojo/dijit/dojox 的问题

Questions about dojo/dijit/dojox

javascript

mobile

dojo

combobox

dijit.form