通过dojoConfig 配置 Dojo <6>

dojoConfig 对象(1.6是djConfig) 允许你设置toolkit的不同选项及默认的行为。 本教程中我们擦讨可以在dojoConfig中配置什么及如何使用。

介绍

dojoConfig 对象(Dojo 1.6为 djConfig) 用于配置一个网页或者应用程序中的Dojo, 该对象在运行时会被模块加载器(loader)引用以及Dojo的组件使用全局选项。如若需要, 在更深层次的使用中, 可以做为自定义应用程序的一个配置点。

!* 老的对象名djConfig已被弃用, 但在2.0之前已经存在的代码依然有效。 在写本教程时,许多文档依然使用djConfig; 两种写法是相等的,只是强烈建议你使用 dojoConfig.

开始

让我们通过一些简单的例子来看看dojoConfig是如何工作的。 首先, 是一个直接设置dojoConfig对象的例子:
<!-- set Dojo configuration,load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true
        },parseOnLoad: false,foo: "bar",async: true
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
 
<script>
// Require the registry,parser,Dialog,and wait for domReady
require(["dijit/registry","dojo/parser","dojo/json","dojo/_base/config","dijit/Dialog","dojo/domReady!"],function(registry,JSON,config) {
    // Explicitly parse the page
    parser.parse();
    // Find the dialog
    var dialog = registry.byId("dialog");
    // Set the content equal to what dojo.config is
    dialog.set("content","<pre>" + JSON.stringify(config,null,"\t") + "</pre>");
    // Show the dialog
    dialog.show();
});
</script>
 
<!-- and later in the page -->
<div id="dialog" data-dojo-type="dijit.Dialog" data-dojo-props="title: 'dojoConfig / dojo/_base/config'"></div>

!* 注意dojoConfig 必须在 dojo.js之前被定义。 这非常重要,如果反过来的话,配置的属性会被忽略。

在以上这个例子中, 我们设置了三个标志: parseOnLoad: false,has(dojo-firebug 子属性)和 async:true. 另外, 还自定义了 foo: "bar". 在这个例子中, 一个dijit.Dialog(弹出窗口)位于网页中。 代码从require的回调函数开始运行, 将dojo.config的值转化为 JSON, 并且作为对话框的内容展示。 在展示出来的结果中,有parseOnLoad,has,foo属性。 但也有一些其它的属性, 如packages,baseUrl.

!* 需要注间dojoConfig 和dojo/_base/config之前的区别, dojoConfig 纯粹是以输入为目的——如何传递配置参数给loader和模块。 在loader启动处理时, dojo/_base/config 会被这些配置填充,之后为模块查找配置使用。

以下是一个在声明语句中的配置,等同于上面的例子:

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"
        data-dojo-config="has:{'dojo-firebug': true},foo: 'bar',async: 1">
</script>

在这里,我们在Dojo的 script 元素中使用了data-dojo-config 属性, 你可能在其它的教程或者例子中看到过。 它跟之前的例子有完全一样的功能。 在这两种情况下, 我们提供的配置选项最后都会被混入到dojo/_base/config对象中, 在 dojo.js加载启动后,可以在dojo/_base/config 找到我们提供的配置选项。

你可以通过在dojoConfig添加新的值来确认,在console 检查dojo.config对象。 所以dojoConfig就是Dojo装配置属性的一个袋子。 让我们看看在这里有哪些选项及如何使用它们。

has() 配置

has() 是 Dojo 1.7中添加的一个重要功能,用于特征检测。 我们可以在dojoConfig中为has()指定特征, has()的值是一个包含所有特征检测的散列对象。这个特征集用于确定在Dojo支持哪些功能。 例如, 我们可以禁用amd factory scan(扫描CommonJS 请求(模块)语句,并作为依赖加载)
<script>
    dojoConfig = {
        has: {
            "dojo-amd-factory-scan": false
        }
    };
</script>

Debug/Firebug 配置

