Hyn*_*nek 13 dojo amd javascript-framework
我真的是dojo的新手但是当我开始使用dojo版本1.7.2开发新的应用程序时,我也想使用新的AMD语法来实现功能.不幸的是我似乎没有得到它.:-(
让我最烦的是我不能简单地调用任何"require"-block中的函数.例如,我有一个页面,在开始时创建一个动态表,每行有几个小部件.然后我有一个按钮,每按一次就会添加一个空行.
没有AMD语法就很容易:
- 把我所有的"dojo.require()"放在HEAD中
- 然后创建一堆我自己的函数来创建表和小部件
- 添加行函数可以轻松访问任何全局变量我以前的功能填写了
但对于AMD来说,它是这样的:
初始函数创建表和小部件:
function fillReportTable(repId) {
require(["dojo/dom-construct", "dojo/dom-attr", "dijit/form/FilteringSelect",
"dojo/data/ItemFileReadStore", "dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/Select", "dojo/store/Memory"],
function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {
// a lot of code to create the table, consisting of SEVERAL functions
function createNewRow(tbl) { ...}
function function1 () {... }
function function2 () {... }
function function3 () {... }
}
现在,"添加空行"按钮调用自己的函数"addEmptyRow".
但是在这个函数中我必须:
- 再次为每个dojo模块做一个其他的需求
- 我不能使用任何"fillReportTable"函数"内部"的函数.例如"createNewRow"函数
function addEmptyRow() {
require(["dojo/dom-construct", "dojo/dom-attr", "dijit/form/FilteringSelect",
"dojo/data/ItemFileReadStore", "dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/Select", "dojo/store/Memory"],
function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {
// a lot of code to create the table, consisting of SEVERAL functions
}
这一切似乎都与AMD如此复杂.
或者我错过了一些明显的东西？
对于AMD,如果将代码分成许多小函数,那么你是否会重新执行EACH函数中的"require"？或者你把所有的功能都放在一个"需要"的完整列表中？
如果你是第二种方式,你怎么能从小部件事件中调用这些函数？
Pau*_*ime 11
最简单的方法是定义自己的模块.首先看一下本教程:
http://dojotoolkit.org/documentation/tutorials/1.7/modules/
现在定义自己的模块,例如"./js/mymodules/mymodule.js"(相对于HTML页面):
define([
"dojo/dom-construct",
"dojo/dom-attr",
"dijit/form/FilteringSelect",
"dojo/data/ItemFileReadStore",
"dijit/form/ComboBox",
"dijit/form/DateTextBox",
"dijit/form/Select",
"dojo/store/Memory"
], function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {
function fillReportTable(repId) {
// a lot of code to create the table, consisting of SEVERAL functions
function createNewRow(tbl) { ...}
function function1 () {... }
function function2 () {... }
function function3 () {... }
}
function addEmptyRow() {
// a lot of code to create the table, consisting of SEVERAL functions
}
// Return an object that exposes two functions
return {
fillReportTable: fillReportTable,
addEmptyRow: addEmptyRow
}
});
并像这样使用你的模块:
<html>
<head>
<script>
var dojoConfig = {
baseUrl: "./js/",
packages: [
{ name: "dojo", location: "lib/dojo" },
{ name: "dijit", location: "lib/dijit" },
{ name: "dojox", location: "lib/dojox" }
]
};
</script>
<script data-dojo-config="async: true" src="js/lib/dojo/dojo.js"></script>
</head>
...
<script>
require([
"mymodules/mymodule"
], function (mymodule) {
mymodule.fillReportTable(...);
mymodule.addEmptyRow(...);
});
</script>