使用Dojo toolkit的十一大原因

 

    在这篇文章中，我们将从十个不同的角度来分享，为什么你应该在你的web项目中开始使用Dojo toolkit。

原因一：模块化和AMD模块加载机制

    随着web技术的发展，客户端的javascript越来越复杂，为了更好，更快运行我们的js应用，我们需要模块化我们的程序。不使用异步加载的日子应该结束了。Dojo toolkit一直都引以骄傲他们的模块化设计，使用dojo.require来动态的加载页面资源。 虽然有一个跨域选项是异步的饿，缺省的加载javascript资源的方法是同步的。

    Dojo已经迁移到了异步加载器上，由Rawld Gill开发，可以方便的异步加载所有资源，很大程度的提高了速度。为了加载js资源，你可以使用如下代码：

// require方法指导加载器去加载第一个数组的资源
// 如果资源已经被加载，缓存的对象会被使用
require( 
   // 用来加载的模块
   ["dojo/on", "dojo/touch", "dijit/form/Button", "dojo/domReady!"], 
   // 一个回调函数用来使用参数来加载模块
   // 必须添加到和加载时一样的顺序
   function(on, touch, Button) {
      // 加载后执行其它 
});

为了定义一个模块，使用如下模式：

// Using 'define' instead of 'require' because we're defining a module
define(
    // Again, an array of module dependencies for the module we'd like to build
   ["dojo/aspect", "dojo/_base/declare", "dijit/layout/BorderContainer"]

   // Again, a callback function which should return an object
   function(aspect, declare, BorderContainer) {
   // Return a module (object, function, or Dojo declared class)
      return declare("mynamespace.layout.CustomBorderContainer", [BorderContainer], {
     // Custom attributes and methods here
       });
 }) 

    这里我们使用简单的define方法来定义，基本上所有的AMD加载器都使用，非常简单的结构化方式。很像require，所以使用非常简单。所有列出的有依赖的数组项目都在callback运行之前调用。通常callback返回一个方法或者对象用来展现模块。一个简单的模式快速加载，管理模块，允许开发人员加载他需要的部分。

    Dojo toolkit的特性丰富的加载器提供了插件，例如domReady，用来监听DOM，并且可以检测是否有相关JS。

// This code is featured in the dojo/Deferred module
define([
   "./has",
   "./_base/lang",
   "./errors/CancelError",
   "./promise/Promise",
   "./has!config-deferredInstrumentation?./promise/instrumentation"
], function(has, lang, CancelError, Promise, instrumentation){
    // ...
 });

不单单提供了模块化，而且提供了直接使用的加载器。

原因二：使用dojo/declare来实现Class和扩展性

    javascript并不是真正的提供class系统，而Dojo toolkit通过dojo/declare提供了一个类似class继承机制。declare在整个框架中都被使用，所以开发人员可以：

• 剪切或者删除重复的代码
• 使用“混合”方式来在不同class中共享功能
• 很简单的扩展已存在的class用来扩展自定义
• 不同项目中分享模块代码
• 在出现bug的Dojo class中安全的创建混合的class

    Dojo的class系统使用原型继承，允许原型（prototype）被继承，这样子class可以像父class一样强大。使用dojo/declare非常简单：

// Of course we need to use define to create the module
define([
   // Load dojo/declare dependency
   "dojo/declare",
   // Also load dependencies of the class we intend to create
   "dijit/form/Button",
   "dojo/on",
   "mynamespace/_MyButtonMixin" // Mixins start with "_"
], function(declare, Button, on, _MyButtonMixin) {
    // Return a declare() product, i.e. a class
   return declare(
      // First argument is the widget name, if you're creating one
      // Must be in object syntax format
      "mynamespace.CustomButton",
      // The second argument is a single object whose prototype will be used as a base for the new class
      // An array can also be used, for multiple inheritance
      [ Button, _MyButtonMixin ],
      // Lastly, an object which contains new properties and methods, or
      // different values for inherited properties and methods
      {
         myCustomProperty: true,
         value: "Hello!",
         myCustomMethod: function() {
            // Do stuff here!
         },
         methodThatOverridesParent: function(val) {
            this.myCustomMethod(val);
            // Calling "this.inherited(arguments)" runs the parent's method
            // of the same, passing the same params
            return this.inherited(arguments);
         }
      }
   );
});

    以上代码并不能完成一个现实的任务（只是一个简单例子），通过了继承和混合演示了代码重用。

    另外一个使用dojo class系统的优势在于所有属性和方法都是可以自定义的，这里没有option来限制属性自定义的数量。任何东西都可以被修改或者扩展。

