mootools
It goes without saying but MooTools' inheritance pattern allows for creation of small, simple classes that possess immense power. One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP: Request.Stocks. Created by Enrique Erne, this great MooTools class acts as a wrapper for Request.JSON and Yahoo!'s YQL service. Let me show you how to user Enrique's awesome MooTools JavaScript class!
不用说，但是MooTools的继承模式允许创建具有强大功能的小型简单类。 该功能的一个示例是从Request，Request.JSON和Request.JSONP继承的类： Request.Stocks 。 这个伟大的MooTools类由Enrique Erne创建，充当Request.JSON和Yahoo!的YQL服务的包装。 让我向您展示如何使用Enrique的MooTools JavaScript类！
HTML (The HTML)
The stock content will be built by javascript but we will have two DIVS created within the page:
库存内容将由javascript构建，但是我们将在页面内创建两个DIVS：
<div id="stockIndicator">Retrieving stock information....</div>
<div id="stockContainer"></div>
One DIV is an indicator which fades in an out during data fetch, the other is the container which will hold the stock information.
一个DIV是一个指示器，在获取数据期间淡入淡出，另一个是将存储库存信息的容器。
CSS (The CSS)
As always, the styling of elements is subject to however you'd like them to look, but here's a really basic style set:
与往常一样，元素的样式受制于您想要的外观，但这是一个非常基本的样式集：
#stockContainer, #stockIndicator { width:500px; }
#stockContainer { background:#343434; padding:10px; }
#stockIndicator { text-align:right; visibility:hidden; padding:5px; }
.stockRow { padding:5px 10px; clear:both; margin-bottom:5px; }
.stockName { font-size:14px; font-weight:normal; float:left; }
.stockData { font-size:11px; float:right; width:200px; text-align:right; }
/* stock differential */`
.stockSame { }
.stockUp { background:lightgreen; }
.stockUp .stockName { color:green; }
.stockDown { background:pink; }
.stockDown .stockName { color:red; }
Stocks that are above for the day are green, below are red. Stocks which have stayed the same are black. Style however you'd like though.
当天上方的库存为绿色，下方为红色。 保持不变的股票为黑色。 样式，但是您想要。
MooTools JavaScript (The MooTools JavaScript)
Before attacking an example usage, let's talk about about Request.Stocks. This class is an extension of JSONP, setting numerous defaults that correspond to using Yahoo's YQL service, and adding additional options to customize the data you want to receive from Yahoo. A few of the custom options include:
在讨论示例用法之前，让我们谈谈Request.Stocks。 此类是JSONP的扩展，设置了许多与使用Yahoo的YQL服务相对应的默认值，并添加了其他选项以自定义要从Yahoo接收的数据。 一些自定义选项包括：
- stocks: An array of symbols to retrieve stocks for stocks：用于检索股票的一组符号
- sortBy: The data field to sort by sortBy：要排序的数据字段
- display: The data fields to retrieve from Yahoo. A few of the fields you can retrieve include: Ask, AverageDailyVolume, Bid, AskRealtime, BidRealtime, BookValue, Change&PercentChange, Change, Commission, ChangeRealtime, AfterHoursChangeRealtime, DividendShare, LastTradeDate, TradeDate, and more! display：要从Yahoo检索的数据字段。 您可以检索的一些字段包括：Ask，AverageDailyVolume，Bid，AskRealtime，BidRealtime，BookValue，Change＆PercentChange，Change，Commission，ChangeRealtime，AfterHoursChangeRealtime，DividendShare，LastTradeDate，TradeDate等！
More detail on all of the custom options, some of which are not listed on this blog, can be found here.
有关所有自定义选项的更多详细信息， 可以在此处找到 ，其中一些未在本博客中列出。
So now to the class usage. The sample code looks long but that's due to my commenting:
所以现在来上课用法。 示例代码看起来很长，但这是由于我的评论：
// When the dom is ready...
window.addEvent("domready",function() {
// Get the stock container and indicator
var container = document.id("stockContainer");
var indicator = document.id("stockIndicator");
// Create the instance
var request = new Request.Stocks({
// Stocks to retrieve
stocks: ["AAPL","GOOG","MSFT"],
// Formatter upon result
onComplete: function(result) {
// Log out the result to see the structure
console.warn(result);
// Hide the indicator
indicator.fade(0);
// Create a template with which to display the information
var template = ' \
<div class="stockRow stock{UpDown}"> \
<div class="stockName">({symbol}) {Name}</div>\
<div class="stockData">{Ask} {Change} {ChangeinPercent}</div> \
<br class="clear" /> \
</div> \
';
// For every stock , display its information in the template
var html ="";
Array.from(result.query.results.quote).each(function(quote) {
// Add an "UpDown" property to the quote object
var change = Number.from(quote.Change);
quote.UpDown = change == 0 ? "Same" : change > 0 ? "Up" : "Down";
// Update running contnet
html += template.substitute(quote);
});
// Update the content
container.set("html",html);
},
// Show the indicator upon request
onRequest: function () {
indicator.fade(1);
}
});
// Send the request every 20 seconds
(function() {
request.send();
}).periodical(20 * 1000);
// Send right away
request.send();
Request.Stocks' onComplete method provides a method to handle the result from Yahoo. Notice how I build the content string (using MooTools' string.substitute) and then set the element's HTML, instead of appending to the element's innerHTML property -- that's the more efficient way to change a node's content. Also, remember that this class contains every method that Request, Request.JSON, and Request.JSONP have.
Request.Stocks的onComplete方法提供了一种处理Yahoo结果的方法。 注意，我如何构建内容字符串(使用MooTools的string.substitute)，然后设置元素HTML，而不是附加到元素的innerHTML属性，这是更改节点内容的更有效方法。 另外，请记住，此类包含Request，Request.JSON和Request.JSONP拥有的每个方法。
Request.Stocks is an outstanding utility class for developers looking to create applications based on stock market data. The mix of flexibility and simplicity are real strong points of this class. If I had one criticism of this class, it would be that it doesn't provide a method to add or remove stocks on the fly. This functionality would allow the developer to create applications which allow users to add their own portfolio stocks without needing them all defined immediately. Other than that, this class rock solid and I look forward to seeing where it goes in the future!
对于希望基于股票市场数据创建应用程序的开发人员，Request.Stocks是杰出的实用程序类。 灵活性和简单性的结合是此类的真正优势。 如果我对此课程有一个批评，那就是它没有提供即时添加或删除库存的方法。 此功能将使开发人员可以创建应用程序，使用户可以添加自己的投资组合股票，而无需立即定义它们。 除此之外，这堂课固若金汤，我期待着将来的发展！
mootools