Dojo需要()和AMD(1.7)

Question

我有一个heckuva时间过渡到Dojo和新的AMD结构,我真的希望有人可以对整个概念有所了解.过去几周我一直在Google上生活,试图找到关于不使用的信息,但是使用它的结构和设计模式趋势.

我觉得奇怪的是,对于一个相对复杂的javascript应用程序,例如需要创建和设置Dijits的主页面,创建的DOM元素等,我需要,因此使用,不同模块的TON否则在AMD系统之前的dojo命名空间中可用(或者,至少不分配给23个不同的vars).

例:

require(['dijit/form/ValidationTextBox', 'dijit/form/SimpleTextarea', 'dijit/form/CheckBox', 'dijit/Dialog', 'dijit/form/Form'])
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], 
function(ready, parser, style, registry, dom, event, construct){
    //...etc
}

这只是我正在处理的其中一个页面的一些模块.当然,有一种更好的,非破坏性的未来发布方式来访问这些方法,等等.我的意思是,我真的必须导入一个全新的模块才能使用byId()吗？而另一个连接事件？最重要的是,通过必须在函数参数列表中分配变量名来创建的所有混乱只是看起来像这样的后退.

我想也许你require()只在需要的时候才能使用模块,比如query模块,但是如果我不止一次需要它,那么分配给它的变量很可能超出范围,我需要将它放入domReady!或ready调用. reaalllly .... ??!

这就是为什么我只能假设我对道场缺乏了解.

我真的已经查看并搜索并购买了书籍(虽然是AMD之前的一本),但这个图书馆真的让我为我的钱买单.我很欣赏任何人都能看到的光.

编辑示例

require(['dijit/form/ValidationTextBox'])
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], function(ready, parser, style, registry, dom, event, construct){
    /* perform some tasks */
    var _name = new dijit.form.ValidationTextBox({
        propercase : true,
        tooltipPosition : ['above', 'after']
    }, 'name')

    /*
    Let's say I want to use the query module in some places, i.e. here.
    */
    require(['dojo/query', 'dojo/dom-attr'], function(query, attr){
        query('#list li').forEach(function(li){
            // do something with these
        })
    })
}

基于这种格式,与dojo工具包人员以及第三方网站的许多示例一起使用,恕我直言,加载所有必需的模块是绝对荒谬的,因为第一个function(ready, parser, style, registy...会越来越长,并创建命名冲突等问题

require()在脚本的生命周期中,我需要的所有模块的启动对我来说似乎很愚蠢.话虽这么说,我不得不看一些"包管理器"脚本.但是对于这个例子,如果我想在选择的地方使用查询模块,我要么必须在主require()语句中加载其余部分.我理解为什么在一定程度上,但通用点语法命名空间有什么用呢？dojo.whatever？dijit.findIt()？为什么加载模块,以唯一名称引用,通过闭包,等等等等？

我希望这是一个更容易提出的问题,但我希望这是有道理的.

恼怒

叫我一个新手,但这真的......真的......让我发疯.当谈到Javascript(显然不是)时,我不是菜鸟,但哇.我无法想象这一点 出来了!

这就是我正在收集的内容.在adder.js中:

define('adder', function(require, exports){
    exports.addTen = function(x){
        return x + 10
    }
})

在某些母版页或其他内容中:

require(['./js/cg/adder.js'])

......不遵循简洁的require(['cg/adder'])格式,但无论如何.现在不重要.

那么,使用adder应该是:

console.log(adder.addTen(100)) // 110

我得到的最接近的是console.log(adder)回归3.是的.3.否则,就是这样adder is not defined.

为什么这么难？我正在使用我的noob卡,因为我真的不知道为什么这不会聚在一起.

多谢你们.

Answer 1

依赖数组格式:

define(["a", "b", "c"], function (a, b, c) {
});

确实很烦人且容易出错.将数组条目与函数参数匹配是一个真正的痛苦.

我更喜欢require格式("Simplified CommonJS Wrapper"):

define(function (require) {
    var a = require("a");
    var b = require("b");
    var c = require("c");
});

这样可以缩短线条,并允许您重新排列/删除/添加线条,而不必记住在两个地方更改内容.

后一种格式不适用于PS3和旧的Opera移动浏览器,但希望你不在乎.

至于为什么这样做而不是手动命名空间对象,@ peller的回答很好地概述了为什么模块化是一件好事,我对类似问题的回答谈到为什么AMD和模块系统作为一种实现模块化的方式是一件好事.

我唯一要补充的是@peller的答案是扩展"关注依赖实际上会产生更好的代码." 如果你的模块需要太多其他模块,这是一个不好的迹象!我们在72K LOC JavaScript代码库中有一个松散的规则,模块应该是~100行长,需要0到4个依赖项.它很好地服务于我们.

Answer 2

requirejs.org非常好地概述了AMD是什么以及为什么要使用它.是的,Dojo正在向更小的模块发展,您可以单独参考这些模块.结果是您加载的代码更少,并且您对它的引用是显式的.我认为,关注依赖关系实际上会产生更好的代码.AMD支持优化,一旦迁移完成,您就不必再将所有内容加载到全局变量中.没有更多的碰撞!require()块包装使用各种模块的代码.domready中!与DOM的加载有关,与范围内的变量无关.

无论如何,这偏离了SO的Q&A格式.您可能想询问具体问题.