1-7 basket.js localstorage.js缓存css、js

basket.js 源码分析

 
api 使用文档：
 
 
 

一、前言

basket.js 可以用来加载js脚本并且保存到 LocalStorage 上，使我们可以更加精准地控制缓存，即使是在 http 缓存过期之后也可以使用。因此可以使我们防止不必要的重新请求 js 脚本，提升网站加载速度。

可以到 basket.js 的 Github 上查看更多的相关信息。

由于之前在工作中使用过 basket.js ，好奇它的实现原理，因此就有了这篇分析 basket.js 源码的文章。

二、简单的使用说明

basket.js 的使用非常简单，只要引入相应的js脚本，然后使用 basket 的 require 方法加载就可以了，例子：

<!DOCTYPE html><html><head><title>basket.js demo</title><script src="basket.full.min.js"></script></head><body><script>basket.require({url:'helloworld.js'});</script></body></html>

第一次加载，由于helloworld.js 只有一行代码alert('hello world');， 所以运行该demo时就会弹出 "hello world"。并且对应的 js 会被保存到 LocalStorage：

此时对应的资源加载情况：

刷新一次页面，再查看一次资源的加载情况：

可以看到已经没有再发送 helloworld.js 相关的请求，因为 LocalStorage 上已经有对应的缓存了，直接从本地获取即可。

三、实现流程

流程图

细节说明

处理参数

参数处理就是根据已有的参数初始化未指定的参数。例如 require 方法支持 once 参数用来表示是否只执行一次对应 JS，execute 参数标示是否加载完该 JS 之后立刻执行。所以参数处理这一步骤就会根据是否执行过该 JS 和 once 参数是否为 ture 来设置execute参数。

获取缓存

调用 localStorage.getItem方法获取缓存。存入的 key 值为 basket- 加上 JS 文件的 URL。以上面加载 helloworld.js 为例，key 值为：basket-helloworld.js。获取的缓存为一个缓存对象，里面包含 JS 代码和相关的一些信息，例如：

  1. {
  2. "url":"helloworld.js?basket-unique=123",
  3. "unique":"123",
  4. "execute":true,
  5. "key":"helloworld.js",
  6. "data":"alert('hello world');",
  7. "originalType":"application/javascript",
  8. "type":"application/javascript",
  9. "skipCache":false,
  10. "stamp":1459606005108,
  11. "expire":1477606005108
  12. }
 

其中 data 属性对应的值就是 JS 代码。

判断缓存是否有效

判断比较简单，根据缓存对象里面的版本号 unique 和过期时间 expire 等来判断。这和浏览器使用 Expire 和 Etag 头部来判断 HTTP 缓存是否有效相似。最大的不同就是缓存完全由 JS 控制！这也就是 basket.js 最大的作用。让我们更好的控制缓存。默认的过期时间为5000小时，也就是208.33天。

判断代码：

