Dojo require() and AMD (1.7)



我正在经历一段过渡到Dojo和新AMD结构的时间,我真的希望有人能对整个概念有所了解。在过去的几周里,我一直住在谷歌上,试图找到的信息不是关于它的用法,而是关于使用它的结构和设计模式趋势。

我觉得奇怪的是,对于一个相对复杂的javascript应用程序,比如一个需要创建和样式Dijit、创建DOM元素等的主页,我需要并因此使用在AMD系统之前dojo命名空间中可用的不同模块的TON(或者,至少没有分配给23个不同的var)。

示例:

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调用中<他们真的>

这就是为什么我只能认为这是我对道场缺乏了解。

我真的看过、搜索过、买过书(尽管是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工具包人员和第三方网站的许多示例都使用了这种格式,IMHO,加载所有所需的模块将是非常荒谬的,因为第一个function(ready, parser, style, registy...将变得越来越长,并产生命名冲突等问题。

在我看来,在脚本的生命周期中启动并require()所有我需要的模块是愚蠢的。也就是说,我必须查看一些"包管理器"脚本。但是对于这个例子,如果我想在选定的地方使用查询模块,我必须将它与主require()语句中的其余部分一起加载。我在一定程度上理解为什么,但通用点语法名称空间有什么不好呢?道场什么的?dijit.findIt()?为什么要加载模块、以唯一名称引用、传递闭包等等?

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

放大

称我为新手,但这真的。。真正地把我逼疯了。当谈到Javascript时,我不是无名小卒(显然不是),但哇。我想不通这个

这是我收集的。在adder.js:中

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

在一些母版页或其他什么:

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

它不遵循整洁的CCD_ 9格式。现在不重要。

那么,adder的使用应该是:

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

我得到的最接近的是console.log(adder)返回3。是的。3。否则为adder is not defined

为什么这必须如此困难?我在这件事上用了我的套牌,因为我真的不知道为什么这件事不在一起。

谢谢大家。

依赖数组格式:

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行长,并且需要零到四个依赖项。它对我们很有帮助。

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

无论如何,这是偏离了问答;SO的一种形式。你可能想问一些具体的问题。

最新更新