• Definitive dojo/_base/declare
• Classy JavaScript with dojo/_base/declare
• Writing Your Own Widget

原因三：基于方面（Aspects）和“方法到方法的事件”

    Aspects是高级web开发力最强大和必要的特性。Dojo toolkit提供了很多这样的相关功能。允许你不使用传统的click，mouseover和keyup来触发功能。

    能够让你在触发function A之后或者之前触发function B 。你可以将方法链接起来，是不是很棒！

如下：

// after(target, methodName, advisingFunction, receiveArguments);
aspect.after(myObject, "someMethod", function(arg1, arg2) {
   // Execute functionality after the myObject.doSomething function fires
}, true);

保证function B在function A之前触发。

aspect.before(myObject, "someMethod", function(arg1, arg2) {
   // This function fires *before* the original myObject.someMethod does
});

    Aspect对于使用Dijit来创建高级UI非常有帮助。针对事件来监听一个组件或者class能够触发另外一个组件的变化，允许开发人员通过使用很多小组件来创建一个大的可控制的组件：

var self = this;
aspect.after(this.submitButton, "onClick", function() {
   // The submit button was clicked, trigger more functionality
   self.showAjaxSpinner();
});

原因四：Deferreds和统一的AJAX传输

    Deferreds是基于对象的异步操作的表达方式，允许异步操作对象可以方便的从一个地方传递到另外一个地方。jQuery最近的最重要的添加就是Deferred。很巧合的是，Dojo团队已经实现了。Dojo toolkit几年前已经添加了这个特性，使用它来简化AJAX高级操作，动画及其其它。

    除了最前面这里的Deferred对象，Dojo也在XMLHTTPRequest之外首次添加了几个IO处理方法，包括：window.name封装，AJAX文件上传的dojo/io/iframe及其其它。那么什么时候使用Deferredd对象呢？无论什么时候只要一个异步的AJAX操作发生！Deferred对象都会返回XHR请求，dojo/io请求，动画和其它！

// Fire an AJAX request, getting the Deferred in return
var def = xhr.get({
   url: "/getSomePage"
});
// Do lots o' callbacks
def.then(function(result) {
   result.prop = 'Something more';
   return result;
}).then(function(resultObjWithProp) {
   // ....
}).then(function() {
   // ....
});

那么dojo/io/iframe什么样子呢？

require(["dojo/io/iframe"], function(ioIframe){
   // Send the request
   ioIframe.send({
      form: "myform",
      url: "handler.php",
      handleAs: "json"
   // Handle the success result
   }).then(function(data){
      // Do something
   // Handle the error case
   }, function(err){
      // Handle Error
   }). then(function() {
      // More callbacks!
   })
});

    Dojo中使用Deferred的好处自傲与每一个AJAX操作，不管什么方法，你都能够返回得到一个deferred，加速了开发和API整合。Dojo1.8将看到dojo/request的介绍，一个新的AJAX方法。这里有些例子将展示如何使用dojo/request API：

// The most basic of AJAX requests
require(["dojo/request"], function(request){
   request("request.html").then(function(response){
      // do something with results
   }, function(err){
      // handle an error condition
   }, function(evt){
      // handle a progress event
   });
});

原因五：Dijit UI framework

    毫无疑问，Dojo toolkit相比其它框架最大的优势在于Dijit UI框架。这个和其它工具吹嘘的完全不同：