/** * 判断ls上的缓存对象是否过期 * @param{object} source 从ls里取出的缓存对象 * @param{object} obj 传入的参数对象 * @returns {Boolean} 过期返回true，否则返回false */var isCacheValid =function(source, obj) {return!source ||// 没有缓存数据返回truesource.expire-+newDate() <0||// 超过过期时间返回trueobj.unique!==source.unique||// 版本号不同的返回true (basket.isValidItem&&!basket.isValidItem(source, obj));// 自定义验证函数不成功的返回true};

Ajax获取JS

普通的利用 XMLHttpRequest 请求。

缓存到LocalStorage

调用localStorage.setItem方法保存缓存对象。一般来说，只要这一行代码就能完成本步骤。但是LocalStorage保存的数据是有大小限制的！我利用 chrome 做了一个小测试，保存500KB左右的东西就会令��� Resources 面板变卡，2M 几乎可以令到 Resources 基本卡死，到了 5M 就会超出限制，浏览器抛出异常：

 

OMException: Failed to execute'setItem'on'Storage': Setting the valueof'basket-http://file.com/ykq/wap/v3Templates/timeout/timeout/large.js' exceeded the quota

 

因此需要使用 try catch 对localStorage.setItem方法进行异常捕获。当没容量不足时就需要根据保存时间逐一删除 LocalStorage 的缓存对象。

相关代码：

 

  1. /**
  2. * 把缓存对象保存到localStorage中
  3. * @param {string} key ls的key值
  4. * @param {object} storeObj ls的value值，缓存对象，记录着对应script的对象、有url、execute、key、data等属性
  5. * @returns {boolean} 成功返回true
  6. */
  7. var addLocalStorage =function( key, storeObj ){
  8. // localStorage对大小是有限制的，所以要进行try catch
  9. // 500KB左右的东西保存起来就会令到Resources变卡
  10. // 2M左右就可以令到Resources卡死，操作不了
  11. // 5M就到了Chrome的极限
  12. // 超过之后会抛出如下异常：
  13. // DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'basket-http://file.com/ykq/wap/v3Templates/timeout/timeout/large.js' exceeded the quota
  14. try{
  15. localStorage.setItem( storagePrefix + key, JSON.stringify( storeObj ));
  16. returntrue;
  17. }catch( e ){
  18. // localstorage容量不够，根据保存的时间删除已缓存到ls里的js代码
  19. if( e.name.toUpperCase().indexOf('QUOTA')>=0){
  20. var item;
  21. var tempScripts =[];
  23. // 先把所有的缓存对象来出来，放到 tempScripts里
  24. for( item in localStorage ){
  25. if( item.indexOf( storagePrefix )===0){
  26. tempScripts.push( JSON.parse( localStorage[ item ]));
  27. }
  28. }
  30. // 如果有缓存对象
  31. if( tempScripts.length ){
  32. // 按缓存时间升序排列数组
  33. tempScripts.sort(function( a, b ){
  34. return a.stamp - b.stamp;
  35. });
  37. // 删除缓存时间最早的js
  38. basket.remove( tempScripts[0].key );
  40. // 删除后在再添加，利用递归完成
  41. return addLocalStorage( key, storeObj );
  43. }else{
  44. // no files to remove. Larger than available quota
  45. // 已经没有可以删除的缓存对象了，证明这个将要缓存的目标太大了。返回undefined。
  46. return;
  47. }
  49. }else{
  50. // some other error
  51. // 其他的错误，例如JSON的解析错误
  52. return;
  53. }
  54. }
  56. };

生成script标签注入到页面

生成 script 标签，append 到 document.head：

  1. var injectScript =function( obj ){
  2. var script = document.createElement('script');
  4. script.defer =true;
  5. // Have to use .text, since we support IE8,
  6. // which won't allow appending to a script
  7. script.text = obj.data;
  8. head.appendChild( script );
  9. };

四、异步编程

basket.js 是一个典型的需要大量异步编程的库，所以稍有不慎，代码将会高度耦合，臃肿难看。。。

所以 basket.js 引入遵从 Promises/A+ 标准的异步编程库 RSVP.js 来这个问题。

（遵从 Promises/A+ 标准的还有 ES6 原生的 Promise 对象，jQuery 的$.Deferred 方法等）

所以 basket.js 中涉及异步编程的方法都会返回一个 Promise 对象。很好地解决了异步编程问题。例如 basket.require 方法就是返回一个promise 对象，因此需要按顺序加载 JS 的时候可以这样子写：

basket.require({url: 'helloworld.js'}).then(function() {basket.require({url: 'helloworld2.js'})
});

为了使代码更好看，basket.js 添加了一个方法 basket.thenRequire，现在代码就可以写成这样：

basket.require({url: 'helloworld.js'}).thenRequire({url: 'helloworld2.js'});

五、吐槽

其实 basket.js 算是一种黑科技，使用起来有比较多的东西要注意。例如我们无法正常使用 chrome 的 Sources 面板断点调试，解决方法为手动在代码里面添加debugger设置断点。还有就是由于强制刷新页面也不能清除 localStorage 上的缓存，所以每次修改代码时我们都需要手动清除 localStorage，比较麻烦。当然调试时可以在 JS 文件的头部添加localStorage.clear()解决这个问题。

还有就是 basket.js 已经好久没有更新了，毕竟黑科技，总会被时代淘汰。而且 api 文档也不齐全，例如上面的 thenRequire 方法是我查看源代码时才发现的，官方文档里面根本没有。

最后，虽然 basket.js 应该不会在维护了，但是阅读其源码还是能有很多收获，推荐大家花点时间阅读一下。

六、源码完整注释

  1. /*!
  2. * basket.js
  3. * v0.5.2 - 2015-02-07
  4. * http://addyosmani.github.com/basket.js
  5. * (c) Addy Osmani; License
  6. * Created by: Addy Osmani, Sindre Sorhus, Andrée Hansson, Mat Scales
  7. * Contributors: Ironsjp, Mathias Bynens, Rick Waldron, Felipe Morais
  8. * Uses rsvp.js, https://github.com/tildeio/rsvp.js
  9. */(function( window, document ){
  10. 'use strict';
  12. var head = document.head || document.getElementsByTagName('head')[0];
  13. var storagePrefix ='basket-';// 保存localStorage时的前缀
  14. var defaultExpiration =5000;// 默认过期时间为5000小时
  15. var inBasket =[];// 保存已经执行过的js的url。辅助设置参数的execute选项。
  17. /**
  18. * 把缓存对象保存到localStorage中
  19. * @param {string} key ls的key值
  20. * @param {object} storeObj ls的value值，缓存对象，记录着对应script的对象、有url、execute、key、data等属性
  21. * @returns {boolean} 成功返回true
  22. */
  23. var addLocalStorage =function( key, storeObj ){
  24. // localStorage对大小是有限制的，所以要进行try catch
  25. // 500KB左右的东西保存起来就会令到Resources变卡
  26. // 2M左右就可以令到Resources卡死，操作不了
  27. // 5M就到了Chrome的极限
  28. // 超过之后会抛出如下异常：
  29. // DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'basket-http://file.com/ykq/wap/v3Templates/timeout/timeout/large.js' exceeded the quota
  30. try{
  31. localStorage.setItem( storagePrefix + key, JSON.stringify( storeObj ));
  32. returntrue;
  33. }catch( e ){
  34. // localstorage容量不够，根据保存的时间删除已缓存到ls里的js代码
  35. if( e.name.toUpperCase().indexOf('QUOTA')>=0){
  36. var item;
  37. var tempScripts =[];
  39. // 先把所有的缓存对象来出来，放到 tempScripts里
  40. for( item in localStorage ){
  41. if( item.indexOf( storagePrefix )===0){
  42. tempScripts.push( JSON.parse( localStorage[ item ]));
  43. }
  44. }
  46. // 如果有缓存对象
  47. if( tempScripts.length ){
  48. // 按缓存时间升序排列数组
  49. tempScripts.sort(function( a, b ){
  50. return a.stamp - b.stamp;
  51. });
  53. // 删除缓存时间最早的js
  54. basket.remove( tempScripts[0].key );
  56. // 删除后在再添加，利用递归完成
  57. return addLocalStorage( key, storeObj );
  59. }else{
  60. // no files to remove. Larger than available quota
  61. // 已经没有可以删除的缓存对象了，证明这个将要缓存的目标太大了。返回undefined。
  62. return;
  63. }
  65. }else{
  66. // some other error
  67. // 其他的错误，例如JSON的解析错误
  68. return;
  69. }
  70. }
  72. };
  74. /**
  75. * 利用ajax获取相应url的内容
  76. * @param {string} url 请求地址
  77. * @returns {object} 返回promise对象，解决时的参数为对象：{content:'', type: ''}
  78. */
  79. var getUrl =function( url ){
  80. var promise =new RSVP.Promise(function( resolve, reject ){
  82. var xhr =newXMLHttpRequest();
  83. xhr.open('GET', url );
  85. xhr.onreadystatechange =function(){
  86. if( xhr.readyState ===4){
  87. if(( xhr.status ===200)||
  88. (( xhr.status ===0)&& xhr.responseText )){
  89. resolve({
  90. content: xhr.responseText,
  91. type: xhr.getResponseHeader('content-type')
  92. });
  93. }else{
  94. reject(newError( xhr.statusText ));
  95. }
  96. }
  97. };
  99. // By default XHRs never timeout, and even Chrome doesn't implement the
  100. // spec for xhr.timeout. So we do it ourselves.
  101. // 自定义超时设置
  102. setTimeout(function(){
  103. if( xhr.readyState <4){
  104. xhr.abort();
  105. }
  106. }, basket.timeout );
  108. xhr.send();
  109. });
  111. return promise;
  112. };
  114. /**
  115. * 获取js，保存缓存对象到ls
  116. * @param {object} obj basket.require的参数对象(之前的处理过程中添加相应的属性)
  117. * @returns {object} promise对象
  118. */
  119. var saveUrl =function( obj ){
  120. return getUrl( obj.url ).then(function( result ){
  121. var storeObj = wrapStoreData( obj, result );
  123. if(!obj.skipCache){
  124. addLocalStorage( obj.key , storeObj );
  125. }
  127. return storeObj;
  128. });
  129. };
  131. /**
  132. * 进一步添加对象obj属性
  133. * @param {object} obj basket.require的参数(之前的处理过程中添加相应的属性)
  134. * @param {object} data 包含content和type属性的对象，content就是js的内容
  135. * @returns {object} 经过包装后的obj
  136. */
  137. var wrapStoreData =function( obj, data ){
  138. var now =+newDate();
  139. obj.data = data.content;
  140. obj.originalType = data.type;
  141. obj.type = obj.type || data.type;
  142. obj.skipCache = obj.skipCache ||false;
  143. obj.stamp = now;
  144. obj.expire = now +(( obj.expire || defaultExpiration )*60*60*1000);
  146. return obj;
  147. };
  149. /**
  150. * 判断ls上的缓存对象是否过期
  151. * @param {object} source 从ls里取出的缓存对象
  152. * @param {object} obj 传入的参数对象
  153. * @returns {Boolean} 过期返回true，否则返回false
  154. */
  155. var isCacheValid =function(source, obj){
  156. return!source ||// 没有缓存数据返回true
  157. source.expire -+newDate()<0||// 超过过期时间返回true
  158. obj.unique !== source.unique ||// 版本号不同的返回true
  159. (basket.isValidItem &&!basket.isValidItem(source, obj));// 自定义验证函数不成功的返回true
  160. };
  162. /**
  163. * 判断缓存是否还生效，获取js，保存到ls
  164. * @param {object} obj basket.require参数对象
  165. * @returns {object} 返回promise对象
  166. */
  167. var handleStackObject =function( obj ){
  168. var source, promise, shouldFetch;
  170. if(!obj.url ){
  171. return;
  172. }
  174. obj.key =( obj.key || obj.url );
  176. source = basket.get( obj.key );
  178. obj.execute = obj.execute !==false;
  180. shouldFetch = isCacheValid(source, obj);// 判断缓存是否还有效
  182. // 如果shouldFetch为true，请求数据，保存到ls（live选项意义不明，文档也没有说，这里当它一只是undefined）
  183. if( obj.live || shouldFetch ){
  184. if( obj.unique ){
  185. // set parameter to prevent browser cache
  186. obj.url +=(( obj.url.indexOf('?')>0)?'&':'?')+'basket-unique='+ obj.unique;
  187. }
  188. promise = saveUrl( obj );// 请求对应js，缓存到ls里
  190. if( obj.live &&!shouldFetch ){
  191. promise = promise
  192. .then(function( result ){
  193. // If we succeed, just return the value
  194. // RSVP doesn't have a .fail convenience method
  195. return result;
  196. },function(){
  197. return source;
  198. });
  199. }
  200. }else{
  201. // 缓存可用。
  202. source.type = obj.type || source.originalType;
  203. source.execute = obj.execute;
  204. promise =new RSVP.Promise(function( resolve ){
  205. // 下面的setTimeout用来解决结合requirejs使用时的加载问题。
  206. // setTimeout(function(){
  207. debugger;
  208. resolve( source );
  209. // },0);
  210. });
  211. }
  213. return promise;
  214. };
  216. /**
  217. * 把script插入到head中
  218. * @param {object} obj 缓存对象
  219. */
  220. var injectScript =function( obj ){
  221. var script = document.createElement('script');
  223. script.defer =true;
  224. // Have to use .text, since we support IE8,
  225. // which won't allow appending to a script
  226. script.text = obj.data;
  227. head.appendChild( script );
  228. };
  230. // 保存着特定类型的执行函数，默认行为是把script注入到页面
  231. var handlers ={
  232. 'default': injectScript
  233. };
  235. /**
  236. * 执行缓存对象对应回调函数，把script插入到head中
  237. * @param {object} obj 缓存对象
  238. * @returns {undefined} 不需要返回结果
  239. */
  240. var execute =function( obj ){
  241. // 执行类型特定的回调函数
  242. if( obj.type && handlers[ obj.type ]){
  243. return handlers[ obj.type ]( obj );
  244. }
  246. // 否则执行默认的注入script行为
  247. return handlers['default']( obj );// 'default' is a reserved word
  248. };
  250. /**
  251. * 批量执行缓存对象动作
  252. * @param {Array} resources 缓存对象数组
  253. * @returns {Array} 返回参数resources
  254. */
  255. var performActions =function( resources ){
  256. return resources.map(function( obj ){
  257. if( obj.execute ){
  258. execute( obj );
  259. }
  261. return obj;
  262. });
  263. };
  265. /**
  266. * 处理请求对象，不包括执行对应的动作
  267. * @param {object} 会把basket.require的参数传过来，也就是多个对象
  268. * @returns {object} promise对象
  269. */
  270. var fetch =function(){
  271. var i, l, promises =[];
  273. for( i =0, l = arguments.length; i < l; i++){
  274. promises.push( handleStackObject( arguments[ i ]));
  275. }
  276. return RSVP.all( promises );
  277. };
  279. /**
  280. * 包装promise的then方法实现链式调用
  281. * @returns {Object} 添加了thenRequire方法的promise实例
  282. */
  283. var thenRequire =function(){
  284. var resources = fetch.apply(null, arguments );
  285. var promise =this.then(function(){
  286. return resources;
  287. }).then( performActions );
  288. promise.thenRequire = thenRequire;
  289. return promise;
  290. };
  292. window.basket ={
  293. require:function(){// 参数为多个请求相关的对象，对象的属性：url、key、expire、execute、unique、once和skipCache等
  294. // 处理execute参数
  295. for(var a =0, l = arguments.length; a < l; a++){
  296. arguments[a].execute = arguments[a].execute !==false;// execute 默认选项为ture
  298. // 如果有只执行一次的选项once，并之前已经加载过这个js，那么设置execute选项为false
  299. if( arguments[a].once && inBasket.indexOf(arguments[a].url)>=0){
  300. arguments[a].execute =false;
  301. // 需要执行的请求的url保存到inBasket，
  302. }elseif( arguments[a].execute !==false&& inBasket.indexOf(arguments[a].url)<0){
  303. inBasket.push(arguments[a].url);
  304. }
  305. }
  307. var promise = fetch.apply(null, arguments ).then( performActions );
  309. promise.thenRequire = thenRequire;
  310. return promise;
  311. },
  313. remove:function( key ){
  314. localStorage.removeItem( storagePrefix + key );
  315. returnthis;
  316. },
  318. // 根据key值获取对应ls的value
  319. get:function( key ){
  321. var item = localStorage.getItem( storagePrefix + key );
  322. try{
  323. return JSON.parse( item ||'false');
  324. }catch( e ){
  325. returnfalse;
  326. }
  327. },
  329. // 批量清除缓存对象，传入true只清除过期对象
  330. clear:function( expired ){
  331. var item, key;
  332. var now =+newDate();
  334. for( item in localStorage ){
  335. key = item.split( storagePrefix )[1];
  336. if( key &&(!expired ||this.get( key ).expire <= now )){
  337. this.remove( key );
  338. }
  339. }
  341. returnthis;
  342. },
  344. isValidItem:null,// 可以自己扩展一个isValidItem函数，来自定义判断缓存是否过期。
  346. timeout:5000,// ajax 默认的请求timeout为5s
  348. // 添加特定类型的执行函数
  349. addHandler:function( types, handler ){
  350. if(!Array.isArray( types )){
  351. types =[ types ];
  352. }
  353. types.forEach(function( type ){
  354. handlers[ type ]= handler;
  355. });
  356. },
  358. removeHandler:function( types ){
  359. basket.addHandler( types,undefined);
  360. }
  361. };
  363. // delete expired keys
  364. // basket.js 加载时会删除过期的缓存
  365. basket.clear(true);
  367. })(this, document );
 
 
 


















            

            
posted @ 
2016-08-31 18:08 
wujiaolong 
阅读(553) 
评论(0) 
编辑 
收藏 
举报