github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-11 18:42:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化动态加载静态资源

Browse Source
This commit is contained in:
kuaifan 2023-04-02 22:41:49 +08:00
parent b580a9f7ad
commit d11a89d02c
9 changed files with 163 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/assets/js/App.vue
View File

@ -120,11 +120,7 @@ export default {
$A.IDBString("logOpen").then(r => {
$A.openLog = r === "open"
if ($A.openLog) {
$A.loadScript('js/vconsole.min.js', (e) => {
if (e !== null || typeof window.VConsole !== 'function') {
$A.modalError("vConsole 组件加载失败！");
return;
}
$A.loadScript('js/vconsole.min.js').then(_ => {
window.vConsole = new window.VConsole({
onReady: () => {
console.log('vConsole: onReady');
@ -133,7 +129,9 @@ export default {
console.log('vConsole: onClearLog');
}
});
});
}).catch(_ => {
$A.modalError("vConsole 组件加载失败！");
})
}
})
}

4
resources/assets/js/components/AceEditor.vue
View File

@ -187,7 +187,7 @@ export default {
$A.loadScriptS([
'js/ace/ace.js',
'js/ace/mode-json.js',
], () => {
]).then(_ => {
// set init editor size
this.setSize(this.$el, {height: this.height, width: this.width})
@ -234,7 +234,7 @@ export default {
this.code = this.editor.getValue()
this.$emit('input', this.code);
});
});
})
},
methods: {
/**

8
resources/assets/js/components/MDEditor/index.vue
View File

@ -225,17 +225,15 @@
}
},
htmlOk() {
$A.loadScript('js/html2md.js', (e) => {
if (e !== null || typeof toMarkdown !== 'function') {
$A.modalError("组件加载失败！");
return;
}
$A.loadScript('js/html2md.js').then(_ => {
if (this.transfer) {
this.$refs.md2.insertContent('\n' + toMarkdown(this.htmlValue, { gfm: true }));
} else {
this.$refs.md1.insertContent('\n' + toMarkdown(this.htmlValue, { gfm: true }));
}
this.htmlValue = "";
}).catch(_ => {
$A.modalError("组件加载失败！");
});
},

11
resources/assets/js/components/OnlyOffice.vue
View File

@ -156,12 +156,7 @@ export default {
}
this.loading = true;
this.loadError = false;
$A.loadScript($A.apiUrl("../office/web-apps/apps/api/documents/api.js"), (e) => {
this.loading = false;
if (e !== null) {
this.loadError = true;
return;
}
$A.loadScript($A.apiUrl("../office/web-apps/apps/api/documents/api.js")).then(_ => {
if (!this.documentKey) {
this.handleClose();
return
@ -172,6 +167,10 @@ export default {
} else {
this.loadFile();
}
}).catch(_ => {
this.loadError = true
}).finally(_ => {
this.loading = false
})
},
immediate: true,

45
resources/assets/js/components/PreviewImage/components/swipe.vue
View File

@ -79,33 +79,32 @@ export default {
showHideAnimationType: 'none',
pswpModule: () => import('photoswipe'),
});
this.lightbox.on('change', () => {
if (htmlZoom) {
$A.loadScript('js/pinch-zoom.umd.min.js', _ => {
if (PinchZoom !== 'object') {
const swiperItems = document.querySelector(`.${this.className}`).querySelectorAll(".preview-image-swipe")
swiperItems.forEach(swipeItem => {
if (swipeItem.getAttribute("data-init-pinch-zoom") !== "init") {
swipeItem.setAttribute("data-init-pinch-zoom", "init")
swipeItem.querySelector("img").addEventListener("pointermove", e => {
if (dragIng) {
e.stopPropagation();
}
})
new PinchZoom.default(swipeItem, {
draggableUnzoomed: false,
onDragStart: () => {
dragIng = true;
},
onDragEnd: () => {
dragIng = false;
}
})
this.lightbox.on('change', _ => {
if (!htmlZoom) {
return;
}
$A.loadScript('js/pinch-zoom.umd.min.js').then(_ => {
const swiperItems = document.querySelector(`.${this.className}`).querySelectorAll(".preview-image-swipe")
swiperItems.forEach(swipeItem => {
if (swipeItem.getAttribute("data-init-pinch-zoom") !== "init") {
swipeItem.setAttribute("data-init-pinch-zoom", "init")
swipeItem.querySelector("img").addEventListener("pointermove", e => {
if (dragIng) {
e.stopPropagation();
}
})
new PinchZoom.default(swipeItem, {
draggableUnzoomed: false,
onDragStart: () => {
dragIng = true;
},
onDragEnd: () => {
dragIng = false;
}
})
}
})
}
})
});
this.lightbox.on('close', () => {
this.$emit("on-close")

213
resources/assets/js/functions/common.js vendored
View File

@ -906,110 +906,137 @@ const localforage = require("localforage");
/**
* 动态加载js文件
* @param url
* @param callback
* @returns {Promise<unknown>}
*/
loadScript(url, callback) {
url = $A.originUrl(url);
if (this.rightExists(url, '.css')) {
this.loadCss(url, callback)
return;
}
if (this.__loadScript[url] === true) {
typeof callback === "function" && callback(null);
return;
}
let script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = () => {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
this.__loadScript[url] = true;
typeof callback === "function" && callback(null);
}
};
} else {
script.onload = () => {
this.__loadScript[url] = true;
typeof callback === "function" && callback(null);
};
script.onerror = (e) => {
typeof callback === "function" && callback(e);
};
}
if (this.rightExists(url, '.js')) {
script.src = url + "?hash=" + window.systemInfo.version;
} else {
script.src = url;
}
document.body.appendChild(script);
},
loadScriptS(urls, callback) {
let i = 0;
let recursiveCallback = () => {
if (++i < urls.length) {
this.loadScript(urls[i], recursiveCallback)
} else {
typeof callback === "function" && callback(null);
loadScript(url) {
return new Promise(async (resolve, reject) => {
url = $A.originUrl(url)
if (this.rightExists(url, '.css')) {
return resolve(this.loadCss(url))
}
}
this.loadScript(urls[0], recursiveCallback);
//
let i = 0
while (this.__loadScript[url] === "loading") {
await new Promise(r => setTimeout(r, 1000))
i++
if (i > 30) {
return reject("加载超时")
}
}
if (this.__loadScript[url] === "loaded") {
return resolve(false)
}
this.__loadScript[url] = "loading"
//
const script = document.createElement("script")
script.type = "text/javascript"
if (script.readyState) {
script.onreadystatechange = () => {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null
this.__loadScript[url] = "loaded"
resolve(true)
}
}
} else {
script.onload = () => {
this.__loadScript[url] = "loaded"
resolve(true)
}
script.onerror = (e) => {
this.__loadScript[url] = "error"
reject(e)
}
}
if (this.rightExists(url, '.js')) {
script.src = url + "?hash=" + window.systemInfo.version
} else {
script.src = url
}
document.body.appendChild(script)
})
},
loadScriptS(urls) {
return new Promise(resolve => {
let i = 0
const recursiveCallback = () => {
if (++i < urls.length) {
this.loadScript(urls[i]).finally(recursiveCallback)
} else {
resolve()
}
}
this.loadScript(urls[0]).finally(recursiveCallback)
})
},
__loadScript: {},
/**
* 动态加载css
* 动态加载css文件
* @param url
* @param callback
* @returns {Promise<unknown>}
*/
loadCss(url, callback) {
url = $A.originUrl(url);
if (this.rightExists(url, '.js')) {
this.loadScript(url, callback)
return;
}
if (this.__loadCss[url] === true) {
typeof callback === "function" && callback(null);
return;
}
let script = document.createElement('link');
if (script.readyState) {
script.onreadystatechange = () => {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
this.__loadCss[url] = true;
typeof callback === "function" && callback(null);
loadCss(url) {
return new Promise(async (resolve, reject) => {
url = $A.originUrl(url)
if (this.rightExists(url, '.js')) {
return resolve(this.loadScript(url))
}
//
let i = 0
while (this.__loadCss[url] === "loading") {
await new Promise(r => setTimeout(r, 1000))
i++
if (i > 30) {
return reject("加载超时")
}
}
if (this.__loadCss[url] === "loaded") {
return resolve(false)
}
this.__loadCss[url] = "loading"
//
const script = document.createElement('link')
if (script.readyState) {
script.onreadystatechange = () => {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null
this.__loadCss[url] = "loaded"
resolve(true)
}
}
} else {
script.onload = () => {
this.__loadCss[url] = "loaded"
resolve(true)
}
};
} else {
script.onload = () => {
this.__loadCss[url] = true;
typeof callback === "function" && callback(null);
};
script.onerror = (e) => {
typeof callback === "function" && callback(e);
};
}
script.rel = 'stylesheet';
if (this.rightExists(url, '.css')) {
script.href = url + "?hash=" + window.systemInfo.version;
} else {
script.href = url;
}
document.getElementsByTagName('head').item(0).appendChild(script);
},
loadCssS(urls, callback) {
let i = 0;
let recursiveCallback = () => {
if (++i < urls.length) {
this.loadCss(urls[i], recursiveCallback)
} else {
typeof callback === "function" && callback(null);
script.onerror = (e) => {
this.__loadCss[url] = "error"
reject(e)
}
}
}
this.loadCss(urls[0], recursiveCallback);
script.rel = 'stylesheet'
if (this.rightExists(url, '.css')) {
script.href = url + "?hash=" + window.systemInfo.version
} else {
script.href = url
}
document.getElementsByTagName('head').item(0).appendChild(script)
})
},
loadCssS(urls) {
return new Promise(resolve => {
let i = 0
const recursiveCallback = () => {
if (++i < urls.length) {
this.loadCss(urls[i]).finally(recursiveCallback)
} else {
resolve()
}
}
this.loadCss(urls[0]).finally(recursiveCallback)
})
},
__loadCss: {},

2
resources/assets/js/pages/manage/components/ChatInput/emoji.vue
View File

@ -114,7 +114,7 @@ export default {
$A.loadScriptS([
'js/emoji.all.js',
'js/emoticon.all.js',
], _ => {
]).then(_ => {
const baseUrl = $A.apiUrl("../images/emoticon")
if ($A.isArray(window.emojiData)) {
this.emojiData = window.emojiData.sort(function (a, b) {

4
resources/assets/js/pages/manage/components/ChatInput/index.vue
View File

@ -721,8 +721,8 @@ export default {
'js/recorder/recorder.mp3.min.js',
'js/recorder/lib.fft.js',
'js/recorder/frequency.histogram.view.js',
], (e) => {
if (e !== null || typeof window.Recorder !== 'function') {
]).then(_ => {
if (typeof window.Recorder !== 'function') {
return;
}
this.recordRec = window.Recorder({

8
resources/assets/js/store/actions.js vendored
View File

@ -95,12 +95,12 @@ export default {
})
// 加载语言包
$A.loadScriptS([
await $A.loadScriptS([
`language/web/key.js`,
`language/web/${languageType}.js`,
], _ => {
resolve(action)
});
])
resolve(action)
})
},