zoukankan      html  css  js  c++  java
  • Dojo Quick Start Guide 快速入门 基本框架

    首先,下载 Dojo 库:http://www.dojotoolkit.org/downloads

      放了方便测试,我将文件将解压到 Web Server 的 "js/dojotoolkit" 文件夹中,如果你愿意,也可以缀上版本号。最后的目录结构应该像下图这样:

    Dojo Quick Start Guide 快速入门 (2) 基本框架

      明确 dojo.js 文件的路径非常重要。只要 dojo.js 能被正确装入页面,package system 会自动处理对相关模块的引用和依赖。

      The Dojo Book,提供了大量的指南和教程,更深入的介绍了获得各种 dojo 不同版本的方式。

      也可以从 Google 的公用库引入脚本,如下:http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js

      基本框架

      下面是一个 dojo 程序的基本框架:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <title>Dojo Toolkit Test Page</title>   
       
        <!--  装入Dojo 基本库 -->
        <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
            djConfig="parseOnLoad:true, isDebug:true">
           </script>
       
        <script type="text/javascript">
        /* 其他的脚本程序 */
        </script>
       
        <style type="text/css">
        /* 样式表在这 */   
        </style> 
     
        </head>
        <body><!-- 页面内容 -->
            <h1 id="testHeading">Dojo 基本框架</h1>       
            <div id="contentNode">
            <p>一些内容</p>
        </div>
        </body>

    </html>

      配置 Dojo 启动参数

      dojo在装入时应该进行参数配置,两个最重要的参数是 parseOnLoad 和 isDebug 。第一个参数确定是否在页面装入时解析 dojo 组件和内置标签;第二参数打开或关闭调试信息。有两种配置方式:

      第一种方式在 <script> 标签中配置,如下:

    <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
        djConfig="parseOnLoad:true, isDebug:true">
      </script>

      第二种方式在 dojo.js 装入之前,建立一个全局变量 djConfig,如下:

    <script type="text/javascript">
        var djConfig = {
            isDebug:true,
            parseOnLoad:true
        };
    </script>
    <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"></script>

      两种方式有同样的效果。

      如何开始?

      由于各种版本的浏览器对页面装入 "ready" 状态有不同的定义,所以 Dojo 提供了一个 dojo.addOnLoad  函数,程序从这里面开始,如下代码:

    // 某个函数
        var init = function(){
            console.log("I run after the page is ready.");   
        };
            //ready 后运行上面的函数
        dojo.addOnLoad(init);
       
        // 这是另一种形式,用匿名函数
        dojo.addOnLoad(function(){
            console.log("I also run, but second. ");
        });

      重要提示:不要用 <body onLoad="someFunc"> 和 window.onload=someFunc 开始你的函数,而应该使用 dojo.addOnLoad(someFunc)

      更多

      通过 dojo.require() 函数,package system 会自动装入所有你需要的代码。下面的例子将装入一个 Button 和一个 TitlePane,系统会自动找到他们的代码,如下:

    dojo.require("dijit.form.Button");
        dojo.require("dijit.TitlePane");
        dojo.addOnLoad(function(){
            dojo.byId("testHeading").innerHTML = "We're on our way!";
            console.log("onLoad fires after require() is done");
        }); 

      每个模块都有自己的 dojo.require() 参数,你可以从 Dijit API pages 找到他们

      继续

      在上面的dojo.byId() 函数,通过 id 来选择元素,并改变了元素的 innerHTML  值。后面我们将了解选择器。

      将上面的代码放到框架中的“其他脚本程序”位置处,然后运行,如果你看到了: "We're on our way",恭喜!

      如果出现了错误,可以从 FAQ 查找常见的错误信息。

  • 相关阅读:
    IntelliJ IDEA常用统一设置2-Inspections检查设置(Linux/Mac/Windows)
    IntelliJ IDEA版本:Ultimate、Community、EAP版本的区别
    IntelliJ IDEA重构技巧收集
    Java泛型中的类型擦除机制简单理解
    阿里巴巴Java开发手册中的DO、DTO、BO、AO、VO、POJO定义
    Java中PO、BO、VO、DTO、POJO、DAO概念及其作用和项目实例图(转)
    Java使用logback记录日志时分级别保存文件
    Java中List,Set和Map详解及其区别和使用场景(转)
    Java中泛型的Class<Object>与Class<?>的区别(转)
    Java中泛型T和Class<T>以及Class<?>的理解(转)
  • 原文地址:https://www.cnblogs.com/yeer/p/1499503.html
Copyright © 2011-2022 走看看