Skip to content

Commit

Permalink
更换cdn
Browse files Browse the repository at this point in the history
  • Loading branch information
xiangwenhu committed Jan 16, 2025
1 parent a111980 commit f633cf5
Showing 5 changed files with 102 additions and 34 deletions.
26 changes: 26 additions & 0 deletions docs/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
table {
width: 100%; /* 表格宽度 */
border-collapse: collapse; /* 边框合并 */
}

table, th, td {
border: 1px solid #ddd; /* 给表格和单元格添加边框 */
}

th, td {
padding: 8px; /* 内边距 */
text-align: left; /* 文本左对齐 */
}

th {
background-color: #f2f2f2; /* 表头背景色 */
font-weight: bold; /* 加粗表头文字 */
}

tr:nth-child(even) {
background-color: #f9f9f9; /* 隔行变色,提高可读性 */
}

tr:hover {
background-color: #f1f1f1; /* 当鼠标悬停在行上时改变背景色 */
}
5 changes: 5 additions & 0 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./index.css" rel="stylesheet" type="text/css">
<title>r-loader演示</title>
<style>
#messages {
@@ -32,6 +33,10 @@
<tbody id="tbody"></tbody>
</table>

<div style="margin: 8px;">
概览:
总数:<span id="s_total"></span>,成功加载<span id="s_success">0</span>, 失败<span id="s_failed">0</span>,总开销:<span id="s_cost">0ms</span>
</div>
<div>
<button id="btn-load">加载</button>
<button id="btn-clear">清除缓存</button>
22 changes: 17 additions & 5 deletions docs/r-loader.js
Original file line number Diff line number Diff line change
@@ -65,7 +65,7 @@ class CacheManager {
// return this.storage.clear();
}

