一块方式时三次性加载,Dijit有多少个主旨

 

转自:http://blog.csdn.net/trendgrucee/article/details/12679949

1、简介

Dijit是Dojo的UI框架,包涵1多样丰裕的机件以救助你飞速支付Web程序。思虑到多数Web页面都是表单成分(指允许用户输入的组件,平时会被传送到服务器举行处理)。Dijit有广大依据表单的机件,包涵按钮、文本框、可校验文本框、进程条等等。

其它,Dijit包罗了一个可用的主导框架来定义Dijit的视觉效果。Dijit有三个主旨:Claro,Tundra,Soria和Nihilo.

一、Dojo学习地点

Dojo 下载:

http://dojotoolkit.org/download/

 

Dojo参考文书档案

http://dojotoolkit.org/reference-guide/1.10/dojo/

 

Dojo API:

http://dojotoolkit.org/api/

 

2、使用Dijit主题

应用Dijit的大旨,需求做两件业务:引进主旨的css文件、在页面包车型客车body元素上设置CSS
clsass属性。你也足以把主旨的CSS属性设置在别的的块级元素上。

 

[html] view
plain
copy

 

  1. <head>  
  2.     <meta charset=”utf-8″>  
  3.     <title>Hello Dijit!</title>  
  4.     <!– load Dojo –>  
  5.     <script src=”dojo-release-1.9.1/dojo/dojo.js” data-dojo-config=”async:true”></script>  
  6.     <link rel=”stylesheet” href=”dojo-release-1.9.1/dijit/themes/claro/claro.css”>  
  7. </head>  
  8. <!– set the claro class on our body element –>  
  9. <body class=”claro”>  
  10.     <h1 id=”greeting”>Hello</h1>  
  11.     <button>click me</button>  
  12. </body>  

贰、Dojo 急迅伊始

叁、以Button为例介绍中央组件的用法

评释式方式创建Button,看例子:

 

[html] view
plain
copy

 

  1. <body class=”claro”>  
  2.     <div id=”btn1″ data-dojo-type=”dijit/form/Button”  
  3.             data-dojo-props=”label:’click me’,onClick:function(){console.log(‘yes,clicked’);}”>  
  4.     </div>  
  5.     <script>  
  6.        require([“dijit/form/Button”,”dojo/parser”,”dojo/domReady!”]);  
  7.     </script>  
  8. </body>  
  • data-dojo-type:钦命大家要运用dijit的Button控件
  • data-dojo-props:设置Button控件的性质,能够查看Button的Api鲜明有怎么着属性能够设置(不仅属性可以安装,方法也足以安装)
  • 能够看来我们在最终的1段script中不仅引进了亟待的Button模块,还引进了dojo/parse模块,假若不引入此模块,按钮不可能展现,并且事件不恐怕处理。关于dojo/parser模块的功能,大家会在下一篇博客中牵线。以往你只需求了然如若采纳评释式使用dijit控件,必要在引进dojo.js的地方时,通过data-dojo-config设置属性parseOnLoad:true(官方文书档案上这么说,上边包车型地铁例证未有设置那脾特性也能平常运营,待确认),并且引进dojo/parser模块。

编制程序式格局开创Button,看例子:

 

 

[html] view
plain
copy

 

  1. <div id=”btn2″></div>  
  2.     <script>  
  3.        require([“dijit/form/Button”,”dojo/domReady!”],function(Button){  
  4.            var button = new Button({  
  5.                label:’Button2′,  
  6.                onClick:function(){console.log(“Button2 Clicked.”);}  
  7.            },”btn2″);  
  8.            button.startup();  
  9.        });  
  10.     </script>  
  • 查询Button的api查看new Button的参数设置。
  • startup函数:编制程序式格局开创三个组件之后,应该总是调用组件的startup()方法。编制程序式创立组件的2个广泛的谬误便是忘记调用startup()方法。

2.1 Dojo引入:

<body>

<h1 id="greeting">Hello</h1>

<!– load Dojo –>

<script src="../../dojo-release-1.11.2-src/dojo/dojo.js"

            data-dojo-config="async: true"></script>

</body>

 

 

引进dojo.js与引进其它的javascript脚本是均等的。可是引进dojo时,有二种方式:同步、异步。异步形式是按需加载,同步形式时1回性加载。

 

在钦赐加载情势时,能够有三种钦定形式:编制程序式、注解式。上边的例证是三个证明式,上面来一个编制程序式:

