dojo.require 详解

Dojo 前端之家
前端之家收集整理的这篇文章主要介绍了dojo.require 详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前,用户基本上不需要具备任何基础知识. 你可以用script远程链接到dojo(dojo.js),也可以把dojo.js下载到本地并用script标签加载.

如果你不太了解dojo,可以参考一下如下资料:

大体上,dojo.js和jquery.js 或者 prototype js,里面有很多开发web应用的常用的特性: 包括:

  • JavaScript Language Helpers
  • Object 工具
  • Array 工具
  • DOM 操作
  • 标准的事件机制
  • Ajax & 跨域请
  • JSON 工具
  • 简单特效
  • 浏览器兼容

不仅如此,dojo还有很多其他javascript库(jquery,ext等等)所不具有的功能. 其中一个很重要的功能就是模块化的机制 - 模块系统(dojo.require()). JavaScript 和 浏览器本身以及其他的javascript库并不支持这种特性,dojo很好的解决了这种问题.

模块系统

dojo.require('my.module')用于加载javascript文件,功能类似于script标签的作用.

假设你有一个本地的开发环境,目录结构如下:(http://localhost:8888.)

index.html是一个包含dojo.js 简单页面.

<!DOCTYPE html>
<html lang=”en”>
<head>
<Meta charset=”utf-8″ />
<title>Dojo</title>
</head>
<body>
<script src=”dojo/dojo.js”></script>
</body>
</html>

假设我们要用Flickr API获取数据,这时候,我们就要用到跨域请求,但是这些功能模块并不是在dojo base库里面,我们需要另外加载所需的dojo模块:

<!DOCTYPE html>
<html lang=”en”>
<head>
<Meta charset=”utf-8″ />
<title>Dojo</title>
</head>
<body>
<script src=”/dojo/dojo.js”></script>
<script src=”/dojo/io/script.js”></script>
</body>
</html>

这里我们可以用script标签解决这种问题,同样还有另外一种方式,这种方式体现了模块系统的宗旨: 我们用dojo.require()加载dojo.io.script

<!DOCTYPE html>
<html lang=”en”>
<head>
<Meta charset=”utf-8″ />
<title>Dojo</title>
</head>
<body>
<script src=”/dojo/dojo.js”></script>
<script>
dojo.require(”dojo.io.script”);
//Note: do not include the .js
</script>
</body>
</html>

通过dojo.require()我们获得了一个模块系统,它提供了一系列我们开发复杂web2.0页面所需要的组件. 接下来的内容我们会着重介绍模块系统的特性:

  • 缓存管理
  • 命名空间管理
  • 路径管理
  • 依赖管理

首先,dojo.require()会避免重复加载,如果script脚本被浏览器缓存了,dojo会调用缓存的资源从而避免不必要的http请求,事实上,你可以随便调用dojo.require(),不管调用了多少dojo.require(),dojo都会保证同样的模块只会被加载一次.

我们也可以创建自己的模块. 让我们回到Flickr API的例子,我们要开发一个用Flickr数据的大型web应用,我们需要能很好的组织和管理这些javascript代码. 归根结底,我们需要创建名为flickrApp的命名空间用于保存所有该应用的逻辑功能. 为了达到这个目的,我们更新原有的目录结构,创建一个flickrApp.js文件:

flickrApp.js看起来似乎仅仅是一个js文件,但如果你用dojo的眼光来看他,你会发现他其实应该是一个模块,为了让dojo识别他是这个模块,我们用dojo.provide()方法初始化这个js文件,将其变为一个dojo的模块. 我们加入如下代码到 flickrApp.js 文件中:

[javascript] view plain copy
  1. dojo.provide(”flickrApp“);//similartodoingflickrApp={};

dojo.provide()创建了一个以你传入的字符串(flickrApp)命名的对象结构(名字空间), 我们这里是创建了一个名为flickrApp的对象,该对象创建后,我们便可以像定义该对象的各个属性一样来定义该应用(flickrApp)的各个方面,下面是 flickrApp.js 一个例子:

copy
  1. dojo.provide(”flickrApp”);
  2. //startcreatingtheapplicationlogicformyflickrapp
  3. flickrApp.getData=function(){};
现在我们可以用 dojo.require()来加载我们自定义的模块到HTML页面上:

<!DOCTYPE html>
<html lang=”en”>
<head>
<Meta charset=”utf-8″ />
<title>Dojo</title>
</head>
<body>
<script src=”/dojo/dojo.js”></script>
<script>
dojo.require(”dojo.io.script”);
dojo.require(”flickrApp”);
</script>
</body>
</html>

问题来了， dojo是怎么知道flickrApp.js模块的文件系统中存放的位置的呢？ 答案就是dojo的路径管理机制， dojo会根据你传入dojo.provide()的字符串来定位该模块的位置，基准点是dojo.js的上一级目录， 比如dojo.js在http://localhost:8888/dojo/dojo.js，所以dojo会在http://localhost:8888/这个目录级别（dojo.js的上一级）来定位所有的模块。 为了说明这个问题， 我们现在来再一次改变例子的文件结构，使其看起来更加具有组织性，如下：

此时，所有的应用相关的代码都在flickrApp这个目录（名字空间）下，在这个目录下，我们可以更进一步将该应用切分成不同的模块。第一个模块就是data.js模块，包含获取Flickr数据的逻辑功能，以及跨域，返回数据等等功能。基于这个改变，我们需要在data.js里面加入dojo.provide()语句来告诉他新的目录结构的改变，如下（data.js）：

copy

    //belowissimilartodoingvarflickrApp={};flickrApp.data={};
  1. dojo.provide(”flickrApp.data“);
  2. //Note:donotincludethe.js
  3. flickrApp.data.getData=function(){};

就像我们之前所说的，dojo会从dojo.js（http://localhost:8888/dojo/dojo.js）的上一级目录来开始定位各个模块，所以这里dojo定位我们的data.js模块的路径为http://localhost:8888/flickrApp/data.js。此时，我们的HTML代码也要做相应的改动：

<!DOCTYPE html>
<html lang=”en”>
<head>
<Meta charset=”utf-8″ />
<title>Dojo</title>
</head>
<body>
<script src=”/dojo/dojo.js”></script>
<script>
dojo.require(”dojo.io.script”);
dojo.require(”flickrApp. data“);
</script>
</body>
</html>

好了，到此为止，我们来想一想，这样做真的有必要吗，我们为什么不能不要借助这种模块系统，而仅仅是把应用程序所有的逻辑功能都放在一个javascript文件中呢？ 当然可以。但是dojo实现模块系统的目的在于更好更方便的管理代码，也便于用工具压缩优化代码。

接下来我们讨论一下最重要的部分：依赖管理.

模块可以包含对其他模块的引用，即在模块中可以require()其他的模块， dojo会帮你管理这些模块，让我们回到我们HTML页面：

dojo.require(”dojo.io.script”);
dojo.require(”flickrApp.data”);
</script>
</body>
</html>

我们可以看到，这里我们会在HTML页面上require 这个dojo.io.script.js模块， 事实上我们可以把这个require()语句放到data.js模块里面，其实这里data.js模块是依赖于dojo.io.script.js模块的，dojo会管理这个依赖关系，所以此时data.js模块如下：

copy
    dojo.provide(”flickrApp.data”);
  1. dojo.require(”dojo.io.script”);
  2. //Note:dojo.require()shouldbeusedafterdojo.provide()
  3. 此时，我们的HTML页面就只需要包含一个require()语句 （data.js模块）.


    <script src=”/dojo/dojo.js”></script>
    <script>
    dojo.require(”flickrApp.data”);
    </script>
    </body>
    </html>
    dojo会管理这些依赖关系，确保data.js依赖于dojo.io.script.js。

    更有甚者，依赖管理还需要一个响应通知，即当所有依赖的模块都被加载完成后的一个响应通知。这件事情可以用dojo.ready()这个函数来实现，dojo.ready()将会注册一个函数，这个函数会在所有的DOM节点加载完成，并且所有模块及其的依赖模块都加载和解析完成时 被调用。用法如下：

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <Meta charset=”utf-8″ />
    <title>Dojo</title>
    </head>
    <body>
    <script src=”/dojo/dojo.js”></script>
    <script>
    dojo.require(”flickrApp.data”);
    dojo.ready(function(){
    // Note that dojo.ready() is a shortcut for dojo.addOnLoad() added in Dojo 1.4
    // Run code from data.js and all its dependencies safely
    });
    </script>
    </body>
    </html>

    dojo.ready()可以用在任何时间，任何地方，甚至是dojo.ready()的callback方法里面，比如:

    copy
    @H_403_504@ dojo.require(”some.module”);
  4. dojo.ready(function(){
  5. //runcodefromsome.module.jsandallitsdependenciessafely
  6. dojo.require(’some.other.module’);
  7. dojo.ready(function(){
  8. //runcodefromsome.other.module.jsandallitsdependenciessafely
  9. });
  10. });

就像前面提到的，当用到dojo的require()时，dojo会从dojo.js的上一级目录开始查找，比如require('some.other.module')会从some/other/module.js开始查找：

其实dojo也提供了我们定义dojo的默认查找路径的方式，我们再更新一下我们应用程序的结构，如下：

可以看到，我们的模块 -some.other.module.js已经在dojo默认的模块查找路径之外了,我们要告诉dojo这个结构的变化就要用到dojo.registerModulePath()：

<!DOCTYPE html>
<html lang=”en”>
<head>
<Meta charset=”utf-8″ />
<title>Dojo</title>
</head>
<body>
<script src=”/js/dojo1.4.1/dojo.js”></script>
<script>
dojo.registerModulePath(”some”,“../../some/”);
dojo.require(”some.other.module”);
</script>
</body>
</html>


通过dojo.registerModulePath("some","../../some/")语句，dojo便知道这个用户自定义的模块的位置，这里，我们告诉dojo我们的自定义模块some是在dojo.js的上两级（../../some），这个时候，dojo便知道了如何去解析这个名字空间（some.other.module）并加载some.other.module.js文件了。此时此刻，dojo便能识别所有在“../../some/”路径下的自定义模块。之所以需要这样做的原因主要是安全问题，浏览器是不支持javascript访问文件系统的。 如果你对djConfig比较了解的话，你会发现其实这个对象也可以用来做“dojo.registerModulePath()”的工作：

<!DOCTYPE html>
<html lang=”en”>
<head>
<Meta charset=”utf-8″ />
<title>Dojo</title>
</head>
<body>
<script type=”text/javascript”>
var djConfig = {modulePaths:{”some”:”../../some/”}};
</script>
<script src=”/dojo/dojo1.4.1/dojo.js”></script>
<script>
dojo.require(”some.other.module”);
</script>
</body>
</html>
其实dojo关于模块系统的内容还有很多，这里我们主要是基于本地的dojo，其实dojo还可以以跨域的方式加载（从AOL或者Google CDN），所以模块系统也会去支持这种特性。模块系统的底层实现是基于XHR去请求模块内容的，这些在你用dojo的CDN版本是会改变，这时模块系统会转换到跨域的方式（基于script元素）。

Dojo之外

其实这些模块系统的想法也可以在没有dojo的情况下使用。 YUI3.0也有一个类似的实现，同样，也有一些针对模块系统的想法而专门实现的独立的控件库，其中之一就是RequireJS，他是基于dojo实现的。有兴趣不妨下载下来研究一下。

猜你在找的Dojo相关文章

dojo/Deferred类和dojo/promise类的使用
参考博客：https://blog.csdn.net/blog_szhao/article/details/50220181 　　　       ...
设置查询以搜索dojo数据网格的所有字段
我有一个包含多个字段的Dojo DataGrid.我目前正在设置查询一次搜索一个字段,如下所示： gr...
dojo – 为JsonRestStore设置HTTP Accept标头
我正在使用JsonRestStore,但想为它添加一个自定义Accept标头.最好的方法是什么？ 这与diji...
dojo.query不适用于包含波形符(〜)字符的属性选择器
我需要选择一个给定其URL的链接节点.使用属性选择器的效果非常好,除了少数几个url有tilda的...
带有JSONREST问题的Dojo增强型网格
我正在尝试使用Dojo JSONREST的增强网格,我遇到了一些问题. 我一直在寻找一些例子,但无法弄...
什么时候会发布Dojo 2.0？
我使用过Dojo 1.0,但我有一些与版本相关的问题： >什么时候会发布Dojo 2.0？ >也是最...
dojo中的setSelected()DataGrid使前一个选择活动,即使对于带有selectionMode =“single”的网格也是如此
我有一个dojox.grid.DataGrid,我想以编程方式选择一行.我正在使用setSelected()这样做,它第...
dojo – 如何从dijit.form.Select中获取选项文本？
我的页面上有一个dijit.form.Select： <c:set var="qualId" value="${prev...
如何检查dojo.datagrid加载完成？
参见英文答案 > How to determine if a dojo grid has finished loading?       ...
dojo – 扩展dijit.Tree中的所有节点
有没有一种很好的方法来扩展/关闭dijit.Tree中的所有可扩展节点？ 对于那些寻找答案的人,请...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作