dojo中模块的定义与使用

2023-12-06 23:08
文章标签 模块 使用 定义 dojo

本文主要是介绍dojo中模块的定义与使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

异步模块定义(AMD)格式是Dojo从Dojo 1.7开始采用的模块格式。它提供了许多传统Dojo模块样式的增强功能,包括完全异步操作,真正的程序包可移植性,更好的依赖关系管理以及改进的调试支持。它也是一个社区驱动的标准,这意味着编写到AMD规范的模块可以与任何其他符合AMD的加载器或库一起使用。

1 什么是模块

模块是可由单个引用访问的值。如果要在模块中公开多个数据或函数,则它们必须是表示模块的单个对象的属性。使用模块对模块化编码更有意义,将代码拆分为逻辑子集以处理特定功能。

2 创建模块

使用AMD,可以通过注册到加载程序的方式来创建模块。加载器就是处理定义和加载模块背后逻辑的代码。加载器定义了与之交互的函数:requiredefine
全局函数define中使用加载器注册模块。

2.1 语法

define函数接受以下参数:
moduleId(可选,默认=未定义):模块标识符。此参数主要是早期AMD加载器的历史工件或支持AMD之前的Dojo,不应提供。
dependencies(optional,default = []):模块标识符的数组,它们是模块的依赖项。如果已指定,将在评估模块之前解析这些模块,并将它们作为参数按顺序传递给工厂函数。
factory:模块的值,或“factory”函数返回值

2.2 示例

define(function(){var privateValue = 0;return {increment: function(){privateValue++;},decrement: function(){privateValue--;},getValue: function(){return privateValue;}};
});

此代码使用闭包来创建外部代码无法直接访问的私有值,但可以通过作为模块值返回的对象上提供的方法进行检查和操作。

定义的模块是对对象的引用,而不是构造函数 - 这意味着加载此模块的每一段代码都将获得对完全相同对象的引用。通常,模块返回构造函数,但在某些情况下,返回单个对象是合适的。

3 配置加载程序

要利用AMD,首先需要显式配置加载程序以异步方式运行。这是通过将async配置属性设置为true

<script data-dojo-config="async: true" src="dojo1.13.0/dojo.js"></script>

而我们必须在加载dojo.js文件之前设置dojoConfig变量。

<script>var dojoConfig = {baseUrl: "",tlmSiblingOfDojo: false,packages: [{ name: "dojo", location: "dojo1.13.0/dojo" },{ name: "dijit", location: "dojo1.13.0/dijit" },{ name: "dojox", location: "dojo1.13.0/dojox" },{ name: "resources", location: "dojo1.13.0/resources"}]};
</script>
<script src="dojo1.13.0/dojo/dojo.js" data-dojo-config="async: true"></script>
  • baseUrl:定义加载包的基本URL,默认dojo.js文件夹的路径。
  • tlmSiblingOfDojo:默认情况下,加载程序期望在文件夹中找到模块,这些模块是加载加载器的文件夹的兄弟文件夹(即存放dojo.js文件文件夹的兄弟文件夹)。默认值为true
  • packages:包配置对象的数组。在最基础的层面上,包只是模块的集合。dojodijitdojox都是包的例子。然而,与目录中的简单模块集合不同,软件包充满了一些额外的功能,这些功能显着增强了模块的可移植性和易用性。便携式包是独立的,也可以通过cpm等工具安装。包配置允许您指定:
    1. name:包的名称。这应该与包含模块的文件夹的名称匹配。
    2. location:包裹的位置; 可以是其路径相对baseUrl 或绝对路径。
    3. main(可选,默认= main.js):用于在有人试图要求包本身时加载的正确模块。

4 加载模块

要加载模块,首先需要某种方法来识别它。与其他编程语言的模块/包系统类似,AMD模块由其路径和文件名标识。
将前面的代码保存在resource文件夹下,名字为counter.js。文件目录结构如下:

/index.html/dojo1.13.0//dijit//dojo//dojox//themes//resources/counter.js

使用require([ "resources/counter"])语句来加载模块。

