From d11a89d02c375aee14b2f55510a9790c279f5ef8 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Sun, 2 Apr 2023 22:41:49 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=9D=99=E6=80=81=E8=B5=84=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/App.vue | 10 +- resources/assets/js/components/AceEditor.vue | 4 +- .../assets/js/components/MDEditor/index.vue | 8 +- resources/assets/js/components/OnlyOffice.vue | 11 +- .../PreviewImage/components/swipe.vue | 45 ++-- resources/assets/js/functions/common.js | 213 ++++++++++-------- .../manage/components/ChatInput/emoji.vue | 2 +- .../manage/components/ChatInput/index.vue | 4 +- resources/assets/js/store/actions.js | 8 +- 9 files changed, 163 insertions(+), 142 deletions(-) diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue index 6f4ce8bf5..f2e6f5284 100755 --- a/resources/assets/js/App.vue +++ b/resources/assets/js/App.vue @@ -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 组件加载失败！"); + }) } }) } diff --git a/resources/assets/js/components/AceEditor.vue b/resources/assets/js/components/AceEditor.vue index 3633da854..8ec048ea1 100644 --- a/resources/assets/js/components/AceEditor.vue +++ b/resources/assets/js/components/AceEditor.vue @@ -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: { /** diff --git a/resources/assets/js/components/MDEditor/index.vue b/resources/assets/js/components/MDEditor/index.vue index 8478537ad..53c71fb3a 100755 --- a/resources/assets/js/components/MDEditor/index.vue +++ b/resources/assets/js/components/MDEditor/index.vue @@ -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("组件加载失败！"); }); }, diff --git a/resources/assets/js/components/OnlyOffice.vue b/resources/assets/js/components/OnlyOffice.vue index e01c27ffa..7593d5b95 100644 --- a/resources/assets/js/components/OnlyOffice.vue +++ b/resources/assets/js/components/OnlyOffice.vue @@ -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, diff --git a/resources/assets/js/components/PreviewImage/components/swipe.vue b/resources/assets/js/components/PreviewImage/components/swipe.vue index b3e9490b6..8dc722cf4 100644 --- a/resources/assets/js/components/PreviewImage/components/swipe.vue +++ b/resources/assets/js/components/PreviewImage/components/swipe.vue @@ -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") diff --git a/resources/assets/js/functions/common.js b/resources/assets/js/functions/common.js index 1de05775b..aa0de14eb 100755 --- a/resources/assets/js/functions/common.js +++ b/resources/assets/js/functions/common.js @@ -906,110 +906,137 @@ const localforage = require("localforage"); /** * 动态加载js文件 * @param url - * @param callback + * @returns {Promise} */ - 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} */ - 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: {}, diff --git a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue index 4ede06d62..11456f1ba 100644 --- a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue +++ b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue @@ -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) { diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue index 7c70226d0..e3af2e6f0 100755 --- a/resources/assets/js/pages/manage/components/ChatInput/index.vue +++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue @@ -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({ diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js index f2f7afcbd..1f66250e7 100644 --- a/resources/assets/js/store/actions.js +++ b/resources/assets/js/store/actions.js @@ -95,12 +95,12 @@ export default { }) // 加载语言包 - $A.loadScriptS([ + await $A.loadScriptS([ `language/web/key.js`, `language/web/${languageType}.js`, - ], _ => { - resolve(action) - }); + ]) + + resolve(action) }) },