<!– 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.10.4/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, parser, 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") + "“`");

    // 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>

 

端详参见:

https://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html

 

贰.二 钦定dojo模块地点

 

引进dojo.js后,就要加载各类模块实行支付了。那么dojo的次第模块的地方在哪吧?

 图片 1

 

在运用dojo时,有一个大局配置dojoConfig,它有种种属性,须要精通一下。在摸底各样配置项从前,先来领悟一下dojo的目录:

 图片 2

dojo: 基本的dojo模块包。

dojox:dojox的扩展模块包。

dijit:提供的种种widget包。

themes:主题包。

util:工具包。

ex:这么些是本身本身加上的,是用于放置自定义模块目录的。

 

各种目录下的停放的都以有个别模块,在dojo中,每种模块都以3个javascript文件:

 

上面一句话来说述一下dojoConfig的配备项:

·baseUrl:钦点加载各模块时基于哪个地点。·packages:是一个数组。数组中每1项都钦点1个包名。

      Name代表包名。location代表包的岗位,是相对于baseUrl的。

 图片 3

 

譬如地点例子中内定的,那么要加载dom模块。

写法是require([‘dojo/dom’],function(dom){});

在加载时,依照模块名称:dojo/dom,依据packages将dojo换来.,再拼凑上baseUrl就成了:”../../dojo-release-一.1一.2-src/dojo/./dom.js”。若是要加载“dijit/Dialog”,最后会分析成:”../../dojo-release-一.1一.二-src/dojo/../dijit/Dialog.js”。

 

·async: 是布署是不是选用异步加载模块的章程

·parseOnLoad:是还是不是启用自动分析。这么些天性上边会说明。

 

想要精晓更加多配备项,能够参照:

https://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/index.html

 

 

 

二.三 模块加载require:

 

引入dojo.js后,就创制了五个全局的函数:require,define:

 

require是用来加载内定的module。

 图片 4

 

 

<script type="text/javascript" src="../../dojo-release-1.11.2-src/dojo/dojo.js" data-dojo-config="async: true"></script>

                   <script type="text/javascript">

                            console.log(require);

                            console.log(define);

                            require(["dojo/main", "dojo/on", "dojo/_base/array"], function(main, on, array){

                                     console.log(main);

                                     console.log(on);

                                     console.log(array);

                            });

                   </script>

 

 

Define 则是概念Dojo模块用的。

 

require、define 详情参见:

https://dojotoolkit.org/documentation/tutorials/1.10/modules/index.html

 

在几个模块的js文件中,最终都要回来三个值(二个指标、二个function等)。譬如:dojo/dom模块提供的是二个指标,那么些指标有四个办法:

 图片 5

 

查阅某些模块的详情能够查阅dojo官方提供的API:

https://dojotoolkit.org/api/

 

 

3、查找DOM节点

3.1 根据id查找dom节点

dom.byId(id, document) 。它事实上就一定于document.getElementById(id)

 图片 6

 

 

叁.2 依照css选取器查找节点

 

dojo/query
能够用来探寻多少个dom节点,再次回到1个NodeList。查找节点时,能够经过!来钦赐相应的选用器引擎。使用sizzle引擎,那个引擎也是jquery使用的引擎。

 图片 7

3.3 查找widget

registry.byId

 图片 8

 

 

肆、伊芙nt 注册监听器

行使require/define引进dojo/on后,就能够动用on来注册事件监听器了。

require([“dojo/on”], function(on){

    on(btn,”click”,function(){

 //xxxx

});

});

 

 

5、注明式使用Dojo

在dojo中,有两种选拔格局:编制程序式、评释式。编制程序式,就是利用JavaScript去创立对象,查找节点、绑定事件等。声明式则是在HTML元素上运用data-dojo-type属性来声称对象,绑定事件等。

 

         譬如要创立一个Button,假如利用编程格局,正是要:

Require([“dijit/form/Button”,”dojo/on”], function(Button,on){

var btn= new Button();

on(btn,”click”,function(){

   //xxxx

});

});

 

借使采纳注脚情势创设Button并绑定click成了:

 图片 9

 

data-dojo-type:钦定创立的靶子的项目。

data-dojo-props:钦命创造对象时采纳的option。

 

宣称情势是怎么着工作的吗?

在Dojo中,有那样一个模块:dojo/parser,它正是用来分析申明情势,创设对象(蕴含widget),绑定方法的。Parser.parse()
是用来分析页面包车型客车;
要是在dojoConfig中配备了parseOnLoad为false,就要求手动的调用该方法来分析页面。

 

从上面包车型客车demo中,也得以看到能够经过<script type=”dojo/on”
/>来注册监听器。其实在Dojo中,可以选用script来做很自小编事啊:

 

·dojo/on 使用它,就相当于调用了on(target, eventType, eventHandler).

       target:正是 包蕴该<script
/>的可怜HTML上data-dojo-type内定的不得了类型的靶子。

       eventType:是透过script的data-dojo-event来内定的。

       eventHandler:正是<script
>中间的有的。那会被封装成三个Function。该function的参数,能够由此data-dojo-args来钦命。

       

·dojo/method 使用它能够重写对象的章程。

      
使用它时,假若内定了data-dojo-event,则该脚本有的对应的方法,会在创立对象后举行一遍。借使钦命了data-dojo-event,则以为是重写了此类的由data-dojo-event钦赐的办法。方法参数如故是用data-dojo-args来表示。

 

·dojo/aspect:相当于采纳了dojo/aspect。Dojo提供的面向切面编制程序的措施。

·dojo/watch :参见Dojo文档

·dojo/connect:参见Dojo文档。

 

关于证明式使用Dojo的不二等秘书籍,能够瞻仰文书档案:

https://dojotoolkit.org/documentation/tutorials/1.10/declarative/index.html

 

 

用作2个Dojo初学者,理解那样多已经够用使用Dojo、维护Dojo项目了。假若想对Dojo有越来越深远的刺探,能够根据Dojo官方文书档案来上学。