dojo/request模块总体架构解析

时间 2019-11-10

标签 dojo request 模块总体架构解析栏目 Dojo 繁體版

原文原文链接

　　整体说明css

　　作前端固然少不了ajax的使用，使用dojo的童鞋都知道dojo是基于模块化管理的前端框架，其中对ajax的处理位于dojo/request模块。通常状况下咱们使用ajax请求只须要引入dojo/request模块，而后按照文档的说明制定参数便可。实际上dojo在这一模块的处理中抽象了不少概念：html

平台侦探器：dojo/request/default
请求分发器：dojo/request/registry
全局通知器：dojo/request/notify
数据传输器：dojo/request/xhr dojo/request/script dojo/request/iframe dojo/request/node
数据转化器：dojo/request/handlers

　　处理器的整体关系以下图所示：前端

　　正是这些概念使得dojo在ajax请求上可以提供强大的扩展性和简捷的接口。node

　　Providerjquery

　　请求传输器被称为Provider，dojo框架自身提供了如下4个providerweb

dojo/request/xhr 提供跨浏览器的XMLHttpRequest，在浏览器端它被做为默认的provider
dojo/request/node 用于node平台的异步请求，在node下呗当作默认的provider。dojo是能够运行在node平台下的，固然须要作一些配置，这是另外一篇文章的主要内容
dojo/request/iframe 不刷新浏览器传输form表单，在文件上传时常常用到
dojo/request/script 常以jsonp方式来进行跨域请求

　　全部dojo自带的Provider返回一个promise对象，其中有一个不在标准规范内的属性：response。该属性是一个标准promise对象，该对象将一个表明服务器端响应结果的对象做为fulfill状态的值。这个对象有如下几个属性：ajax

　　关于这几个Provider的详细讲解请继续关注下一篇文章正则表达式

　　defaultjson

　　通常状况下咱们发送ajax请求时只需引入dojo/request便可，实际上这是在default中根据不一样的运行平台自动给咱们提供了一个默认的provider。跨域

 1 define([  2     'exports',  3     'require',  4     '../has'
 5 ], function(exports, require, has){  6     //读取dojoConfig中的配置信息
 7     var defId = has('config-requestProvider'),  8  platformId;  9     
10     //根据不一样平台选择不一样的provider
11     if(has('host-browser') || has('host-webworker')){ 12         platformId = './xhr'; 13     }else if(has('host-node')){ 14         platformId = './node'; 15     /* TODO: 16  }else if(has('host-rhino')){ 17  platformId = './rhino'; 18    */
19  } 20 
21     if(!defId){ 22         defId = platformId; 23  } 24 
25     exports.getPlatformDefaultId = function(){ 26         return platformId; 27  }; 28     //做为插件使用，是跟参数选择provider
29     exports.load = function(id, parentRequire, loaded, config){ 30         require([id == 'platform' ? platformId : defId], function(provider){ 31  loaded(provider); 32  }); 33  }; 34 });

View Code

　　代码中关于exports跟require模块的说明请看个人上一篇博客：require、module、exports dojo中的三个特殊模块标识。

　　上述内容关于load的函数的出现，意味着该模块能够做为“插件”使用。dojo插件主要用于加载一些非AMD的资源，好比css、html。dojo中经常使用的插件有5个：

dojo/domReady
dojo/text 用于加载静态资源文件
dojo/i18n 加载国际化语言文件
dojo/has 用于特性检测
dojo/require

　　当在define或require中一个模块引用包含一个！，dojo的加载器会自动将这个模块引用字符串在！处分开，左边部分做为一个模块引用对待，右边部分，等待左边模块加载完毕后交由模块的load方法处理；

exports.load = function(id, parentRequire, loaded, config){ require([id == 'platform' ? platformId : defId], function(provider){ loaded(provider); }); };

　　关于load函数的几个参数：

id：表明！右侧部分
parentRequire：上下文智能的require请求器
loaded：id模块加载完毕后的回调
config：猜想是dojo/_base/config

　　后三个参数是dojo本身来处理，通常状况下咱们不须要关心。

　　关于插件还要在说几句：

　　dojo中不会像缓存module同样缓存插件所加载的资源好比：咱们能够屡次引用同一个module，可是这个module只会加载一次，这是AMD规范所强制规定的。可是我若是屡次dojo/text!./template.html这个template.html会被加载屡次。

　　notify

