Dojo 的强大不仅仅在于它提供的各种控件,还在于它提供的面向对象的">开发模式,以及各种应用级别的框架。除此以外,更值得一提的是:Dojo 提供了很多很强大的核心接口,基于这些接口,我们可以高效快捷的实现应用中所需要的各种逻辑和算法。这些接口支持各种浏览器,使得我们不用再去考虑浏览器差别所带来的各种实现问题。
Dojo 的这些接口大大简化了我们的 Web 前端开发的复杂度,使得我们能够在更短的时间内实现功能更为丰富的应用。这篇文章将重点介绍 Dojo 的核心接口所带给 Web 开发工程师们的各种便利以及它的一些使用技巧。
Dojo 核心接口简介
Dojo 的核心接口主要位于 Dojo 的三大库(“dojo”,“dijit”和“dojox”)中的“dojo”包里,它包括了日常 Web 开发中最为通用的一些组件和模块,覆盖面也非常广泛,囊括了 AJAX、DOM 操作,面向对象模式开发、事件、Deferred、数据(data stores)、拖拽(DND)和国际化组件等等。这些通用组件中用很多非常强大实用的核心接口,能给我们的日常 Web 开发带来相当大的便利。本文我们会深入详细的介绍这些核心接口(文中代码示例主要基于 Dojo 的 1.7 版本及以后)。
鉴于 Dojo 的核心接口比较复杂,内容比较多,所以,本文将 Dojo 的核心接口分为两个部分介绍:核心基础接口和核心功能接口。我们先来了解一下 Dojo 的核心基础接口。
核心基础接口
核心基础接口是 Dojo 中最为通用的一组接口,但凡基于 Dojo 开发的 Web 基本都会涉及到这些接口。
Kernel 接口 (dojo/_base/kernel)
Kernal 组件包含了 Dojo 核心里面的最基本的一些特性,这个组件往往不是由开发人员直接引入的,而是通过引入其它的某些常用核心组件时间接引入的。
清单 1. Kernel 代码示例
require(["dojo/_base/kernel"], function(kernel){ kernel.deprecated("dijit.layout.SplitContainer", "Use dijit.layout.BorderContainer instead", "2.0"); kernel.experimental("acme.MyClass"); var currentLocale = kernel.locale; query(".info").attr("innerHTML", kernel.version); });
首先,Kernel 的 deprecated 方法,用于在控制台输出相关警告信息,如某些包或方法被删除、修改了或者用户正在使用一个方法老版本等等。通过 deprecated 输出的信息只有的 dojoConfig 里设置了“isDebug”为 true 时才会输出到控制台。
然后,experimental 方法,同 deprecated 一样,不过它主要用来提示用户某些模块或者方法是 experimental 的,请谨慎使用。
最后,是“locale”和“version”属性,分别表示国际化信息和 Dojo 的版本信息。
Kernel 还有一个 global 的属性,在浏览器中就是 window 对象的一个别名:
清单 2. Kernel 的 global 代码示例
require(["dojo/_base/kernel", "dojo/on"], function(kernel, on){ on(kernel.global, "click", function(e){ console.log("clicked: ", e.target); }); });
清单 2 的操作就相当于给 window 对象绑上了一个“click”事件。
Dojo.config 接口 (dojo/_base/config)
Config 接口应该是我们最为熟悉不过的接口了,在我们引入 Dojo 的时候都会先做一些全局的配置,所使用的就是 Dojo 的 Config 接口。
清单 3. Config 基本代码示例
// 通过“data-dojo-config”属性配置 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Dojo dojo.config Tutorial</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script> </head> <body> <p>...</p> </body> </html> // 通过 JavaScript 变量配置 <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Dojo dojoConfig Tutorial</title> <script type="text/javascript"> var dojoConfig = { parseOnLoad: true, isDebug: true, locale: 'en-us', extraLocale: ['ja-jp'] }; </script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"> </script> </head> <body> <p>...</p> </body> </html>
可见,配置 Config 可以通过两种方式,“data-dojo-config”属性或者“dojoConfig ”变量,其效果是一样的。