• 完整，完整的支持本地化 
• 完整的accessiblity
• 先进的布局组件能够帮助你解决100%高度元素，创建自定义的分割和布局修改
• 内建的表单验证和强化的用户体验
• 很多主题，最新的叫"claro"
• LESS文件自定义主题
• 非常模块化的代码，允许自定义和扩展

    Dijit同时允许你宣示性的定义和程序化的创建组件，如下：

<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Visit GBin1.com!'"></div>

    传统的js创建如下：

require(["dijit/form/Button"], function(Button) {
   // Create the button programmatically
   var button = new Button({
      label: 'Visit GBin1.com!'
   }, "myNodeId");
});

原因六：Dojo Mobile

    可以这么说，基本上每一个web问题，dojo都有一个解决方案，Dojo toolkit对于移动客户端的解决方案就是dojox/mobile，这个类库在我们以前的dojo移动开发文章中我们也牛刀小试了一把。如果你想看看dojox/mobile开发的UI界面，请点击这里：在线演示，dojox/mobile主要特性如下：

• 自动探测设备类型
• 拥有iOS，Andriod，Blackberry和common这四种主题 
• mobile表单组件
• 布局组件和面板
• 支持桌面，允许简单的debug

    移动组件可以使用宣示性或者程序化的方式实现。和Dijit组件类似。Mobile视图可以滞后加载并且不同的视图都是无缝切换，HTML很简答如下：

<!DOCTYPE html>
<html>
   <head>
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <title>GBin1 Mobile Website</title>
   <!-- custom stylesheets will go here -->
   <!-- dojo/javascript will go here -->
   </head>
   <body>
   <!-- application will go here -->
   </body>
</html>

    使用dojox/mobile/deviceTheme，你可以自动检测到客户的主机类型并且应用正确的主题：

// Will apply the device theme base on UA detection
require(["dojox/mobile/deviceTheme"]);

    使用主题后，我们选择使用的组件，或者自定义class，如下：

// Pull in a few widgets
require([
   "dojox/mobile/ScrollableView",
   "dojox/mobile/Heading",
   "dojox/mobile/RoundRectList",
   "dojox/mobile/TabBar",
   "dojox/parser"
]);

    一旦javascript资源请求后，我们就开始添加一些列的视图和组件了。

<!-- sample taken from Dojo's TweetView:  http://dojotoolkit.org/documentation/tutorials/1.7/mobile/tweetview/app/ -->
<!-- tweets view -->
<div id="tweets" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected: true">
   <h1 data-dojo-type="dojox.mobile.Heading">
      <!-- the refresh button -->
      <div data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="icon: 'images/refresh.png'" class="mblDomButton tweetviewRefresh" style="float:right;"></div>
      Tweets
   </h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
      <li data-dojo-type="dojox.mobile.ListItem">
         Tweet item here
      </li>
   </ul>
</div>
<!-- mentions view -->
<div id="mentions" data-dojo-type="dojox.mobile.ScrollableView">
   <h1 data-dojo-type="dojox.mobile.Heading">
      <!-- the refresh button -->
      <div data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="icon: 'images/refresh.png'" class="mblDomButton tweetviewRefresh" style="float:right;"></div>
      Mentions
   </h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
      <li data-dojo-type="dojox.mobile.ListItem">
         Mention tweet item here
      </li>
   </ul>
</div>
<!-- settings view -->
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
   <h1 data-dojo-type="dojox.mobile.Heading">Settings</h1>
   <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Show</h2>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
      <li data-dojo-type="dojox.mobile.ListItem">
         Setting item here
      </li>
   </ul>
</div>

    使用移动的组件和使用Dijit的方法非常类似。而且整个过程非常简单！

