The DataSourceCache plugin enables caching on any DataSource to reduce high-latency calls to remote sources and to reduce server load. In this example, the Cache's max
value has been set to 3
.
Use the plug()
method to initialize the
DataSourceCache
plugin and pass in the configuration value
max
to set the maximum size.
YUI().use("datasource", "dataschema", "cache", function (Y) { var callback = { success: function (e) { /* output to screen */ }, failure: function (e) { /* output to screen */ } }, myDataSource = new Y.DataSource.Get({ source: "https://api.github.com/users/", // this is only needed because the query appends the url // rather than the url's query params generateRequestCallback: function (guid) { return '/repos?callback=YUI.Env.DataSource.callbacks.' + guid; } }), myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { schema: { resultListLocator: "data", resultFields: ["name"] } }); myDataSource.plug(Y.Plugin.DataSourceCache, { max: 3 }); // Adds to cache myDataSource.sendRequest({ request : "lsmith", callback: callback }); // Adds to cache myDataSource.sendRequest({ request : "davglass", callback: callback }); // Retrieves from cache myDataSource.sendRequest({ request : "lsmith", callback: callback }); });
Full Example Source Listing
<form id="demo" action="http://search.yahoo.com/search"> <h6>Look up github repositories by username (e.g., davglass, lsmith or rgrove):</h6> <input type="input" id="demo_input_query" name="p"> <input type="submit" id="demo_query_retrieve" value="Retrieve data"> <input type="button" id="demo_cache_clear" value="Clear cache"> <div id="demo_output_response" class="output"></div> </form> <script type="text/javascript"> YUI().use("json-stringify","node", "datasource-get", "datasource-jsonschema", "datasource-cache", "datatype-date", function (Y) { var output = Y.one("#demo_output_response"), source = "remote source", myDataSource = new Y.DataSource.Get({ source:"https://api.github.com/users/", generateRequestCallback: function (guid) { return '/repos?callback=YUI.Env.DataSource.callbacks.' + guid; } }), callback = { success: function(e){ var when = Y.DataType.Date.format(new Date(), {format:"%F %r"}), data = Y.JSON.stringify(e.response, null, 2); output.setHTML( "<p>[" + when + "] Retrieved from " + "<strong>" + source + "</strong></p>" + "<pre>" + data.replace(/&/g,"&") .replace(/</g,"<") .replace(/>/g,">") + "</pre>"); }, failure: function(e){ var when = Y.DataType.Date.format(new Date(), {format:"%F %r"}), message = /fields retrieval/.test(e.error.message) ? "User not found" : e.error.message; output.setHTML( "<p>[" + when + "] Could not retrieve data: " + "<em>" + message + "</em>" + "</p>"); } }; myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { schema: { resultListLocator: "data", resultFields: ["name"] } }); myDataSource.plug(Y.Plugin.DataSourceCache, { max: 3 }); myDataSource.cache.on("retrieve", function(){ source = "cache"; }); Y.one("#demo_cache_clear").on("click", function(){ var when = Y.DataType.Date.format(new Date(), {format:"%F %r"}); myDataSource.cache.flush(); output.setHTML("<p>[" + when + "] Cache cleared.</p>"); }); Y.on("submit", function(e){ e.halt(); var query = encodeURIComponent( Y.one("#demo_input_query") .get("value") .replace(/"/g,'\\"') .replace(/\W/g, '')); if(query) { source = "remote source"; myDataSource.sendRequest({ request:query, callback:callback }); } else { output.setHTML("<p>Please enter a query.</p>"); } }, "#demo"); }); </script>