通过其它的教程或使用过Dojo 1.7之前的版本,你现在可能对isDebug 配置标志已经很熟悉。isDebug用来启动调试信息。 在Dojo 1.7+,你也可以在更高层次的颗粒上(更细的控制),通过指定一个has() 特征来完成。为了在老的IE中启用Firebug Lite调试功能, 我们可以设置dojo-firebug特征检测(依然可以设置isDebug,但使用特片将会在异步模式加载周期中更早的加载)。 如果你已经有Firebug或者其它的 console. 它不会做任何事忙你的吧。 但如果你没有一个控制台(console), 它会加载Dojo版本的Firebug Lite (之前看奔驰中有用Javascript写过一个控制定,是一个弹出窗口,窗口会输出调试的结果), 并且创建页面的底部创建一个Console UI. 它便于在IE的老版本或者没有很好开发者工具的浏览器中调试。

为了查看到你使用了弃用的和实验性(还没有稳定)的API时的警告消息,你需要设置dojo-debug-messages 特征为true (默认为false,除非你设置了isDebug)。 如果为 false,不会出现这些警告。 以下是启用 开发者控制台(浏览器本身有控制台,没有启用 Firebug Lite) 和 记录调试消息:
<script>
    dojoConfig = {
        has: {
            "dojo-firebug": true,"dojo-debug-messages": true
        }
    };
</script>

为了禁用有保证的console对象(因为在 IE中没有console对象,在使用原生的console会出错,所以Dojo会创建一个console对象,保证在任何浏览器下都不会报错), 我们可以设置 dojo-guarantee-console 特片为false. 默认为 true, 会创建一个虚拟的console对象。
console的其它特征配配置如下:
  • deBugContainerId: 指定一个元素来包含 console UI
  • popup: 弹出一个窗口,而不是在当前窗口中渲染console UI.

Loader 配置

Dojo 在 1.7版本中采用了新的加载器(loader)来适应AMD的模块格式。 新的加载器添加了定义packages,maps等多种新的配置选项。查看更多的关于loader的细节,可以查看 Advanced AMDusage tutorial. 更要的加载器配置参数如下:
  • baseUrl: 当模块标识符被转化为路径或者URL时, 根路径会被添加到最前面。
    baseUrl: "/js"

  • packages: 包含多个包对象的数组, 每个包对象由包名和位置组成
    packages: [{
        name: "myapp",location: "/js/myapp"
    }]

  • map: 允许你将模块标识符的路径映射到其它不同的路径上:
    map: {
        dijit16: {
            dojo: "dojo16"
        }
    }

  • paths: 映射模块id(标识符)的部分到一个文件路径上:
    var dojoConfig = {
        packages: [
            "package1","package2"
        ],paths: {
            package1: "../lib/package1",package2: "/js/package2"
        }
    };
     
    // ...is equivalent to:
    var dojoConfig = {
        packages: [
            { name: "package1",location: "../lib/package1" },{ name: "package2",location: "/js/package2" }
        ]
    };

  • async: 如果Dojo的核心需要被异步加载,应当定义它。 它的值可以是true,false 或者 leagacyAsync. legacyAsync 会让loader永久的使用跨域的模式。
    async: true

  • parseOnLoad: 如果为true时,当有了网页节点结构(DOM)并且所有的初始化的依赖( 包括 dojoConfig.deps数组中指定的依赖)被加载完成时,dojo/parser会解析网页。
    parseOnLoad: true
    !* 推荐你将parseOnLoad设置为false(默认为false,所以你可以不需要设置此属性),之后开发者可以在require中明确的请求dojo/parser模块,并调用parser.parse();
  • deps: 指定资源路径(模块或者其它文本,图片)的数组,数组里的模块会在Dojo被加载完时,立即被加载。
    deps: ["dojo/parser"]

  • callback: 一旦deps中的模块被加载,该回调函数会被执行
    callback: function(parser) {
        // Use the resources provided here
    }

  • waitSeconds: 等待加载一个模块的时间,默认为0 (一直等待)
    waitSeconds: 5

  • cacheBust: 如果为true,给每一个模块URL末尾添加一个时间,避免模块被缓存
    cacheBust: true