原因七：GFX和图表

    CSS动画是不错的视觉工具，既是动画图片，同时也是灵活和强大的矢量图形创建和管理工具。最流行的客户端的矢量图形生成工具一直是Raphael JS，但是Dojo toolkit的GFX类库毫无疑问更将的强大。GFX可以用来配置SVG，VML，Silverlight，Canvas和webGL格式的矢量图形。提供了一个健壮的封装来创建不同的矢量图片形状（线状图等等），包括：

• 改变大小，旋转和偏转
• 动画填入，拉直等属性
• 添加线或者圆圈图形到指定图形中
• 监听和响应鼠标属性
• 组合图形并且更好的去管理

创建代码如下：

require(["dojox/gfx", "dojo/domReady"], function(gfx) {
   gfx.renderer = "canvas";
   // Create a GFX surface
   // Arguments:  node, width, height
   surface = gfx.createSurface("surfaceElement", 400, 400);
   // Create a circle with a set "blue" color
   surface.createCircle({ cx: 50, cy: 50, rx: 50, r: 25 }).setFill("blue");
   // Crate a circle with a set hex color
   surface.createCircle({ cx: 300, cy: 300, rx: 50, r: 25 }).setFill("#f00");
   // Create a circle with a linear gradient
   surface.createRect({x: 180, y: 40, width: 200, height: 100 }).
   setFill({ type:"linear",
      x1: 0,                          
      y1: 0,   //x: 0=>0, consistent gradient horizontally
      x2: 0,   //y: 0=>420, changing gradient vertically
      y2: 420,                        
      colors: [
         { offset: 0,   color: "#003b80" },
         { offset: 0.5, color: "#0072e5" },
         { offset: 1,   color: "#4ea1fc" }
      ]
   });
   // Create a circle with a radial gradient
   surface.createEllipse({
      cx: 120,
      cy: 260,
      rx: 100,
      ry: 100
   }).setFill({
      type: "radial",
      cx: 150,
      cy: 200,
      colors: [
         { offset: 0,   color: "#4ea1fc" },
         { offset: 0.5, color: "#0072e5" },
         { offset: 1,   color: "#003b80" }
      ]
   });
});

基于GFX的强大类库就是dojox/charting。通过图表来展示视觉化的数据是非常不错的选择。dojox/charting提供了如下功能：

• 多个图表
• 动画图形元素
• 插件支持，包括MoveSlice（动画饼图），提示工具条，缩放和高亮
• 自更新的图表，由Dojo data store支持

<script>
   // x and y coordinates used for easy understanding of where they should display
   // Data represents website visits over a week period
   chartData = [
      { x: 1, y: 19021 },
      { x: 1, y: 12837 },
      { x: 1, y: 12378 },
      { x: 1, y: 21882 },
      { x: 1, y: 17654 },
      { x: 1, y: 15833 },
      { x: 1, y: 16122 }
   ];
   require([
      // Require the widget parser
      "dojo/parser",
       // Require the basic 2d chart resource
      "dojox/charting/widget/Chart",
      // Require the theme of our choosing
       "dojox/charting/themes/Claro",
      // Charting plugins:
      // Require the Pie type of Plot
      "dojox/charting/plot2d/Pie"
   ]);
</script>
<!-- create the chart -->
<div
   data-dojo-type="dojox.charting.widget.Chart"
   data-dojo-props="theme:dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;">
   <!-- Pie Chart: add the plot -->
   <div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div>
   <!-- pieData is the data source -->
   <div class="series" name="Last Week's Visits" array="chartData"></div>
</div>

原因八：SitePen dgrid

    Sitepen，Dojo toolkit创始人Dylan Schiemann的javascript咨询公司，打算替换Dojox的华而不实的Grid widget，使用更快，可扩展并且可编辑的Grid组件，主要特性如下：

• 支持不同的主题，配置简单
• 支持移动
• 行可排序
• 允许“滞后加载”grid数据
• 支持树状的Grid
• 使用Dijit widget支持可编辑的Grid
• 可扩展，支持列宽改变，拖放支持和分页，及其其它

SitePen已经做了很大的努力，取得了很大成功。

