我正在学习Chrome扩展教程(完整代码如下)。有一件事我不明白,这与requestKittens方法的第3行有关
req.onload = this.showPhotos_.bind(this);
和showPhotos方法的第1行:
var kittens = e.target.responseXML.querySelectorAll('photo');
我试图理解e.target.responseXML是如何指向请求的响应XML的。到目前为止,我的想法如下:在调用此函数的行(requestKittens()
的第三行)中,this
指向kittenGenerator
对象,这意味着kittenGenerator
被绑定为showPhotos()
的第一个参数。那么showPhotos()
中的自变量e
应该是kittenGenerator
,对吧?
如果这是真的,那么showPhotos()
的第一行。。。
var kittens = e.target.responseXML.querySelectorAll('photo');
是说CCD_ 10具有属性CCD_。然而,我在Chrome控制台中检查了这个,但它没有——所以我的逻辑有一个错误。有人能帮忙吗?
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* Global variable containing the query we'd like to pass to Flickr. In this
* case, kittens!
*
* @type {string}
*/
var QUERY = 'kittens';
var kittenGenerator = {
/**
* Flickr URL that will give us lots and lots of whatever we're looking for.
*
* See http://www.flickr.com/services/api/flickr.photos.search.html for
* details about the construction of this URL.
*
* @type {string}
* @private
*/
searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' +
'method=flickr.photos.search&' +
'api_key=90485e931f687a9b9c2a66bf58a3861a&' +
'text=' + encodeURIComponent(QUERY) + '&' +
'safe_search=1&' +
'content_type=1&' +
'sort=interestingness-desc&' +
'per_page=20',
/**
* Sends an XHR GET request to grab photos of lots and lots of kittens. The
* XHR's 'onload' event is hooks up to the 'showPhotos_' method.
*
* @public
*/
requestKittens: function() {
var req = new XMLHttpRequest();
req.open("GET", this.searchOnFlickr_, true);
req.onload = this.showPhotos_.bind(this);
req.send(null);
},
/**
* Handle the 'onload' event of our kitten XHR request, generated in
* 'requestKittens', by generating 'img' elements, and stuffing them into
* the document for display.
*
* @param {ProgressEvent} e The XHR ProgressEvent.
* @private
*/
showPhotos_: function (e) {
var kittens = e.target.responseXML.querySelectorAll('photo');
for (var i = 0; i < kittens.length; i++) {
var img = document.createElement('img');
img.src = this.constructKittenURL_(kittens[i]);
img.setAttribute('alt', kittens[i].getAttribute('title'));
document.body.appendChild(img);
}
},
/**
* Given a photo, construct a URL using the method outlined at
* http://www.flickr.com/services/api/misc.urlKittenl
*
* @param {DOMElement} A kitten.
* @return {string} The kitten's URL.
* @private
*/
constructKittenURL_: function (photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
};
// Run our kitten generation script as soon as the document's DOM is ready.
document.addEventListener('DOMContentLoaded', function () {
kittenGenerator.requestKittens();
});
req.onload = this.showPhotos_.bind(this);
之所以有效,是因为XMLHttpRequest在其onload
处理程序中使用事件作为其第一个参数。这就是e.target
的来源。
要给您一个简单的绑定示例,请考虑以下内容:
function add(a, b) {
return a + b;
}
var addTwo = add.bind(null, 2);
addTwo(10); // yields 12
如果您为bind定义了一个上下文(即null以外的内容),那么您可以在函数中使用this
访问该上下文。