又开坑了。上次静态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. 微软75亿收购Github，微软以开发者为中心的初心不变

    前天关于微软要收购 GitHub 的消息传出后,很多人都纷纷讨论,希望 GitHub 能够独立存在,不被任何大厂收购,可是 GitHub 也要生存啊.那又有人说:希望是 Google 来收购 GitH ...

  2. [Swift]LeetCode462. 最少移动次数使数组元素相等 II | Minimum Moves to Equal Array Elements II

    Given a non-empty integer array, find the minimum number of moves required to make all array element ...

  3. [Swift]LeetCode648. 单词替换 | Replace Words

    In English, we have a concept called root, which can be followed by some other words to form another ...

  4. ASP.NET 一个数据访问层的封装

    刚通过开通写博客的申请,向博客园的大佬致敬,由于一直以来都在网上搜索大家的思想,也有翻遍整个百度都有的找不到的时候,作为一个网民理应为互联网贡献一点东西. 下面是我工作后受一个师傅的影响对数据库访问层 ...

  5. 成熟的 Git 分支模型

    个人博客原文: 成熟的 Git 分支模型 今天介绍一下工作中会用到的 Git 分支模型. 先贴上图以表敬意 闲言 在学校不管是自己写课程设计还是给老师做项目,有 2 到 3 个人一起协作开发时就会使用 ...

  6. Nginx学习系列四默认负载均衡轮询及Ip_hash等常用指令介绍

    一.简介 Upstream模块是Nginx中一个核心模块,当客户端访问Nginx服务器的时候,Nginx会从服务器列表中选取压力小的服务器,然后分配给客户端进行访问.这个过程,Nginx通过轮询算法轮 ...

  7. mybatis中resultMap配置细则

    resultMap算是mybatis映射器中最复杂的一个节点了,能够配置的属性较多,我们在mybatis映射器配置细则这篇博客中已经简单介绍过resultMap的配置了,当时我们介绍了resultMa ...

  8. vue的基本操作

    vue的基本概念   挂载点:就是el属性对应html中的节点,实例只会处理挂载点下的内容. 模版:在挂载点内部的内容,也可以将模版内容卸载实例里面 如果有template属性会用模版替换外部html ...

  9. 想在Java中实现Excel和Csv的导出吗？看这就对了

    前言 最近在项目中遇到一个需求,需要后端提供一个下载Csv和Excel表格的接口.这个接口接收前端的查询参数,针对这些参数对数据库做查询操作.将查询到的结果生成Excel和Csv文件,再以字节流的形式 ...

  10. GraphQL 的前世今生

    GraphQL是什么 GraphQL是一种新的API标准,它提供了一种更高效.强大和灵活的数据提供方式.它是由Facebook开发和开源,目前由来自世界各地的大公司和个人维护.GraphQL本质上是一 ...