github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 11:19:56 +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.IDBString("logOpen").then(r => {
$A.openLog = r === "open" $A.openLog = r === "open"
if ($A.openLog) { if ($A.openLog) {
$A.loadScript('js/vconsole.min.js', (e) => { $A.loadScript('js/vconsole.min.js').then(_ => {
if (e !== null || typeof window.VConsole !== 'function') {
$A.modalError("vConsole 组件加载失败！");
return;
}
window.vConsole = new window.VConsole({ window.vConsole = new window.VConsole({
onReady: () => { onReady: () => {
console.log('vConsole: onReady'); console.log('vConsole: onReady');
@ -133,7 +129,9 @@ export default {
console.log('vConsole: onClearLog'); 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([ $A.loadScriptS([
'js/ace/ace.js', 'js/ace/ace.js',
'js/ace/mode-json.js', 'js/ace/mode-json.js',
], () => { ]).then(_ => {
// set init editor size // set init editor size
this.setSize(this.$el, {height: this.height, width: this.width}) this.setSize(this.$el, {height: this.height, width: this.width})
@ -234,7 +234,7 @@ export default {
this.code = this.editor.getValue() this.code = this.editor.getValue()
this.$emit('input', this.code); this.$emit('input', this.code);
}); });
}); })
}, },
methods: { methods: {
/** /**

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

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

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

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

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

@ -79,10 +79,11 @@ export default {
showHideAnimationType: 'none', showHideAnimationType: 'none',
pswpModule: () => import('photoswipe'), pswpModule: () => import('photoswipe'),
}); });
this.lightbox.on('change', () => { this.lightbox.on('change', _ => {
if (htmlZoom) { if (!htmlZoom) {
$A.loadScript('js/pinch-zoom.umd.min.js', _ => { return;
if (PinchZoom !== 'object') { }
$A.loadScript('js/pinch-zoom.umd.min.js').then(_ => {
const swiperItems = document.querySelector(`.${this.className}`).querySelectorAll(".preview-image-swipe") const swiperItems = document.querySelector(`.${this.className}`).querySelectorAll(".preview-image-swipe")
swiperItems.forEach(swipeItem => { swiperItems.forEach(swipeItem => {
if (swipeItem.getAttribute("data-init-pinch-zoom") !== "init") { if (swipeItem.getAttribute("data-init-pinch-zoom") !== "init") {
@ -103,9 +104,7 @@ export default {
}) })
} }
}) })
}
}) })
}
}); });
this.lightbox.on('close', () => { this.lightbox.on('close', () => {
this.$emit("on-close") this.$emit("on-close")

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

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

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

@ -114,7 +114,7 @@ export default {
$A.loadScriptS([ $A.loadScriptS([
'js/emoji.all.js', 'js/emoji.all.js',
'js/emoticon.all.js', 'js/emoticon.all.js',
], _ => { ]).then(_ => {
const baseUrl = $A.apiUrl("../images/emoticon") const baseUrl = $A.apiUrl("../images/emoticon")
if ($A.isArray(window.emojiData)) { if ($A.isArray(window.emojiData)) {
this.emojiData = window.emojiData.sort(function (a, b) { 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/recorder.mp3.min.js',
'js/recorder/lib.fft.js', 'js/recorder/lib.fft.js',
'js/recorder/frequency.histogram.view.js', 'js/recorder/frequency.histogram.view.js',
], (e) => { ]).then(_ => {
if (e !== null || typeof window.Recorder !== 'function') { if (typeof window.Recorder !== 'function') {
return; return;
} }
this.recordRec = window.Recorder({ this.recordRec = window.Recorder({

6
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/key.js`,
`language/web/${languageType}.js`, `language/web/${languageType}.js`,
], _ => { ])
resolve(action) resolve(action)
});
}) })
}, },