Hello Dojo:企业级前端框架快速入门

第一部分:Hello DOJO:快速入门

导言

欢迎您来学习Dojo。

Dojo一个JavaScript工具包,可以节省您的开发时间和规模。 它提供构建Web应用程序所需的一切——语言实用程序、UI组件等等,且都在一个地方,旨在完美地协同工作。

在这个教程中,你将学会怎么加载Dojo,然后浏览一些核心功能。你也会学到关于Dojo的基于AMD模式架构、如何加载附加模块来向网站或应用添加额外的扩展功能,并且学会在遇到问题是如何获得帮助等。

另外,未来体系完整的学习Dojo这个企业级的前端框架,这里请你做好如下准备:

1. 下载最新版dojo-release-1.13.0.zip。下载地址为:https://dojotoolkit.org/download/

2. 准备一个web服务器:如Apache Http Server或其他IIS、Tomcat等,否则有些dojo的功能在存静态页面中没有效果,还有所谓跨域问题等。所以这个服务器是必须的。

3. 解压下载文件包,放在应用的根目录下,形式如下:

WebRoot(如myDojo)

|-- dojo-release-1.13.0

|--dojo

|--dijit

|--其它dojo模块包

|--其它

开始

在Web页面中启用Dojo是很简单的,像常规的其他Javascript文件的引入一样,只需要把"dojo.js"包含到网页中即可。Dojo可以在流行的CDN 【CDN的全称是Content Delivery Network,即内容分发网络。CDN的通俗理解就是网站加速,CPU均衡负载,可以解决跨运营商,跨地区,服务器负载能力过低,带宽过少等带来的网站打开速度慢等问题。——有兴趣可自己另行研究】上使用。首先,创建一个名为hellodojo.html的文件,并中输入以下内容,然后在Web浏览器中打开它。

清单-1:加载Dojo

Hello Dojo:企业级前端框架快速入门

通常情况下,一旦你加载了一个库的JavaScript文件,你可以使用它的所有方法。Dojo过去确实如此,但是在1.7版本(及以后)中,Dojo为其源代码采用了异步模块定义(AMD-Asynchronous Module Definition)格式,允许完全模块化的Web应用程序开发。之所以选择AMD是因为它使用纯JavaScript,允许源文件在Web浏览器中工作,同时还支持生成优化资源的构建过程,以提高部署中的应用程序性能。

JavaScript文件包"dojo.js"加载后,有哪些东西时可用的呢?首先,要知道,Dojo的AMD加载器是通过定义两个全局功能函数实现的,即require和define两函数。AMD进一步详细内容会在后续的"AMD简介教程"学习到。对于入门而言,了解require可以让您加载模块并使用它们就足够了,而define则允许您定义自己的模块。 一个模块通常是一个单一的JavaScript源文件

Dojo的一些HTML DOM操作的基本模块是dojo / dom和dojo / dom-construct。 让我们看下如何加载这些模块并使用它们提供的功能:

代码清单-2:操作HTML的DOM

Hello Dojo:企业级前端框架快速入门

Require的第一个参数是一个模块ID数组参数(唯一标识你想加载的模块)。通常,这些id直接对应模块文件名——你可以查看Dojo工具包的源码,在dojo目录下,可以看到对应定义的那些模块化文件,如本例中的dom.js和dom-construct.js文件。

AMD加载器是异步操作的,在JavaScript异步操作中是通过回调实现的,因此require函数需要的第二个参数是一个回调函数。在这个函数中,需要自己提供使用模块的代码。AMD加载器将模块作为参数传递给回调函数(与它们在模块ID数组中指定的顺序相同)。您可以自由地命名为您的回调函数的参数名,但为了保持一致性和可读性,我们建议使用基于模块ID的名称。可以看到dom和dom构造模块使用它的id获取对dom节点的引用,并对其内容进行操作。AMD加载器将自动加载所请求模块的所有子依赖关系,因此只需要直接使用的模块加入到位于依赖列表中即可。

定义AMD模块

到此,你已经看到了一个加载和使用模块的例子。为定义和加载你自己的模块,你需要确保你正在从HTTP服务器加载你的HTML文件(运行在web服务器上,如Apache Http Server,本地主机服务模式就可以,之所以确实需要一个HTTP服务器,因为有安全原因的的微妙关系,将阻止许多事情与"file:///"协议)。对于这些示例,除了提供文件服务能力之外,您不需要Web服务器中的任何奇特功能。在你的包含hellodojo.html的目录下(根目录),添加一个demo目录,并在demo目录中创建一个命名为myModule.js的模块文件。

目录结构:

Root(应用根目录)

|-demo(一级目录)

|-myModule.js(一级目录下文件)

|-hellodojo.html(根目录下页面静态文件)

清单-3:myModule.js清单

Hello Dojo:企业级前端框架快速入门

AMD的define函数接受与require函数类似的参数:一个模块ID数组参数和一个回调函数。AMD加载程序将回调函数的返回值存储为模块的值,因此任何其他用require函数加载此模块的代码(或define引入)都将接收到对定义模块的返回值的引用。

CDN用法

从CDN使用Dojo加载本地模块时需要一些额外的配置(有关配置Dojo的AMD加载程序和使用带有CDN的Dojo的更多信息,请参阅高级AMD使用带有CDN模块的教程,后续提供。)