　　notify是全局的ajax事件通知器，负责全局范围内的ajax事件监听，有相似于jquery中ajaxStart、ajaxComplete的事件。

 1 define(['../Evented', '../_base/lang', './util'], function(Evented, lang, util){  2     // module:
 3     // dojo/request/notify
 4     // summary:
 5     // Global notification API for dojo/request. Notifications will
 6     // only be emitted if this module is required.
 7     //  8     // | require('dojo/request', 'dojo/request/notify',
 9     // | function(request, notify){
10     // | notify('load', function(response){
11     // | if(response.url === 'someUrl.html'){
12     // | console.log('Loaded!');
13     // | }
14     // | });
15     // | request.get('someUrl.html');
16     // | }
17     // | );
18 
19     var pubCount = 0, 20         slice = [].slice; 21     //实例化dojo/Evented对象，负责分发事件
22     var hub = lang.mixin(new Evented, { 23         onsend: function(data){ 24             if(!pubCount){ 25                 this.emit('start'); 26  } 27             pubCount++; 28  }, 29         _onload: function(data){ 30             this.emit('done', data); 31  }, 32         _onerror: function(data){ 33             this.emit('done', data); 34  }, 35         _ondone: function(data){ 36             if(--pubCount <= 0){ 37                 pubCount = 0; 38                 this.emit('stop'); 39  } 40  }, 41         emit: function(type, event){ 42             var result = Evented.prototype.emit.apply(this, arguments); 43 
44             // After all event handlers have run, run _on* handler
45             //运行完标准事件处理函数后，再来运行自己的私有函数。
46             //load和error事件处理完后触发done事件
47             //done事件处理完毕后，再来运行自己的_ondone函数，而后触发stop事件
48             if(this['_on' + type]){ 49                 this['_on' + type].apply(this, slice.call(arguments, 1)); 50  } 51             return result; 52  } 53  }); 54 
55     function notify(type, listener){ 56         // summary:
57         // Register a listener to be notified when an event
58         // in dojo/request happens.
59         // type: String?
60         // The event to listen for. Events emitted: "start", "send",
61         // "load", "error", "done", "stop".
62         // listener: Function?
63         // A callback to be run when an event happens.
64         // returns:
65         // A signal object that can be used to cancel the listener.
66         // If remove() is called on this signal object, it will
67         // stop the listener from being executed.
68         return hub.on(type, listener); 69  } 70     notify.emit = function(type, event, cancel){ 71         return hub.emit(type, event, cancel); 72  }; 73 
74     // Attach notify to dojo/request/util to avoid
75     // try{ require('./notify'); }catch(e){}
76     return util.notify = notify; 77 });

View Code

　　最后的一句：util.notify= notify; util将notify与provider关联起来。

　　registry

　　该模块能够在不一样的状况下使用不一样的provider；匹配的条件能够是正则表达式、字符串或者函数。经过registry能够根据不一样的条件注册不一样的provider。

 1 require(["dojo/request/registry", "dojo/Deferred"], function(request, Deferred){  2   request.register("crossdomain/ie", xdrProvider);  3 
 4   var xdrProvider = function(url, options){  5     var def = new Deferred();  6     xdr = new XDomainRequest();  7     if (xdr) {  8       xdr.onerror = function(){  9         def.reject('error'); 10  }; 11       xdr.ontimeout = function(){ 12         def.reject('timeout'); 13  }; 14       xdr.onprogress = function(){ 15         def.progress('progress'); 16  }; 17       xdr.onload = function(res){ 18  def.resolve(res); 19  }; 20       xdr.timeout = 6000; 21  xdr.open(options.method, url); 22  xdr.send(serilize(options.data)); 23     } else { 24         def.reject("Failed to create"); 25  } 26     
27     return def; 28  } 29   
30   request.get("crossdomain/ie/getData", { 31     method: "get", 32     data:{id:'ie9'} 33   }).then(function(text){ 34     // Do something with the response
35  }); 36 
37 });

View Code

　如下即是registry的源码：

define([ 'require', '../_base/array', './default!platform',//想一想notify中的load函数
    './util' ], function(require, array, fallbackProvider, util){ var providers = []; function request(url, options){ var matchers = providers.slice(0),//做用相似clone
            i = 0, matcher; while(matcher=matchers[i++]){ if(matcher(url, options)){//匹配provider
                return matcher.request.call(null, url, options); } } //fallbackProvider由default根据不一样平台注入默认的provider
        return fallbackProvider.apply(null, arguments); } function createMatcher(match, provider){ var matcher; if(provider){ if(match.test){ // RegExp
                matcher = function(url){ return match.test(url); }; }else if(match.apply && match.call){ matcher = function(){ return match.apply(null, arguments); }; }else{ matcher = function(url){ return url === match; }; } matcher.request = provider; }else{ // If only one argument was passed, assume it is a provider function
            // to apply unconditionally to all URLs
            matcher = function(){ return true; }; matcher.request = match; } return matcher; } request.register = function(url, provider, first){ var matcher = createMatcher(url, provider); providers[(first ? 'unshift' : 'push')](matcher); return { remove: function(){ var idx; if(~(idx = array.indexOf(providers, matcher))){ providers.splice(idx, 1); } } }; }; //这里意味着registry也可使用插件的写法，做用是替换一个默认的provider
    request.load = function(id, parentRequire, loaded, config){ if(id){ // if there's an id, load and set the fallback provider
            require([id], function(fallback){ fallbackProvider = fallback;//js中的词法做用域，load中永远可以访问到fallbackProvider变量。
 loaded(request); }); }else{ loaded(request); } }; util.addCommonMethods(request); return request; });

View Code

　　handlers

　　XMLHttpRequest对象请求成功后返回的数据格式只有text跟xml两种，handlers根据request中指定的handleAs参数将请求成功后的数据转化为指定类型。与jquery中的类型转化器做用相似。

　　dojo中提供了如下三种数据转化器：

　　此外，handlers有跟registry相似的register方法，可让咱们自定义数据转化器。

 1 require(["dojo/request/handlers", "dojo/request", "dojo/dom", "dojo/dom-construct", "dojo/json",  2     "dojo/on", "dojo/domReady!"],  3 function(handlers, request, dom, domConst, JSON, on){  4   handlers.register("custom", function(response){  5     var data = JSON.parse(response.text);  6     data.hello += "!";  7     return data;  8  });  9 
10   on(dom.byId("startButton"), "click", function(){ 11     domConst.place("<p>Requesting...</p>", "output"); 12     request("./helloworld.json", { 13       handleAs: "custom"
14     }).then(function(data){ 15       domConst.place("<p>data: <code>" + JSON.stringify(data) + "</code>", "output"); 16  }); 17  }); 18 });

View Code

　　若是您看完本篇文章感受不错，请点击一下下方的推荐来支持一下博主，谢谢！