【Dojo 1.x】笔记2 使用服务器环境及使用模块
又开坑了。上次静态html页面完成本地module的引用，算是成功了，但是并不知道是怎么运作的，没关系慢慢来。
我用的环境是VSCode，这次因为官方说要在服务器环境下运行，所以就用上了VSCode的简单服务器插件Live Server.
1. 构造起目录
一个js文件，用于定义自己的模块，用define方法。
一个html文件，组织页面，调用js文件里写好的模块。
关于js文件怎么写，代码给出：
define(
[
'dojo/dom'
],
function(dom) { var oldText = {}; return {
setText: function(id, text) {
var node = dom.byId(id);
oldText[id] = node.innerHTML;
node.innerHTML = text;
}, restoreText: function(id) {
var node = dom.byId(id);
node.innerHTML = oldText[id];
delete oldText[id];
}
};
}
);
myModule
出效果再看解释。
html：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head> <body>
<h1 id="greeting">Hello</h1>
<script>
var dojoConfig = {
async: true,
packages: [{
name: "modules",
location: location.pathname.replace(/\/[^/]*$/, '') + '/modules'
}]
};
</script>
<script src="https://cdn.bootcss.com/dojo/1.10.4/dojo.js" data-dojo-config="async: true"></script> <script>
require([
'modules/myModule'
], function(myModule) {
myModule.setText('greeting', 'Hello Dojo!'); setTimeout(function() {
myModule.restoreText('greeting');
}, 3000);
});
</script>
</body> </html>
useMymodules
2. 运行效果与代码解释
按下VSCode右下角的GoLive图标，直接在服务器环境执行html文件。
出现文字，Hello Dojo!，三秒后变成Hello。
接下来对js文件里定义的模块进行解释。
2.1 模块代码解释
define方法有两个参数，一个是这个模块需要用到的其他模块名称，这里是dojo下的dom模块（自带模块）
第二个参数是方法，此方法的参数与第一个参数（字符串数组）顺序严格对应，名字随意，用于传递模块的实例。
它返回了一个匿名对象，包含setText和restoreText两个方法，意思是填入文本、恢复原来文本。
这就对应了三秒的“Hello, Dojo!”和恢复“Hello”的两个动作了。
整个模块定义不难理解，设置返回值即可（暴露出去，让外部访问该模块的功能）
2.2 HTML代码解释
3 总结
没啥好总结的，那个dojoConfig现在比较感兴趣，以后学习深入应该会知道干嘛用的吧。
【Dojo 1.x】笔记2 使用服务器环境及使用模块的更多相关文章
- laravel5.8笔记一：安装与服务器环境配置
laravel版本:5.8 环境要求: PHP >= 7.1.3 OpenSSL PHP 扩展 PDO PHP 扩展 Mbstring PHP 扩展 Tokenizer PHP 扩展 XML P ...
- CentOS下Web服务器环境搭建LNMP一键安装包
CentOS下Web服务器环境搭建LNMP一键安装包 时间:2014-09-04 00:50来源:osyunwei.com 作者:osyunwei.com 举报 点击:3797次 最新版本:lnmp- ...
- windows 7系统安装与配置Tomcat服务器环境
windows 7系统安装与配置Tomcat服务器环境 学习了一个月的java基础,终于要迈向java web领域.学习java web开发就离不开服务器的支持,由于本人是菜鸟,只好求助度娘谷哥.在此 ...
- Python 创建本地服务器环境生成二维码
一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
- LNAMP服务器环境搭建（手动编译安装）
LNAMP服务器环境搭建(手动编译安装) 一.准备材料 阿里云主机一台,操作系统CentOS 6.5 64位 lnamp.zip包(包含搭建环境所需要的所有软件) http://123.56.144. ...
- 对于Tomcat服务器环境变量和启动配置的一点补充
我们之前第一次使用Tomcat服务器运行jsp应用时,曾经给Tomcat配置过一个环境变量CATALINA_HOME,这个变量指定了Tomcat的安装位置,对于多个开发项目,我们一般会释放多个tomc ...
- 分布式搜索ElasticSearch单机与服务器环境搭建
从上方插件官网中下载适合的dist包,然后解压.进入bin目录,可以看到一堆sh脚本.在bin目录下创建一个test.sh: bin=/home/csonezp/Dev/elasticsearch-j ...
- Mac 搭建 SVN 服务器环境
Mac 搭建 SVN 服务器环境 一.创建svn repository svnadmin create /path/svn/pro //仓库位置,svn是svn的目录,pro是一个版本库的目录 PS: ...
- 搭建web服务器环境
一. 安装apache 安装好之后测试:浏览器地址栏输入:localhost,若弹出"It works!"表明已成功安装. 管理方式:1.通过Apache自带的镜像管理器:2.wi ...
随机推荐
- 【二代示波器教程】第14章 uCOS-III操作系统版本二代示波器实现
第14章 uCOS-III操作系统版本二代示波器实现 本章教程为大家讲解uCOS-III操作系统版本的二代示波器实现.主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任 ...
- win7系统下dos界面无法自由调整大小
刚开始在win7系统,在dos界面下做MySQL的实验,很多数据不能显示界面上,只能显示固定的大小,以为这是系统的原因,后来在网上查找了一些资料.终于发现可以自由调节dos界面大小的方法.下面给出截图 ...
- Android端IM应用中的@人功能实现：仿微博、QQ、微信，零入侵、高可扩展
本文由“猫爸iYao”原创分享,感谢作者. 1.引言 最近有个需求:评论@人(没错,就是IM聊天或者微博APP里的@人功能),就像下图这样: ▲ 微信群聊界面里的@人功能 ▲ QQ群聊界面里 ...
- C语言——Win10系统下安装VC6.0教程
学习一门语言最重要的一步是搭建环境,许多人搭建在搭建环境上撞墙了,就有些放弃的心理了:俗话说,工欲善其事,必先利其器:所以接下来我们进行学习C的第一步搭建环境; 第一步:先解压我们下载好的VC6.0软 ...
- PHP的Memcached简单实现
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.也可动态缓存一些实 ...
- 10 个深恶痛绝的 Java 异常。。
异常是 Java 程序中经常遇到的问题,我想每一个 Java 程序员都讨厌异常,一 个异常就是一个 BUG,就要花很多时间来定位异常问题. 什么是异常及异常的分类请看这篇文章:一张图搞清楚 Java ...
- javascript 使用小技巧总结
按位取反 ~a 即:返回 -(a+1),会去掉小数点. let a = 3.14; let b = ~a; //b = -(3.14+1) 取整 为-4: let c = ~b; //c = -(-4 ...
- GoJS学习笔记
GoJS 和 GO 语言没有关系,它是一个用来创建交互式图表的 JavaScript 库. 基础概念 GraphObject 是所有图形是抽象基类,基本上 GoJS 中,万物皆 GraphObject ...
- spark System memory must be at least
运行 ScalaSpark 程序的时候出现错误: System memory * must be at least *.Please increase heap size using the --dr ...
- Bootstrap之底层媒体查询
<style> @media only screen and (min-width:1024px ) { #box{ display: flex; flex-direction: row; ...