现在让我们创建一个简单的demo,它包含了其本的配置参数。 一个很常见的情况是, Dojo工具包从CDN获取,而模块是本地开发。 比如说,我们的模块定义在/documentation/tutorials/1.9/dojo_config/demo里:
<!-- Configure Dojo first -->
<script>
    dojoConfig = {
        has: {
            "dojo-firebug": true,"dojo-debug-messages": true
        },// Don't attempt to parse the page for widgets
        parseOnLoad: false,packages: [
            // Any references to a "demo" resource should load modules locally,*not* from CDN
            {
                name: "demo",location: "/documentation/tutorials/1.9/dojo_config/demo"
            }
        ],// Timeout after 10 seconds
        waitSeconds: 10,map: {
            // Instead of having to type "dojo/domReady!",we just want "ready!" instead
            "*": {
                ready: "dojo/domReady"
            }
        },// Get "fresh" resources
        cacheBust: true
    };
</script>
 
<!-- Load Dojo,Dijit,and DojoX resources from Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
 
<!-- Load a "demo" module -->
 
<script>
    require(["demo/AuthoredDialog","ready!"],function(AuthoredDialog,parser) {
        // Parse the page
        parser.parse();
 
        // Do something with demo/AuthoredDialog...
    });
</script>

当使用了packages配置时, 我们已所有引用demo/* 的模块都指向了本地/documentation/tutorials/1.9/dojo_config/demo/ 文件夹, 同时允许dojo,digit和dojox从Google CDN中引用。 一旦没有指定demo package, 请求demo/AuthoredDialog会加载 //ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/demo/AuthoredDialog.js. 我们也可以使用别名(alias),将 ready 与 dojo/domReady连结起来。

loader文档提供了更多详细信息。

本地与国际化

Dojo 的 i18n 系统有它自己的文档 和教程, 我们仅在这里展示关于它在dojoConfig的配置。

你可以通过dojoConfig,给任何窗口部件配置它的本地化或者使用Dojo 国际化来本地化内容。 locale选项可以覆盖你浏览器给Dojo提供的默认置(Dojo会获得浏览器的Locale). 一个简单的例子如下:
<script>
    var dojoConfig = {
        has: {
            "dojo-firebug": true,parseOnLoad: true,// look for a locale=xx query string param,else default to 'en-us'
        locale: location.search.match(/locale=([\w\-]+)/) ? RegExp.$1 : "en-us"
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
<script>
    require(["dojo/date/locale","dojo/_base/window","dojo/i18n",function(locale,config,win) {
        var now = new Date();
        var dialog = new Dialog({
            id: "dialog",// set a title on the dialog of today's date,// using a localized date format
            title: "Today: " + locale.format(now,{
                    formatLength:"full",selector:"date"
            })
        }).placeAt(win.body());
        dialog.startup();
 
        dialog.set("content","\t") + "</pre>");
        dialog.show();
    });
</script>

查看示例

在这个demo中, 我们在dojoConfig对象里定义了locale属性, 我们会在查询语句中寻找 locale=xx的参数。 这里只是给你演示一相,一般你会直接指定一个locale. 将locale模块设置在所有要加载模块之前,是为了确保其它模块中依赖的本地化资源包正确的加载。 这样,我们就可以用dojo/date/locale模块来格式化一个date对象, 生成的本地化字符串为作为 窗口的标题。

!* 在多语言的网页中, 你将需要加载其它locale资源包以及浏览器指定的或者dojoConfig.locale属性(多种locale),这种情况下, 需要使用extraLocale配置属性, 它是由 locale名称字符串组成的一个数组。

自定义属性

由于dojo.config 一直存在, 它可以给Dojo中的其它模块提供自己的配置属性。 我们可以在Digit看到,特别是DojoX,这些模块的标志和行为可以有如下设置:

Digit Editor
allowXdRichTextSave

dojox GFX
dojoxGfxSvgProxyFrameUrl,forceGfxRenderer,gfxRenderer

dojox.html metrics
fontSizeWatch

dojox.io transports and plugins
xipclienUrl,dojoCallbackUrl

dojox.image
preloadImages

dojox.analytics plugins
sendInterval,inTransitRetry,analyticsUrl,sendMethod,maxRequestSize,idleTime,watchMouseOver,sampleDelay,targetProps,windowConnects,urchin

dojox.cometd
cometdRoot

dojox.form.FileUploader
uploaderPath

dojox.mobile
mblApplyPageStyles,mblHideAddressBar,mblAlwaysHideAddressBar,mobileAnim,mblLoadCompatCssFiles

自定义的属性可以在dojox 模块中工作的很好,那么在你自己的应用程序或者模块中也是一样的。 dojoConfig 最适合于给整个网页或应用程序提供配置。 思考下下面的代码:
<script>
    dojoConfig = {
        has: {
            "dojo-firebug": true
        },app: {
            userName: "Anonymous"
        }
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
<script>
    require(["dijit/Dialog","dijit/registry","dojo/_base/lang","dojo/io-query",function(Dialog,registry,lang,ioQuery) {
 
        // pull configuration from the query string
        // and mix it into our app config
        var queryParams = ioQuery.queryToObject(location.search.substring(1));
        lang.mixin(config.app,queryParams);
 
        // Create a dialog
        var dialog = new Dialog({
            title: "Welcome back " + config.app.userName,content: "<pre>" + JSON.stringify(config,"\t") + "</pre>"
        });
 
        // Draw on the app config to put up a personalized message
        dialog.show();
 
    });
</script>

查看示例

在这个例子中,我们附加了一个"app"属性, 之后我们通过dojo.config来引用它,为对话窗口提供一个个性化的问候。在dojoConfig.app可以填充更多的内容, 它可以预先提供一个合理的默认值,之后在混入具体的值。 在生产中, dojoConfig 代码块被服务器端重写。 另外, 你可以用使用JSON格式的cookie来填充, 或者像之前的例子中,你可以从查询字符串抽取出配置信息。 在开发和测试时, 你可以使用有虚拟值的模板, 或者加载一个js文件或者模块来填充。

附录

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易知道用户保存了什么,我希望当用户第一次看到网格时,网格处于不可编辑状态.当用户准备好后,他们可以单击编辑按钮,这将使网格的某些部分可编辑.然后,有一个保存或取消按钮可以保存更改或还原.在大多数情况下它是有效的.但
我即将开始开发一款教育性的视频游戏.我已经决定以一种我可以轻松打包为Web,Mobiles和可能的Standalone版本的方式来实现这一目标.我不想使用Flash.因此,我确信(无论如何我会听取建议)使用JavaScript和SVG.我正在对这个问题进行大量研究,但我很难把各个部分放在一起.我知道Raphae
我正在使用带有Grails2.3.9的Dojo1.9.DojoNumberTextBox小部件–我在表单中使用–将固定格式(JavaScript基本格式)的实数值(例如:12.56)设置为HTML表单输入字段(但根据浏览器区域设置显示/编辑它们,所以用户总是看到格式正确的数字).另一方面,Grails期望输入字段根据浏览器
1.引言鉴于个人需求的转变,本系列将记录自学arcgisapiforjavaScript的学习历程,本篇将从最开始的arcgisapiforjavaScript部署开始,个人声明:博文不在传道受业解惑,旨在方便日后复习查阅。由于是自学,文章中可能会出现一些纰漏,请留言指出,不必留有情面哦!2.下载ArcGISforDe
我正在阅读使用dojo’sdeclare进行类创建的语法.描述令人困惑:Thedeclarefunctionisdefinedinthedojo/_base/declaremodule.declareacceptsthreearguments:className,superClass,andproperties.ClassNameTheclassNameargumentrepresentsthenameofthec
我的团队由更多的java人员和JavaScript经验丰富组成.我知道这个问题曾多次被问到,但为了弄清楚我的事实,我需要澄清一些事情,因为我在客户端技术方面的经验非常有限.我们决定使用GWT而不是纯JavaScript框架构建我们的解决方案(假设有更多的Java经验).这些是支持我的决定的事实.>
路由dojo/framework/srcouting/README.mdcommitb682b06ace25eea86d190e56dd81042565b35ed1Dojo应用程序的路由路由FeaturesRoute配置路径参数RouterHistoryManagersHashHistoryStateHistoryMemoryHistoryOutletEventRouterContextInjectionOutl
请原谅我的无知,因为我对jquery并不熟悉.是否有dojo.connect()的等价物?我找到了这个解决方案:http:/hink-robot.com/2009/06/hitch-object-oriented-event-handlers-with-jquery/但是没有断开功能!你知道jquery的其他解决方案吗?有jquery.connect但这个插件在我的测试中不起作用.
与java类一样,在dojo里也可以定义constructor 构造函数,在创建一个实例时可以对需要的属性进行初始化。//定义一个类mqsy_yjvar mqsy_yj=declare(null,{     //thedefaultusername    username: "yanjun",          //theconstructor   
我一直在寻找一些最佳实践,并想知道Dojo是否具有框架特定的最佳实践,还是最好只使用通用的Javascript标准?特别是我主要是寻找一些功能和类评论的指导方针?解决方法:对于初学者来说,这是项目的风格指南:DojoStyleGuide
我有’05/17/2010’的价值我想通过使用dojo.date.locale将其作为“2010年5月17日”.我尝试过使用dojo.date.locale.parse,如下所示:x='05/17/2010'varx=dojo.date.locale.parse(x,{datePattern:"MM/dd/yyyy",selector:"date"});alert(x)这并没有给我所需的日期
我正在尝试创建一个包含函数的dojo类,这些函数又调用此类中的其他函数,如下所示:dojo.provide("my.drawing");dojo.declare("my.drawing",null,{constructor:function(/*Object*/args){dojo.safeMixin(this,args);this.container=args[0];
我知道你可以使用jQuery.noConflict为jQuery做这件事.有没有办法与Dojo做类似的事情?解决方法:我相信你可以.有关在页面上运行多个版本的Dojo,请参阅thispage.它很繁琐,但似乎是你正在寻找的东西.一般来说,Dojo和jQuery都非常小心,不会破坏彼此或其他任何人的变量名.
我有一个EnhancedGrid,用户经常使用复杂的过滤器.有没有办法允许用户保存或标记过滤器,以便将来可以轻松地重新应用它?我知道我可以通过编程方式设置过滤器,但我无法预测用户想要的过滤器.谢谢!编辑:自己做了一些进展…使用grid.getFilter()返回过滤器的JSON表示,然后使用json.strin
我有这个代码:dojo.declare("City",null,{constructor:function(cityid,cityinfo){}});dojo.declare("TPolyline",GPolyline,{constructor:function(points,color){},initialize:function(map){});应该是什
我遇到的问题是我的所有javascript错误似乎来自dojo.xd.js或子模块.我正在使用chrome调试器和许多dijit功能,如dijit.declaration和dojo.parser.这有点烦人,因为它很难找到简单的错误或滑倒.我希望我可以添加一个选项,允许我的调试器在我的非dojo代码中显示选项会发生的位置.我是
我正在使用DojoToolkit数字/解析函数来处理格式化和使用ICU模式语法解析字符串.有没有人知道有可能采取任意ICU模式字符串并以某种方式使用Dojo(或其他)库将其分解为它的部分(例如,对于数字模式,它可以被分解为小数位数,数千个分组等…).我希望这样做,而不需要让我的代码密切了
我有两个看似相关的问题,访问在不同的地方定义的javascript函数.我遇到的第一个问题是调用我在firgbug或safari控制台中定义的函数.我定义了一个名为getRed的函数,如下所示:functiongetRed(row,col){//dosomethingstuffandreturntheredvalueasa
我想添加一个在Ajax调用中指定的外部样式表.我已经找到了一种方法来使用jQuery(参见下面的示例),但是我需要使该方法适应dojoJavaScript框架.JQuery示例$('head').append('<linkrel="stylesheet"type="text/css"href="lightbox_stylesheet.css">');谢谢.解决方法:一旦你
我正在尝试使用dojo.connect将onMouseDown事件连接到图像,如:dojo.connect(dojo.byId("workpic"),"onMouseDown",workpicDown);functionworkpicDown(){alert("mousedown");}类似的代码几行后,我将onMouse*事件连接到dojo.body确实完全正常工作.但是当我点击图像时