又开坑了。上次静态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. LeetCode编程训练 - 拓扑排序(Topological Sort)

    拓扑排序基础 拓扑排序用于解决有向无环图(DAG,Directed Acyclic Graph)按依赖关系排线性序列问题,直白地说解决这样的问题:有一组数据,其中一些数据依赖其他,问能否按依赖关系排序 ...

  2. 【RL-TCPnet网络教程】第19章 RL-TCPnet之BSD Socket服务器

    第19章      RL-TCPnet之BSD Socket服务器 本章节为大家讲解RL-TCPnet的BSD Socket,学习本章节前,务必要优先学习第18章的Socket基础知识.有了这些基础知 ...

  3. 实战经验丨PHP反序列化漏洞总结

    又到了金三银四跳槽季,很多小伙伴都开始为面试做准备,今天小编就给大家分享一个网安常见的面试问题:PHP反序列化漏洞. 虽然PHP反序列化漏洞利用的条件比较苛刻,但是一旦被利用就会产生很严重的后果,所以 ...

  4. [Swift]LeetCode347. 前K个高频元素 | Top K Frequent Elements

    Given a non-empty array of integers, return the k most frequent elements. Example 1: Input: nums = [ ...

  5. [Swift]LeetCode442. 数组中重复的数据 | Find All Duplicates in an Array

    Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...

  6. [Swift]LeetCode733. 图像渲染 | Flood Fill

    An image is represented by a 2-D array of integers, each integer representing the pixel value of the ...

  7. HBase篇--搭建HBase完全分布式集群

    一.前述. 完全分布式基于hadoop集群和Zookeeper集群.所以在搭建之前保证hadoop集群和Zookeeper集群可用.可参考本人博客地址 https://www.cnblogs.com/ ...

  8. Qt窗口定制

    qt中的QWidget窗口支持窗体绘制,但是不支持窗口标题栏绘制,想要美观的界面,还需要自己去定制,下面我就介绍一种定制窗体的方法 一个窗口无非就3部分,标题栏.窗体和状态栏,接下来我定制的窗口没有状 ...

  9. Unity GC 优化要点

    参考:http://blog.csdn.net/znybn1/article/details/76464896 为啥要点?因为讲的重点. 游戏运行时来存储数据,当这些数据不再被使用时,存储这些数据的内 ...

  10. leetcode — symmetric-tree

    import java.util.Stack; /** * Source : https://oj.leetcode.com/problems/symmetric-tree/ * * * Given ...