使用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用来扩展自定义
  • 不同项目中分享模块代码
  • 在出现bugDojo class中安全的创建混合的class

    Dojoclass系统使用原型继承,允许原型(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来限制属性自定义的数量。任何东西都可以被修改或者扩展。

原因三:基于方面(Aspects)和方法到方法的事件

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

    能够让你在触发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 Bfunction 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主要特性如下:

  • 自动探测设备类型
  • 拥有iOSAndriodBlackberrycommon这四种主题 
  • 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 toolkitGFX类库毫无疑问更将的强大。GFX可以用来配置SVGVMLSilverlightCanvaswebGL格式的矢量图形。提供了一个健壮的封装来创建不同的矢量图片形状(线状图等等),包括:

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

创建代码如下:

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

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

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

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

原因九:DOH测试框架

    测试对于我们来说非常重要,特别是对于客户端而非服务器端的程序来说。随着不同的浏览器的出现,客户端的互动测试成为一个必须的内容和步骤。Dojo toolkit提供了自己的测试框架。别名DOHDojo 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编译流提供了超棒的控制编辑文件的功能,帮助你压缩CSSJavascript,这样你的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会更适合你。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值