又开坑了。上次静态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. EF Core中避免贫血模型的三种行之有效的方法（翻译）

    Paul Hiles: 3 ways to avoid an anemic domain model in EF Core 1.引言 在使用ORM中(比如Entity Framework)贫血领域模型 ...

  2. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  3. [Swift]LeetCode298. 二叉树最长连续序列 $ Binary Tree Longest Consecutive Sequence

    Given a binary tree, find the length of the longest consecutive sequence path. The path refers to an ...

  4. [Swift]LeetCode435. 无重叠区间 | Non-overlapping Intervals

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  5. [Swift]LeetCode796. 旋转字符串 | Rotate String

    We are given two strings, A and B. A shift on A consists of taking string A and moving the leftmost ...

  6. bootstrap分页插件的使用

    项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...

  7. BBS论坛（三十）

    30.显示评论和添加评论功能完成 (1)apps/models.py class CommentModel(db.Model): __tablename__='comment' id=db.Colum ...

  8. C#使用GUID

    全局唯一标识符(GUID,Globally Unique Identifier) What is GUID 也称作 UUID(Universally Unique IDentifier) . GUID ...

  9. 程序员如何面试才能拿到offer

    一.概述 面试,难还是不难?取决于面试者的底蕴(气场+技能).心态和认知及沟通技巧.面试其实可以理解为一场聊天和谈判,在这过程中有心理.思想上的碰撞和博弈.其实你只需要搞清楚一个逻辑:“面试官为什么会 ...

  10. pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; try restarting transaction')错误处理

    问题描述: 在使用pymysql库时,利用游标执行插入操作,产生错误,会出现pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; ...