原因九：DOH测试框架

    测试对于我们来说非常重要，特别是对于客户端而非服务器端的程序来说。随着不同的浏览器的出现，客户端的互动测试成为一个必须的内容和步骤。Dojo toolkit提供了自己的测试框架。别名DOH（Dojo objective Harness）。提供了每一个Dojo toolkit版本的下载。测试非常简答和明了：

// Declare out the name of the test module to make dojo's module loader happy.
dojo.provide("my.test.module");
// Register a test suite
doh.register("MyTests", [
   // Tests can be just a simple function...
   function assertTrueTest(){
      doh.assertTrue(true);
      doh.assertTrue(1);
      doh.assertTrue(!false);
   },
   // ... or an object with name, setUp, tearDown, and runTest properties
   {
      name: "thingerTest",
      setUp: function(){
         this.thingerToTest = new Thinger();
         this.thingerToTest.doStuffToInit();
      },
      runTest: function(){
         doh.assertEqual("blah", this.thingerToTest.blahProp);
         doh.assertFalse(this.thingerToTest.falseProp);
         // ...
      },
      tearDown: function(){
      }
   },
   // ...
]);

    上面的测试是一个非常简单的Dojo测试例子，如果面对更复杂的情况，例如，异步操作。比如是AJAX请求，DOH提供了一个非常简单的方式来测试。Deferred对象：

{
   name: "Testing deferred interaction",
   timeout: 5000,
   runTest: function() {
      var deferred = new doh.Deferred();
      myWidget.doAjaxAction().then(deferred.getTestCallback(function(){
         doh.assertTrue(true);
      });
      return deferred;
   }
}

    以上测试代码中，getTestCallack不会调用直到doAjaxAction完成，并且返回了成功或者失败。

原因十：Dojo编译流程

    当一个web应用准备部署时，对于创建一个压缩版的javascript对于加载速度和优化来说非常有必要。这有效的减少了请求次数，并且缩短了下载时间。Dojo的编译分析Define将调用并且检测依赖关系。使用Dojo toolkit编译流程，你需要创建一个build profile。它可以包含任何层次或者更加复杂，下面是一个例子：

var profile = {
   releaseDir: "/path/to/releaseDir",
   basePath: "..",
   action: "release",
   cssOptimize: "comments",
   mini: true,
   optimize: "closure",
   layerOptimize: "closure",
   stripConsole: "all",
   selectorEngine: "acme",
   layers: {
      "dojo/dojo": {
         include: [ "dojo/dojo", "app/main" ],
         customBase: true,
         boot: true
      }
   },
   resourceTags: {
      amd: function (filename, mid) {
         return /\.js$/.test(filename);
      }
   }
};

Dojo编译流程可自定义，允许：

• 压缩
• 如果创建组件的话，指定应用到CSS的压缩层次 
• 输出
• 指定选择器引擎
• 更多

    Build profile通过命令行来运行（最近为Node.js重写），提供了不同的选项来重写或者完成设置，下面一个例子：

./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js

    Dojo编译流提供了超棒的控制编辑文件的功能，帮助你压缩CSS和Javascript，这样你的Dojo程序将能够随时准备上线！

原因十一：Dojo的宝藏，更多Dojox

    这里有很多的Dojo toolkit类库供你使用，相信你能找到你需要的所有功能。

• extra layout and form widgets for Dijit
• advanced, localized form validation routines
• WebSocket and long-polling wrappers
• image widgets, including lightbox, slideshow, and gallery utilities
• advanced IO helpers
• advanced drag and drop libraries
• Nodelist extensions

• Basic JavaScript language and helper utilities
• Advanced Javascript language and AJAX utilties
• On-demand asynchronous script loading
• A complete UI framework
• A comprehensive testing suite
• Build tools
• 更多

 

    和jQuery相比，它功能更加的完善和强大。不过个人觉得如果你需要快速轻量级的解决方案，jQuery会更适合你。