zoukankan      html  css  js  c++  java
  • JavaScript DOJO使用总结

    对以前项目中用到的dojo框架进行一个框架式的总结,以备参考学习。

    主要组成... 1

    开发注意... 3

    Dojo代码约定... 3

    Dojo形式的脚本库... 4

    Dojo Build. 4

    Dojo ToolBox. 5

    推荐资料... 6

    参考实例... 6

    主要组成

    包括三个部分:

    Dojo: 框架核心

    Dijit: 基于dojo的UI界面部分,主题使用css控制

    Dojox: 其他扩展

    Util:打包风格检查等工具[在源代码的发布包中]

    页面应用库的步骤

    Dojo初始库

    形式1

    <script type="text/javascript">
    djConfig = { parseOnLoad: true, isDebug: true};
    </script>
    <!-- now load dojo.js; note no djConfig attribute -->
    <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js">
    </script>

    形式2

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

    注意

    如果写成

    <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js"/>形式不能正常工作

    引用使用的库

    Dijit和CSS

    只有在使用了dijit时才用

           <% #if DEBUG %>
            <style type="text/css">
                   @import "Scripts/Dojo/dijit/themes/tundra/tundra.css";
                   @import "Scripts/Dojo/dojo/resources/dojo.css";
            </style>
            <script type="text/javascript" src="Scripts/Dojo/dojo/dojo.js" djconfig="parseOnLoad: true, isDebug:true">
            </script>
            <script type="text/javascript">
                   dojo.require("dojo.parser");
                   dojo.require("dijit.dijit-all"); //开发状态下包含所有dijit             
    </script>
            <% #else %>
            <%--这个是发布目录,执行Scripts\Dojo\util\buildscripts\my.bat 即创建出来--%>
            <style type="text/css">
                   @import "Scripts/Dox/dijit/themes/tundra/tundra.css";
                   @import "Scripts/Dox/dojo/resources/dojo.css";
            </style>
            <script type="text/javascript" src="Scripts/Dox/dojo/dojo.js" djconfig="parseOnLoad: true">
            </script>
            <script type="text/javascript">
                   dojo.require("dojo.parser");
                   dojo.require("dijit.dijit");

    </script>
    <% #endif %>

    Dijit使用

    [HTML标签扩展形式]

    <div class="formContainer" dojotype="dijit.layout.TabContainer">
                   <div dojotype="dijit.layout.ContentPane" title="Personal Data">
                         <label for="first_name">
                                First Name:</label>
                         <input type="text" name="first_name" id="first_name" dojotype="dijit.form.ValidationTextBox"
                                trim="true" propercase="true" required="true" size="30" invalidmessage="You must enter your first name" /><br />
            。。。

    Dojo库的组织思想是按照小的功能块进行组织的,因此可以看到dojo dijit dojox目录下有很多的文件,dojo.js内含的功能包括:浏览器环境属性、语言扩展、异步编程、DOM编程、XHR编程、面向对象和Dojo加载器;其他的功能都在独立的js文件中,如html解析

    Dojo/ parser.js 引用这个功能使用dojo.require("dojo.parser") [dojo比较推荐使用HTML标签扩展的形式使用dijit]

    开发注意

    Ø 如果在本地查看demo文件,在Firefox3中默认不能正确显示,修改方法如下:

    Firefox地址栏输入about:config,找到security.fileuri.strict_origin_policy改为false

    Ø 开发建议、跟踪

    console.dir

    console.log error debug

    Ø 库

    最好使用源代码的脚本库,然后在项目发布时使用dojo的打包系统根据需要打包,以减少js文件的大小

    Ø 推荐工具

    由于需要跟踪客户端的脚本处理情况,因此浏览器端的工具非常重要

    Firefox: FireBug

    IE: Developer Toolbar, HttpWatch Professional是个更好的工具

    Dojo代码约定

    Dojo中的代码文件命名约定

    普通的模块是小写字母

    如果一个模块定义了一个构造函数,那么它的名字将首字母大写,表示这个模块定义了一个类

    少数的脚本和模块的名字永下划线开头,表示私有的,只在内部供其他模块使用,需要时自动加载这些脚本,可以忽略

    据此规则,可以看到脚本库的文件类别

    Dojo形式的脚本库

    /// <reference path="../Intellisense/dojo.aspx"/>
    dojo.provide("My.Shape");
    dojo.declare(
           //the name of the constructor function (class) created...
           "My.Shape",
           //this is where the superclass (if any) goes...   
           null,
           //this object contains everything to add to the new class's prototype...
           {
           //default property values can go in prototype...
           color: 0,
           //here is the single prototype method...
           setColor: function (color) {
                 this.color = color;
           }
    }
      );

    以上是Dojo形式的类

    Dojo Build

    http://www.ibm.com/developerworks/cn/web/0912_shenjc_dojobuild/ 这个是打包的说明

    dependencies = {
           //Layers属性中每一个对象都指定了如何把多个JavaScript资源合并成一个资源
           layers: [
           {
                  name: "dojo.js",
                  dependencies: [
                               "dojo.parser",
                               "dojo.string"
                        ]
           },
           {
                  name: "../dijit/dijit.js",
                  layerDependencies: ["dojo.js"],
                  dependencies: [
                               "dijit.dijit",
                               "dijit.layout.ContentPane",
                               "dijit.layout.TabContainer",
                               "dijit.form.ValidationTextBox",
                               "dijit.form.DateTextBox",
                               "dijit.Dialog"
                        ]
           },
           {
                  //打包的资源文件的文件名,相对于dojo目录
                  name: "../My/demodojo.js",
                  //本层依赖的其他资源打包
                  layerDependencies: [
                  ],
                  //打包资源包含的模块名
                  dependencies: [
                        //指定模块名称后,打包程序自动加载对应的文件并合并
                           "My.demodojo"
                        ]
           }
      ],
          //prefixes一个集合,集合中的每个元素给出了从模块名到模块路径的一个映射[路径名是相对于dojo/的
           prefixes: [
           //Dojo路径默认包含
           ["dijit", "../dijit"],
           //["dojox", "../dojox"],
           ["My", "../My"]
      ]
    }

    上例是把js文件分别放到dojo.js dijit.js和demodojo.js 三个文件中,这样发布的系统就下载的文件数量就很少了

    Dojo ToolBox

    官方站点可以下载这个工具,包括API帮助[需要在线状态下安装];打包工具等

    推荐资料

    http://dojotoolkit.org/

    http://www.dojocn.com/

    mastering dojo http://www.pragprog.com 站点可以下载例子代码,本书有中文版本“精通Dojo”

    该书对Dojo的方方面面进行了介绍

    电子书也可以在http://ppurl.com上下载

    参考实例

    http://jsfkit.codeplex.com

  • 相关阅读:
    ajax()方法与后台交互
    实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
    yield语句
    匿名方法和Lambda表达式
    委托、Lambda表达式和事件
    分治法
    分治法求一个N个元素数组的逆序数
    快速找出故障机器
    C++关联容器综合应用:TextQuery小程序
    转:做一个有趣的有意思的人
  • 原文地址:https://www.cnblogs.com/2018/p/1848126.html
Copyright © 2011-2022 走看看