jsonp封装浅析
前几天写项目,在获取数据时候,不想再去手写一遍jsonp,于是就上git上找了找,安装了下来,还算好用吧。今天抽出时间,看着源码也不长,就把源码给分析分析,毕竟分析好的源码是进阶的必要。
先贴上官方源码
/** * Module dependencies */
var debug = require('debug')('jsonp');
/** * Module exports. */
module.exports = jsonp;
/** * Callback index. */
var count = 0;
/** * Noop function. */
function noop(){}
/** * JSONP handler * * Options: * - param {String} qs parameter (`callback`) * - prefix {String} qs parameter (`__jp`) * - name {String} qs parameter (`prefix` + incr) * - timeout {Number} how long after a timeout error is emitted (`60000`) * * @param {String} url * @param {Object|Function} optional options / callback * @param {Function} optional callback */
function jsonp(url,opts,fn){
if ('function' == typeof opts) {
fn = opts;
opts = {};
}
if (!opts) opts = {};
var prefix = opts.prefix || '__jp';
// use the callback name that was passed if one was provided.
// otherwise generate a unique name by incrementing our counter.
var id = opts.name || (prefix + (count++));
var param = opts.param || 'callback';
var timeout = null != opts.timeout ? opts.timeout : 60000;
var enc = encodeURIComponent;
var target = document.getElementsByTagName('script')[0] || document.head;
var script;
var timer;
if (timeout) {
timer = setTimeout(function(){
cleanup();
if (fn) fn(new Error('Timeout'));
},timeout);
}
function cleanup(){
if (script.parentNode) script.parentNode.removeChild(script);
window[id] = noop;
if (timer) clearTimeout(timer);
}
function cancel(){
if (window[id]) {
cleanup();
}
}
window[id] = function(data){
debug('jsonp got',data);
cleanup();
if (fn) fn(null,data);
};
// add qs component
url += (~url.indexOf('?') ? '&' : '?') + param + '=' + enc(id);
url = url.replace('?&','?');
debug('jsonp req "%s"',url);
// create script
script = document.createElement('script');
script.src = url;
target.parentNode.insertBefore(script,target);
return cancel;
}
md文件,支持npm等多种安装安装方式。
mudule.export = jsonp//将jsonp函数导出去,供其他模块调用
安装node.js的debug模块
var debug = require('debug')('jsonp');
//当般在nodejs需要进行调试的时候,可以使用console.log()方法来将调试信息输出到控制台,当发布到生产环境的时候,需要将这些调试信息都注释掉,为了方便切换而不需要改动程序代码,可以使用nodejs的debug模块,简单来说就是用来向控制台抛出错误信息的。
eg:
debug('jsonp got',data);
关键函数jsonp函数
接受三个参数,分别是url,fn.
url:请求地址的url,eg:http://freegeoip.net/json/?callback=handleResponse
opts:有如下四个可选参数
* params 与后端约定请求的字段名称,默认是callback
* timeout 指定请求响应时间,过多长时间之后显示请求超时
* prefix 指定回调函数params的回调句柄前缀,默认为__jp,一般都是默认的,基本用不到
* name 指定回调函数的句柄,默认为’_jp${number++}’,一般都是默认的,基本用不到
fn 请求事件的回调函数,负责接受data响应数据和请求失败的err信息。
初始化参数
function jsonp(url,fn){
// 对于两个参数,若不写opts,内部会将函数继续赋给fn
if ('function' == typeof opts) {
fn = opts;
opts = {};
}
// 判断opts是否存在,若不存在,将opts设置空对象
if (!opts) opts = {};
// 默认回调函数句柄为__jp
var prefix = opts.prefix || '__jp';
// 默认回调函数的句柄为__jp+数字 count默认为0
var id = opts.name || (prefix + (count++));
// 设定和函数的key:value,默认为'callback:__jp01'
var param = opts.param || 'callback';
// 设定请求响应时间,若没有设置,则默认为6秒
var timeout = null != opts.timeout ? opts.timeout : 60000;
var enc = encodeURIComponent;
// 捕获dom元素
var target = document.getElementsByTagName('script')[0] || document.head;
// 声明script和timer,script是后面document.createElement出来的,timer是定时器
var script = null;
var timer = null;
url字符串拼接和script脚本dom操作
// 检测是url是否有参数,如果有参数的话,也有传进来的param参数的话,那就把参拼接到url后面,而后面的enc(id)值就是key:value索要解析到的值,服务端进行**params.opts.param**进行解析调用下面这句id的方法
url += (~url.indexOf('?') ? '&' : '?') + param + '=' + enc(id);
// 防止拼接错误出现"?&",然后进行替换
url = url.replace('?&','?');
// 方便调试,这个可以将url console.log()到控制台上
debug('jsonp req "%s"',url);
// 创建<script>标签,不受限制的从其它域加载资源
script = document.createElement('script');
script.src = url;
// 插入到head节点或者第一个<script>节点的前面
target.parentNode.insertBefore(script,target);
return cancel;
方法的调用和事件释放
// 进行超时设置,如果超时,那么清除掉原有创建的<script>标签,并且将window[id]=noop(空对象),终止timer定时器,再之后抛出错误
if (timeout) {
timer = setTimeout(function(){
cleanup();
if (fn) fn(new Error('Timeout'));
},timeout);
}
function cleanup(){
if (script.parentNode) script.parentNode.removeChild(script);
window[id] = noop;
if (timer) clearTimeout(timer);
}
// 在引入jsonp模块后,取消对jsonp的调用,但引用模块值外就得这样写 eg:jsonp(yrl,fn)()
function cancel(){
if (window[id]) {
cleanup();
}
}
// 服务端解析params.param进行调用函数
window[id] = function(data){
debug('jsonp got',data);
// 恢复初始值
cleanup();
//返回数据
if (fn) fn(null,data);
};
个人角度总结
- 无污染,无公害,用完即走
- 支持多种安装方式
- 可以结合promise进行使用
如有错误,敬请指出,共同进步。