`
子衿青青
  • 浏览: 110472 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

实战Dojo与RequireJS集成 之二

 
阅读更多

Dojo 和requireJS 集成之二

作者: feijia (tiimfei@gmail.com)

在成功了配置了dojo和requireJS之后,我们要仔细分析一下这个模板项目的源代码, 看看Ben提供的程序框架究竟是怎么实现的。

首先我们会注意到 index.html

这是整个应用的入口。 在这里首先会看到一段JavaScript




这段脚本主要做了两个动作:

1. 配置reuqireJS 所要加载的包的名称路径 (有点类似于配置Java的classpath,告诉加载器 模块的位置)

2. 核心逻辑是在ready:function() 它指定了requireJS在整个页面DOM装载完成后要执行的逻辑。 这里就是装入app的依赖模块('app/App'和‘app/config' 。 ),并启动app.startup。

在requireJS 被加载后,它会解析我们这里定义的require对象。并在页面DOM装入完毕后执行ready属性所指定的回调函数。


除了这段脚本, index.html 中还有一段HTML定义了一个名为"app" 的div节点。这个节点就是将由App所创建的Widget所用的节点。 如果App成功运行,则这个Div中的html代码将会替换成由Widget定义的内容。如果App装入失败,用户就会看到写在index.html中的这段静态内容。" if you're seeing this - it didn't work"

下面我们就来看一下app/App是什么内容。 从路径上可以判断,这个模块指向我们项目中的app/App.js
===App.js


App.js 中,它先声明了自己的依赖模块,包括了dojo, dijit/_widget dojo/date/locale 等。 要特别注意的是,它还有一些特别的依赖 例如 'i18n!.nls/App' 这是requireJS的插件定义的格式。 表示这个依赖需要由一个名为i18n的requireJS插件去加载,而所加载的资源的路径为./nsl/App.js

requireJS 的plugin其实本身也是一个标准AMD模块。 ! 之前的部分就是这个模块的名字。 因为这里我们使用的是i18n,因此requireJS会试图先去加载一个名为i18n的模块。 默认的,它会在项目根目录去寻找名为i18n.js的文件加载。 如果我们希望把这个插件的位置移动一下到requirejs目录中,可以这样写

requirejs/i18n!.nls/App

类似的,我们看到另一个'text!./templates/App.html'依赖, text也是一个requireJS的标准插件, 这个插件的作用很简单就是把 一个文件作为字符串加载进来。 这里就是用来加载了一个我们接下来会用到的widget 模板:./templates/App.html
使用requireJS text插件的示例:


分析完了该程序的依赖,我们再来看App的逻辑是什么。 它只有一个return 语句, 内容是一个d.declare调用. 参数d就是dojo。我们知道
dojo.declare 是用来创建类的。 这里我们创建了一个基于widget和Templated的子类. 而参数Widget 对应 dijit/_Widget, Templated 对应 dijit/_Templated , 因此该类继承自dijit/_Widget 和dijit/_Templated。 该类还自

定义了一个模板字符串,和一个i18n 包。 buildRendering 是复写dojo._Widget基类的方法。主要就是获取了2个字符串。一个是用当前默认locale 的月份字符串,另一个是用法语的。 然后就执行父类的方法 this.inherited(arguments)

startup也是dijit._Widget 的基类方法,在一个Widget启动时调用。这里也直接调用了父类的方法,并弹出对话框(App is Started)

所以App实际就是声明了一个新的Widget类并指定了Widget的模板。 那么这个模板是怎么样的?

<div>
<h1>${i18n.heading}</h1>
<p>${i18n.welcome}</p>
<ul>
<li>default locale: ${defaultMonths}</li>
<li>locale 'fr-ch': ${frchMonths}</li>
</ul>
</div>



稍微了解一下dijit的模板机制就可以看懂这个非常简单的Widget模板了。 所有${xxx}的内容都会被相应的变量值替换。 我们在前面dojo.declare 中看到, ${defaultMonths} 和 ${frchMonths} 是自定义的两个字符串. 而i18n.heading 和 i18n.welcome 是从 'i18n!./nls/App 得来的值。



到这里我们已经看完了所有的代码。 下面是该程序的架构示意图:

这个例子看起来有些复杂,其实如果你只是想用requireJS 和dojo 可以非常简单。 几行代码就可以了,但是我们要反问自己AMD的优势究竟是什么?那就是更清晰的模块化代码结构和解藕。 因此这个应用程序模板提供了一个很好的例子,你可以在它的基础上进一步去搭建自己的前端应用。

在架构图中你可以看到它清晰的把加载器,程序入口和配置,程序的主要业务逻辑,以及应用所依赖的类库和资源都做了清晰的隔离. 而所有这些模块和资源全部都是使用requireJS来统一管理和加载的。当应用程序的逻辑逐渐变得复杂,使用各种的本地化资源和第三方类库时,这样模块化的优势就会体现出来.

分享到:
评论

相关推荐

    Requirejs异步加载Dojo1.6

    Dojo 1.6及更高版本支持AMD规范,因此可以直接与Requirejs配合使用。在加载Dojo模块时,可以利用Requirejs的异步加载特性,只加载当前需要的模块,而不是一次性加载整个Dojo库,这有助于优化性能。 ### 文件结构与...

    dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程

    2. **dojo/_base**:这是Dojo的基础模块,包含了Dojo的基本功能,如对象创建、事件处理、DOM操作等。例如,`dojo/query`用于选择DOM元素,`dojo/on`用于监听事件。 3. **dojo/ready**:这个模块用于确保DOM加载完成...

    实战DOJO中文文档.zip

    2. **DOM操作**:DOJO 提供了强大的DOM操作API,如`dojo/query`用于选择DOM元素,`dojo/dom-geometry`用于获取元素的尺寸和位置,以及`dojo/dom-class`和`dojo/dom-style`用于操作类名和样式。 3. **数据绑定**:...

    实战Dojo工具包中文版

    《实战Dojo工具包中文版》是一本专为Dojo框架初学者设计的指南,旨在帮助读者快速掌握这个强大的JavaScript库。Dojo是开源社区的一个重要成员,它提供了丰富的功能和组件,包括DOM操作、AJAX通信、动画效果、模块化...

    实战Dojo工具包

    ### 实战Dojo工具包:全面解析与应用实践 #### Dojo工具包概览 **Dojo** 是一款强大的开源JavaScript库,旨在简化Web应用程序的开发过程,特别是那些需要复杂用户交互的应用。作为一款“远远超出‘原型建造’”的...

    实战DOJO中文版教程

    【实战DOJO中文版教程】是一本专注于JavaScript框架DOJO的深入学习资料,旨在帮助初学者逐步提升到高级开发者的水平。DOJO是开源的JavaScript工具包,它提供了丰富的功能和组件,包括UI构建、数据管理、动画效果、...

    实战Dojo工具包 PDF

    《实战Dojo工具包》是一本专注于Web开发的实践指南,特别强调了Dojo工具包在Ajax技术中的应用。Dojo是一个开源JavaScript库,旨在提供一套全面的前端开发解决方案,包括UI组件、数据管理、动画效果以及Ajax通信等...

    dojo实战+实用例子

    首先,Dojo的核心特性之一是它的模块系统,称为AMD(Asynchronous Module Definition),它允许开发者以异步方式加载和组织代码,提高了页面的加载效率。在实际项目中,你可以利用`require`和`define`这两个关键函数...

    实战dojo工具包

    2. **dojo/_base**:这是Dojo的基础模块,包含了核心功能,如事件处理(dojo/on)、DOM操作(dojo/dom和dojo/dom-geometry)和类系统(dojo/_base/declare)等。 3. **dojo/ready**:用于确保DOM加载完成和所有模块...

    《实战Dojo工具包》教程 pdf

    《实战Dojo工具包》教程 pdf,Dojo是一个品质远远超出“原型建造”的Ajax框架库,本实用教程就是为Dojo而写。她将向我们介绍Dojo开发环境的创建、旅行路线编辑器、DOM和HTML的效果、处理DOM、使用Dojo创建AJAX远程...

    教程实战Dojo工具包

    数据管理是Dojo的重要部分,`dojo/data`模块提供了多种数据模型,如ItemFileReadStore和JsonRestStore,用于与服务器进行数据交互。例如,使用JsonRestStore来获取和更新JSON数据: ```javascript require(["dojo/...

    实战dojo工具包.pdf

    ### 实战Dojo工具包知识点概述 #### 一、Dojo工具包简介 **Dojo** 是一个功能强大的 JavaScript 库,旨在简化富客户端 Ajax 应用程序的开发过程。它不仅封装了复杂的浏览器兼容性问题,还提供了一系列实用工具和...

    Dojo-China.zip_chinadojo1688_dojo_dojo 实战_dojo中文网

    《Dojo-China.zip》是关于Dojo工具包的实战指南,源自chinadojo1688,主要针对中文用户,提供了丰富的Dojo编程知识。Dojo是一个强大的JavaScript库,尤其在构建富互联网应用(RIA)时,其功能和性能表现卓越。这个...

    RequireJS-Dojo-AngularJS:只需使用 requireJS 加载 dojo 和 angularjs 示例

    RequireJS-Dojo-AngularJSJust use requireJS to load dojo and angularjs example目的主要是想实践一下,如何通过requireJS管理angularjs和其他库,另外,为了充分利用angularjs的优势(MVC,数据双向绑定,指令系统)...

    RequireJS入门(二)

    RequireJS 是一个 JavaScript 的模块化加载库,它使得在浏览器端组织和管理代码变得更加有序,尤其是在大型项目中。本篇文章将深入探讨 RequireJS 的基础知识,包括它的核心概念、使用方式以及如何结合实际项目来...

    精通Dojo by Dojo之父

    鉴于此,图灵公司引进了Dojo之父亲自撰写的《Mastering Dojo》一书。 本书对Dojo进行了全面而深入地阐述,包括基本使用和高级技巧。全书以一个能让读者迅速上手的简单示例开篇,进而读者们将了解到Dojo的核心,也...

    dojo学习笔记

    Dojo 数据层提供了一种抽象,用于与各种数据源交互,如`dojo/data/ItemFileReadStore`用于XML或JSON数据。`dojo/store`模块则引入了新的数据存储API,更适应现代Web应用的需求。 6. **Dojo动画和效果** `dojo/fx`...

    DOJO 学习文档+Demo

    DOJO 模块化系统(RequireJS 预先集成) DOJO 使用 CommonJS 规范实现了一套模块化系统,允许开发者将代码分割成多个独立模块,便于组织和重用。通过 `dojo/require` 或 `require()` 函数来加载和依赖其他模块,...

    DOJO权威指南+DOJO1.1源码

    2. **模块化系统(RequireJS和AMD)** DOJO 1.1引入了Asynchronous Module Definition (AMD)的加载机制,通过require.js实现,使得代码的组织和依赖管理更加高效。AMD允许异步加载模块,提高了页面的加载速度,并且...

Global site tag (gtag.js) - Google Analytics