作用
帶有重試和後備模式的根據js/css/img的路徑或url將內容存入localforage中,支持全量或增量更新,二次打開頁面時直接從localforage中讀取,省卻請求,提高響應速度.localforage相比localStorage有許多完美的標籤,在緩存這塊而言是個重大的嘗試.
插件流程
- 配置:json或object
- 初始化:
2.1 瀏覽器是否支持localforage,不支持的話,直接創建<script>,<css>等標籤.
2.2 對比localforage的autoload_base('version','domain'),插入或更新並清理localforage
2.3 同步或異步的按參數全量或增量載入css/js/img到指定的鍵值中
2.4 讀取內容並回調.
概念
統一加載:頁面初始化時,從服務器獲取css/js/img等url域名和路徑信息的json配置,按key從中加載即可.
獨立加載:頁面初始化後,不從統一配置json中調用
寫法
[名稱] //獨立配置時必填,僅限英文數字._-
[格式.版本號] //格式必填,版本號可選
[回調名稱] //選填,僅限英文數字._-
主路徑或url,後備1路徑或url,後備2路徑或url... //以此類推,路徑時無需後綴,test/jq.js可寫成test/jq
統一配置示例:
'jquery': '[js.v3.01][callback]test/jq,http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js',
'jquery': '[js.v3.01]test/jq,http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js',
'jquery': '[js]test/jq',
'jquery': '[js]http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js'
獨立配置示例:
'[jquery][js.v3.01][callback]test/jq,http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js',
'[jquery][js.v3.01]test/jq,http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js',
'[jquery][js]test/jq',
'[jquery][js]http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js'
注意:統一配置和獨立配置可以混合使用
明白了以上寫法之後,下方內容就很容易理解了
初始化配置
//
{
'version': 'v1.0',//必填
'domain': {//必填,域名及css/js文件內相對路徑替換
'css': 'http://css.test.com',//或http://www.test.com/css等
'js': 'http://js.test.com',//如果文件中存在_domain.css_,_domain.js_,_domain.img_將被替換爲該值
'img': 'http://img.test.com'
},
'base': {//必填,localforage和autoload的url和路徑
'_localforage': '[js.v1.0]localforage.js,http://cdn.test.com/localforage.js',
'_autoload': '[js.1013][test_function_name]test,http://test.com/libs/test.js'
},
//以上均爲必填項,其中版本或域名變更時,將清零localforage,進行全量更新.
'list': {//可選,全站css/js/需緩存的base64_img集合,方便統一管理和下方調用
'asyn': false,//同步或異步,默認異步
'localforage': '[js.v1.0]localforage.js,http://cdn.test.com/localforage.js',
'test': '[js.1013][test_function_name]test,http://test.com/libs/test.js'
}
}
使用
流程:配置>初始化>加載
1.配置>初始化
//初始化
autoload.init({
'version': 'v1.0',
'domain': {
'css': 'http://css.test.com',
'js': 'http://js.test.com',
'img': 'http://img.test.com'
},
'base': {//必填,localforage和autoload的url和路徑
'_localforage': '[js.v1.0]localforage.js,http://cdn.test.com/localforage.js',
'_autoload': '[js.1013][test_function_name]test,http://test.com/libs/test.js'
},
'list': {//可選,全站css/js/需緩存的base64_img集合,方便統一管理和下方調用
'asyn': false,//同步或異步,該項未配置時默認異步
'jquery': '[js.v1.0]jquery',
'test': '[js.1013][test_function_name]test,http://test.com/libs/test.js'
}
},'init');
//此後根據需要加載
2.1 統一加載
autoload();//什麼都不填,則異步的加載配置中的'list'全部清單
autoload({'asyn': false,'jquery,test'});//同步,即按list清單逐個加載>回調>再加載
autoload({'jquery,test'});//異步
2.2 獨立加載之js:
//同步:
autoload(
{
'asyn': true,
'[name][js.1013][test_function_name]path/jquery,http://test.com/test.js',
/*,[name][js.1013][test_function_name]...可一次加載多個...*/
});
//異步:
autoload({
'[name][js.1013][test_function_name]path/jquery,http://test.com/test.js',
/*,[name][js.1013][test_function_name]...可一次加載多個...*/
});
2.2 獨立加載之Html標籤:
<autoload data-autoload='[name][js.1013][test_function_name]path/jquery,http://test.com/test.js'></autoload>
<!--//data-autoload內容與js中寫法無差異-->
範例
<html>
<head>
<link type="text/css" rel="stylesheet" href="base.css"/>
<!--base.css作用:通過該文件解決因autoload未開始前加載css時的頁面閃動-->
<script type='text/javascript' src='base.js'></script>
<!--base.js作用:內置了配置,將包括localforage和autoload在內的所有文件進行緩存-->
</head>
<body>
</body>
</html>