del(key){
del(key) {
delete this._cached[key];
// return this.storage.del();
}
@@ -79,12 +79,18 @@ const defaultStorage = {
clear: noop
};

const defaultStartOptions = {
concurrent: 5
}

// status: undefined loading loaded error
class ResourceLoader extends Emitter {
constructor(resourcesInfo, storage = defaultStorage) {
super();
this.processing = false;
this._originResourcesInfo = resourcesInfo;
this._cacheManager = new CacheManager(storage);
this.startOptions = defaultStartOptions;
this.reset();
}

@@ -156,7 +162,7 @@ class ResourceLoader extends Emitter {
getCacheData(key) {
return this._cacheManager.get(key)
}


fetchResource(info) {
const url = getUrlWithVersion(info);
@@ -175,7 +181,7 @@ class ResourceLoader extends Emitter {
this.emit("error", err, info);

// 因被依赖,会导致其他依赖他的资源为失败
this.setFactorErrors(info);
this.setFactorErrors(info);
this.nextLoad();
}

@@ -224,25 +230,31 @@ class ResourceLoader extends Emitter {
info.status = "loading";
this.fetchResource(info);
info = this.findCanLoadResource();

}

}

getCacheInfos() {
const keys = this.resourcesInfo.map(r => r.key);
return this._cacheManager.load(keys);
}

startLoad() {
startLoad(options) {

if (this.processing) return;

const failed = validateKey(this.resourcesInfo);
if (failed) {
return;
}
if (this.isCompleted()) {
this.emit("completed", this._cacheManager.datas);
}

this.getCacheInfos()
.then(() => this.fetchResources())
.catch(err=> this.emit("error", err));
.catch(err => this.emit("error", err));
}
}

78 changes: 49 additions & 29 deletions docs/test.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
const resourcesInfo = [
{
key: "mqtt",
url: "https://cdn.bootcdn.net/ajax/libs/mqtt/4.2.8/mqtt.js",
url: "https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.10.3/mqtt.min.js",
ver: "4.2.8"
},
{
pre: ["promise"],
key: "axios",
url: "https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js",
url: "https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.8/axios.min.js",
ver: "0.21.1"
}
, {
key: "lottie",
url: "https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.12/lottie.js"
url: "https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"
}, {
key: "flv",
url: "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"
url: "https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"
},
{
key: "promise",
url: "https://cdn.bootcdn.net/ajax/libs/es6-promise/4.2.8/es6-promise.auto.js"
url: "https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"
}, {
key: "react-dom",
url: "https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"
url: "https://cdnjs.cloudflare.com/ajax/libs/react-dom/19.0.0/cjs/react-dom.production.min.js"
}, {
pre: "react-dom",
url: "https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js",
url: "https://cdnjs.cloudflare.com/ajax/libs/react/19.0.0/cjs/react.production.min.js",
key: "react"
}, {
key: "react-router",
pre: ["react", "react-dom"],
url: "https://cdn.bootcdn.net/ajax/libs/react-router/5.2.0/react-router.js"
url: "https://cdnjs.cloudflare.com/ajax/libs/react-router/6.28.1/react-router.production.min.js"
}, {
key: "redux",
pre: ["react", "react-dom"],
url: "https://cdn.bootcdn.net/ajax/libs/redux/4.1.0/redux.min.js"
url: "https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.1/redux.legacy-esm.js"
}, {
key: "react-redux",
pre: ["react", "react-dom", "redux"],
url: "https://cdn.bootcdn.net/ajax/libs/react-redux/7.2.4/react-redux.min.js"
url: "https://cdnjs.cloudflare.com/ajax/libs/react-redux/9.2.0/react-redux.mjs"
}
];

@@ -72,6 +72,17 @@ const statusMap = {
4: "下载失败"
}


function getStatusHtml(r) {

if (r.status == 2) {
return `<img src="./images/loading.gif"></img>`
}

return statusMap[r.status] || ''
}


function renderTable(resources) {
const htmlStr = resources.map(r => `
<tr>
@@ -80,7 +91,7 @@ function renderTable(resources) {
<td>${Array.isArray(r.pre) ? r.pre.join(",") : ""}</td>
<td>${r.url}</td>
<td>${r.cached ? "yes" : "no"}</td>
<td>${statusMap[r.status] || ''}</td>
<td>${getStatusHtml(r)}</td>
<td>${r.message || ''}</td>
</tr>
`).join("");
@@ -112,17 +123,13 @@ listenConsole();
let startTime;



function getStausText() {

}


; (async function init() {

const rl = new ResourceLoader(resourcesInfo, idb);
const loader = new ResourceLoader(resourcesInfo, idb);

s_total.innerHTML = resourcesInfo.length;

const cachedDatas = await rl.getCacheInfos();
const cachedDatas = await loader.getCacheInfos();

const eInfos = resourcesInfo.map(r => {
const cached = !!cachedDatas[r.key]
@@ -141,38 +148,50 @@ function getStausText() {
if (!item) return;
item.status = info.status;
item.message = info.message;
item.cached = info.cached;
renderTable(eInfos);
}



rl.on("loading", (info) => {
loader.on("loading", (info) => {
console.log("loading:", info);
updateInfo({
...info,
status: 2
})
});

rl.on("loaded", (progress, info) => {
console.log("loaded:", progress, info);
loader.on("loaded", (info) => {
console.log("loaded:", info);
updateInfo({
...info,
status: 3
status: 3,
cached: true
})
});

rl.on("completed", (datas) => {

loader.on("progress", (progress, info) => {
console.log("progress:", progress, info);
s_success.innerHTML = progress.loaded;
});


loader.on("completed", (datas) => {
console.log("completed event:", datas);
console.log("total time:", Date.now() - startTime)
cost = Date.now() - startTime;
console.log("total time:", cost)

s_cost.innerHTML = `${cost} ms`
});

rl.on("all-loaded", (datas) => {
loader.on("all-loaded", (datas) => {
console.log("loaded event:", datas);
console.log("total time:", Date.now() - startTime)
});

rl.on("error", (error, info) => {
loader.on("error", (error, info) => {
console.log("error event:", error.message, info);
updateInfo({
...info,
@@ -184,13 +203,14 @@ function getStausText() {
addEvent("#btn-load", "click", () => {
messager.clear();
startTime = Date.now();
rl.reset();
rl.startLoad();
loader.reset();
loader.startLoad();
});


addEvent("#btn-clear", "click", () => {
window.idb.clear();
location.reload();
});


5 changes: 5 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
@@ -64,3 +64,8 @@ rl.on("error", (error, info)=>{
});

```


## TODO::
1. 并发数量
2. appId独有和共享资源

0 comments on commit f633cf5

Please sign in to comment.