修改动态加载lib

docs/lab/css/common.css

@@ -21,7 +21,7 @@ html, body {
   overflow: hidden;
 }
 
-.part-left .controls {
+.part-left .header {
   display: flex;
   align-items: center;
   height: 40px;
@@ -31,17 +31,28 @@ html, body {
   box-sizing: border-box;
 }
 
-.part-left .controls .left {
+.part-left .header .left {
   display: flex;
   align-items: center;
   flex: 1;
 }
 
-.part-left .controls .left .logo {
+.part-left .header .left .logo {
   padding-right: 30px;
 }
 
-.part-left .controls .run {
+.part-left .lib {
+  height: 50px;
+  padding: 5px;
+  outline: none;
+  resize: none;
+  border: none;
+  font-size: 13px;
+  color: #666;
+  border-bottom: 1px solid #ddd;
+}
+
+.part-left .header .run {
   height: 30px;
   width: 100px;
 }

docs/lab/index.html

@@ -19,15 +19,15 @@
 <body>
     <div class="container">
         <div class="part-left">
-            <div class="controls">
+            <div class="header">
                 <div class="left">
                     <a href="./" class="logo">ArtPlayer.js Lab</a>
+                    <a href="../docs" class="logo">Github</a>
                     <a href="../docs" class="logo">Document</a>
-                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
-                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                 </div>
                 <input class="run" type="button" value="Run Code">
             </div>
+            <textarea class="lib" cols="30" rows="10" placeholder="Other dependencies, multiple line breaks" spellcheck="false"></textarea>
             <div class="code"></div>
         </div>
         <div class="part-right">
@@ -41,7 +41,6 @@
     <script src="./plugins/codemirror.js"></script>
     <script src="./plugins/javascript.js"></script>
     <script src="./js/artplayer.js"></script>
-    <script src="./js/artplayer-plugin-subtitle.js"></script>
     <script src="./js/common.js"></script>
     <script>
         var _hmt = _hmt || [];
@@ -52,9 +51,6 @@
           s.parentNode.insertBefore(hm, s);
         })();
     </script>
-    <script>
-        loadCode('./js/index.js');
-    </script>
 </body>
 
 </html>

docs/lab/js/common.js

@@ -1,25 +1,26 @@
 (function(win) {
     var $code = document.querySelector('.code');
     var $run = document.querySelector('.run');
-  var fileCode = '';
+    var $lib = document.querySelector('.lib');
+    var defaultLib = './js/artplayer-plugin-subtitle.js';
+    var loaddLib = [];
 
     consola.creat({
         target: '.console',
         size: '100%',
-    zIndex: 99
+        zIndex: 99,
     });
 
     var mirror = CodeMirror($code, {
         lineNumbers: true,
         mode: 'javascript',
         matchBrackets: true,
-    value: ''
+        value: '',
     });
 
-  function initApp(app) {
+    function initArt(art) {
-    consola.clean();
         Artplayer.config.video.events.forEach(item => {
-      app.on('video:' + item, event => {
+            art.on('video:' + item, event => {
                 console.log('video: ' + event.type);
             });
         });
@@ -27,57 +28,124 @@
 
     function getURLParameters(url) {
         return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
-      (a, v) => (
+            (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
-        (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
+            {},
-      ),
-      {}
         );
     }
 
-  function loadCode(url) {
+    function getExt(url) {
-    const { code } = getURLParameters(window.location.href);
+        if (url.includes('?')) {
+            return getExt(url.split('?')[0]);
+        }
+
+        if (url.includes('#')) {
+            return getExt(url.split('#')[0]);
+        }
+
+        return url
+            .trim()
+            .toLowerCase()
+            .split('.')
+            .pop();
+    }
+
+    function loadScript(url) {
+        return new Promise(function(resolve, reject) {
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = url;
+            script.onload = function() {
+                resolve(url);
+            };
+            document.querySelector('head').appendChild(script);
+        });
+    }
+
+    function loadStyle(url) {
+        return new Promise(function(resolve) {
+            var style = document.createElement('style');
+            style.type = 'text/css';
+            style.src = url;
+            document.querySelector('head').appendChild(style);
+            resolve(url);
+        });
+    }
+
+    function loadLib(libs = defaultLib) {
+        var libPromise = [];
+        libs.split(',')
+            .filter(function(url) {
+                return !loaddLib.includes(url);
+            })
+            .forEach(function(url) {
+                var ext = getExt(url);
+                if (ext === 'js') {
+                    libPromise.push(loadScript(url));
+                } else if (ext === 'css') {
+                    libPromise.push(loadStyle(url));
+                }
+            });
+        $lib.value = decodeURIComponent(libs);
+        return Promise.all(libPromise);
+    }
+
+    function loadCode(code) {
+        return new Promise(function(resolve, reject) {
             if (code) {
                 mirror.setValue(decodeURIComponent(code).trim());
                 runCode();
+                resolve(code);
             } else {
-      fetch(url)
+                fetch('./js/example.js')
                     .then(response => {
                         return response.text();
                     })
                     .then(text => {
-          var code = text.trim();
+                        mirror.setValue(text);
-          mirror.setValue(code);
                         runCode();
-          fileCode = code;
+                        resolve(text);
-          return text;
                     })
                     .catch(err => {
                         console.error(err.message);
                     });
             }
+        });
+    }
+
+    function initApp() {
+        const { code, libs } = getURLParameters(window.location.href);
+        loadLib(libs)
+            .then(function(result) {
+                loaddLib = loaddLib.concat(result);
+                loadCode(code).then(() => {
+                    console.info('App initialization completed');
+                });
+            })
+            .catch(err => {
+                console.error(err.message);
+            });
     }
 
     function runCode() {
-    Artplayer.instances.forEach(ins => {
+        Artplayer.instances.forEach(art => {
-      ins.destroy(true);
+            art.destroy(true);
         });
         var code = mirror.getValue();
         eval(code);
-    initApp(Artplayer.instances[0]);
+        initArt(Artplayer.instances[0]);
     }
 
     $run.addEventListener('click', function(e) {
         runCode();
-    if (fileCode !== mirror.getValue()) {
+        const libs = encodeURIComponent($lib.value);
         const code = encodeURIComponent(mirror.getValue());
-      const url = window.location.origin + window.location.pathname + '?code=' + code;
+        const url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
         history.pushState(null, null, url);
-    }
     });
 
     win.addEventListener('error', err => {
         console.error(err.message);
     });
 
-  win.loadCode = loadCode;
+    initApp();
 })(window);