require函数接受以下参数:
configuration(optional,default=undefined):具有加载程序配置选项的对象 - 这允许您在运行时重新配置加载程序。
dependencies(optional,default = []):模块标识符数组。如果指定,则在评估代码之前将解析这些模块。它们将按列出的顺序加载,并作为参数传递给回调函数,也按顺序传递。
callback:包含要运行的代码的函数,该代码取决于中的模块dependencies。您需要将代码包装在回调函数中,以支持异步加载并能够使用对模块的非全局引用。

index页面如下所示:

<html><body><script>var dojoConfig = {baseUrl: "",tlmSiblingOfDojo: false,packages: [{ name: "dojo", location: "dojo1.13.0/dojo" },{ name: "dijit", location: "dojo1.13.0/dijit" },{ name: "dojox", location: "dojo1.13.0/dojox" },{ name: "resources", location: "dojo1.13.0/resources"}]};</script><script src="dojo1.13.0/dojo/dojo.js" data-dojo-config="async: true"></script><script>require(["resources/counter"], function(counter){log(counter.getValue());counter.increment();log(counter.getValue());counter.decrement();log(counter.getValue());});</script></body>
</html>

如果需要对模块的引用,则需要提供回调函数。加载器将确保模块已加载,一旦加载,它将调用回调函数将任何模块作为参数传递给它。与任何其他函数一样,可以随意命名参数:不要求参数名称与模块名称有任何关系。这就是说,使用类似名称的模块名称很好的做法。本例中require中的第二个参数function即是回调函数,该回调函数中的参数为counter,取了和模块相同的名字。

5 模块加载模块

当应用程序由组织良好的模块组成时,模块之间自然存在很多依赖关系。define函数可以自动加载模块的依赖项,我们只需要将依赖项列表传递到define模块值之前。例如:

define(["dojo/_base/declare","dojo/dom","app/dateFormatter"
], function(declare, dom, dateFormatter){return declare(null, {showDate: function(id, date){dom.byId(id).innerHTML = dateFormatter.format(date);}});
});
  1. 多个依赖项:依赖项列表中指定了“dojo/dom”和(假设的)“app/dateFormatter”模块。
  2. 返回一个构造函数 。

这篇关于dojo中模块的定义与使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/463691

相关文章

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码,有一段代码涉及到Cursor,感觉写法挺有意思的。注意是Cursor,而不是Consumer

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例:行注释2. 块注释示例:块注释3. 文档注释示例:文档注释4. 综合示例总结Rust 中的注释

Linux使用cut进行文本提取的操作方法

《Linux使用cut进行文本提取的操作方法》Linux中的cut命令是一个命令行实用程序,用于从文件或标准输入中提取文本行的部分,本文给大家介绍了Linux使用cut进行文本提取的操作方法,文中有详... 目录简介基础语法常用选项范围选择示例用法-f:字段选择-d:分隔符-c:字符选择-b:字节选择--c

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

springboot的调度服务与异步服务使用详解

《springboot的调度服务与异步服务使用详解》本文主要介绍了Java的ScheduledExecutorService接口和SpringBoot中如何使用调度线程池,包括核心参数、创建方式、自定... 目录1.调度服务1.1.JDK之ScheduledExecutorService1.2.spring

Java使用Tesseract-OCR实战教程

《Java使用Tesseract-OCR实战教程》本文介绍了如何在Java中使用Tesseract-OCR进行文本提取,包括Tesseract-OCR的安装、中文训练库的配置、依赖库的引入以及具体的代... 目录Java使用Tesseract-OCRTesseract-OCR安装配置中文训练库引入依赖代码实

Python使用Pandas对比两列数据取最大值的五种方法

《Python使用Pandas对比两列数据取最大值的五种方法》本文主要介绍使用Pandas对比两列数据取最大值的五种方法,包括使用max方法、apply方法结合lambda函数、函数、clip方法、w... 目录引言一、使用max方法二、使用apply方法结合lambda函数三、使用np.maximum函数

Qt 中集成mqtt协议的使用方法

《Qt中集成mqtt协议的使用方法》文章介绍了如何在工程中引入qmqtt库,并通过声明一个单例类来暴露订阅到的主题数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一,引入qmqtt 库二,使用一,引入qmqtt 库我是将整个头文件/源文件都添加到了工程中进行编译,这样 跨平台