又开坑了。上次静态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代码解释

var dojoConfig = ...这个代码是script标签里的,其中packages属性很重要,目前不知道是什么,大概是模块登记表吧。
require方法,调用了myModule这个模块,用法和上次笔记类似。
回调函数也容易懂,即对myModule的两个方法进行使用而已。
 

3 总结

没啥好总结的,那个dojoConfig现在比较感兴趣,以后学习深入应该会知道干嘛用的吧。

【Dojo 1.x】笔记2 使用服务器环境及使用模块的更多相关文章

  1. laravel5.8笔记一:安装与服务器环境配置

    laravel版本:5.8 环境要求: PHP >= 7.1.3 OpenSSL PHP 扩展 PDO PHP 扩展 Mbstring PHP 扩展 Tokenizer PHP 扩展 XML P ...

  2. CentOS下Web服务器环境搭建LNMP一键安装包

    CentOS下Web服务器环境搭建LNMP一键安装包 时间:2014-09-04 00:50来源:osyunwei.com 作者:osyunwei.com 举报 点击:3797次 最新版本:lnmp- ...

  3. windows 7系统安装与配置Tomcat服务器环境

    windows 7系统安装与配置Tomcat服务器环境 学习了一个月的java基础,终于要迈向java web领域.学习java web开发就离不开服务器的支持,由于本人是菜鸟,只好求助度娘谷哥.在此 ...

  4. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

  5. LNAMP服务器环境搭建(手动编译安装)

    LNAMP服务器环境搭建(手动编译安装) 一.准备材料 阿里云主机一台,操作系统CentOS 6.5 64位 lnamp.zip包(包含搭建环境所需要的所有软件) http://123.56.144. ...

  6. 对于Tomcat服务器环境变量和启动配置的一点补充

    我们之前第一次使用Tomcat服务器运行jsp应用时,曾经给Tomcat配置过一个环境变量CATALINA_HOME,这个变量指定了Tomcat的安装位置,对于多个开发项目,我们一般会释放多个tomc ...

  7. 分布式搜索ElasticSearch单机与服务器环境搭建

    从上方插件官网中下载适合的dist包,然后解压.进入bin目录,可以看到一堆sh脚本.在bin目录下创建一个test.sh: bin=/home/csonezp/Dev/elasticsearch-j ...

  8. Mac 搭建 SVN 服务器环境

    Mac 搭建 SVN 服务器环境 一.创建svn repository svnadmin create /path/svn/pro //仓库位置,svn是svn的目录,pro是一个版本库的目录 PS: ...

  9. 搭建web服务器环境

    一. 安装apache 安装好之后测试:浏览器地址栏输入:localhost,若弹出"It works!"表明已成功安装. 管理方式:1.通过Apache自带的镜像管理器:2.wi ...

随机推荐

  1. 深入理解JVM(七)——性能监控工具

    前言 工欲善其事必先利其器,性能优化和故障排查在我们大都数人眼里是件比较棘手的事情,一是需要具备一定的原理知识作为基础,二是需要掌握排查问题和解决问题的流程.方法.本文就将介绍利用性能监控工具,帮助开 ...

  2. TensorFlow.org教程笔记(一)Tensorflow初上手

    本文同时也发布在自建博客地址. 本文翻译自www.tensorflow.org的英文教程. 本文档介绍了TensorFlow编程环境,并向您展示了如何使用Tensorflow解决鸢尾花分类问题. 先决 ...

  3. python之定义参数模块argparse(二)高级使用 --传参为函数的实现

    我们在文章python之定义参数模块argparse的基本使用中介绍了argparse模块的基本使用方法 当前传入的参数只能是int.str.float.comlex类型,不能为函数,这有点不方便,但 ...

  4. Python内置函数(26)——globals

    英文文档: globals() Return a dictionary representing the current global symbol table. This is always the ...

  5. 1.python简介

    简介 1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语言和 ...

  6. selenium之 chromedriver与chrome版本映射表(更新至v2.43)

    看到网上基本没有最新的chromedriver与chrome的对应关系表,便兴起整理了一份如下,希望对大家有用: chromedriver版本 支持的Chrome版本 chromedriver版本 支 ...

  7. 「造个轮子」——cicada(轻量级 WEB 框架)

    前言 俗话说 「不要重复造轮子」,关于是否有必要不再本次讨论范围. 创建这个项目的主要目的还是提升自己,看看和知名类开源项目的差距以及学习优秀的开源方式. 好了,现在着重来谈谈 cicada 这个项目 ...

  8. ES 01 - Elasticsearch入门 + 基础概念学习

    目录 1 Elasticsearch概述 1.1 Elasticsearch是什么 1.2 Elasticsearch的优点 1.3 Elasticsearch的相关产品 1.4 Elasticsea ...

  9. 《HelloGitHub》第 12 期

    <HelloGitHub>第 12 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高 ...

  10. 查找占用资源高的JAVA代码

    1. /tmp/hsperfdata_$USER目录 $USER是启动JAVA进程的用户,这里保存的所有用户启动的JAVA进程. 这些都JAVA进程的PID,里面存放的是JVM进程信息.你所用的jsp ...