以原来的hellodojo.html页面文件为基础,对其做如下更新:

代码清单-4:

Hello Dojo:企业级前端框架快速入门

除了为Dojo添加配置之外,我们还重新定义了主代码——现在仅加载demo/myModule模块,用它来完成页面文本的操作。正如你所看到的,定义和加载模块非常简单。我们还改变了dojo.js的网址省略协议(第26行) - 这将创建一个使用任何协议的页面链接(HTTP或HTTPS),防止混合内容引起的在某些浏览器的安全警告。

在AMD模块中组织代码允许您创建可在浏览器中立即执行的模块化JavaScript源代码,并且易于调试。AMD模块使用本地作用域的变量,避免混淆全局名称空间并提供更快速的名称解析。AMD是一个具有多种实现的标准规范,因此您不会被锁定在任何一个单独的实现中 - AMD模块可以与任何AMD加载器一起使用。

等待DOM

Web应用程序需要完成的常见事情之一就是在执行代码之前确保浏览器的DOM可用。这是通过称为"plugin插件"的特殊AMD模块完成的。插件可以像其他模块一样,但是它们的特殊功能只能通过在模块标识符的末尾添加感叹号(bang)来激活。在DOM就绪事件的情况下,Dojo提供了dojo / domReady插件模块。只需将此插件作为依赖项包含在任何require或define调用中,直到DOM准备好,回调函数才会被触发。代码清单如下:

清单-5:页面DOM就绪(注意引入插件模块后的感叹号!)

require([

'dojo/dom',

'dojo/domReady!'

], function (dom) {

var greeting = dom.byId('greeting');

greeting.innerHTML += ' from Dojo!';

});

完整页面清单如下:

Hello Dojo:企业级前端框架快速入门

上面的例子只是给greeting元素添加了一些文本 - 一旦DOM被加载,只能可靠地完成这些事情(我们没有在之前的代码中使用它,因为脚本元素包含在body元素的底部 - 这会延迟脚本的处理,直到DOM已经加载)。再次强调,模块标识符以感叹号"!"结束, 没有这个,dojo / domReady模块就会像其他模块一样工作。在某些情况下,和dojo / domReady一样,我们只是加载一个模块,因为它的副作用并不需要引用它。AMD加载程序无法知道这一点 ——它始终将依赖项数组中的每个模块的引用传递给回调函数,因此,不需要使用返回值的任何模块都应该放在依赖项数组的末尾,并在回掉函数的参数列表中省略对它的引用。

添加可视效果

现在我们可以添加动画来使例子更有动感活性。通过向页面中加载"dojo/fx"模块来添加相应的动画效果。基于前面的greeting页面元素,应用"dojo/fx"模块的slideTo方法来添加滑动效果。

代码清单-6:实现元素的滑动动画

Hello Dojo:企业级前端框架快速入门

完整页面代码清单如下:

Hello Dojo:企业级前端框架快速入门

如你所见,又加了一个依赖模块"dojo/fx",然后使用这个模块来使一个页面greeting元素动画起来。

使用Dojo方式

CDN是方便的。 我们在教程示例中使用它们,因为这意味着您可以直接复制代码,而不必更改任何内容以使其适用于您。 然而,也存在如下缺点:

1)、出于性能原因,它们是Dojo的"构建"版本,这意味着每个模块都被最小化和优化,以便通过Internet高效地发送。 这意味着当你遇到问题时,他们更难调试。

2)、他们要求您的用户有权访问公共Internet以使用您的应用程序。 在很多情况下,可能或可能不实际。

3)、它需要更多的努力来包含您自己的自定义模块。

4)、如果您想要应用程序生产化应用,其性能将从为特定应用程序和目标浏览器量身打造的Dojo构建版本中受益匪浅,而您无法通过适合所有CDN构建的单一尺寸来实现这一目标。

那么,按照以下步骤开始使用Dojo源代码,这通常是如何使用Dojo开发项目的方式:

1)、下载dojo包,最终发行版源代码包。

2)、解压dojo包到项目文件夹下,其目录结构形式如下:

Hello Dojo:企业级前端框架快速入门

3)、本地加载dojo.js,而不是从CDN加载

<script src="dojo/dojo.js"></script>

4)、更新你的包配置,形如下:

Hello Dojo:企业级前端框架快速入门

获取帮助

每当你感到困惑或遇到一个棘手的问题,你并不孤单! 志愿者已准备好通过电子邮件在dojo-interest邮件列表上和irc.freenode.net的#dojo上通过IRC协助。

如果您需要紧急或保密的帮助,或有一个我们的志愿者团队无法解决的问题,则通过SitePen也可以获得商业Dojo支持。Dojo官网:

接下来……

开始启用dojo工具包很简单,就是加个script标签并加入相应模块,dojo的应用广泛和强大,我们现在只是以管窥豹,得其九牛一毛。后续,将酌情推出dojo相关系列主题教程,使你更好的掌握这个企业级的前端应用框架。

——请各位敬请期待,并请关注、收藏和转发。

您的认可,就是动力!再次感谢。

Hello Dojo:企业级前端框架快速入门

Hello Dojo:企业级前端框架快速入门

相关推荐