javascript:requirejs

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:requirejs [2019/09/08 17:09] – ともやんjavascript:requirejs [2020/08/30 13:05] (現在) – ともやん
行 2: 行 2:
   <style>   <style>
     #aceeditor0, #aceeditor1, #aceeditor2,     #aceeditor0, #aceeditor1, #aceeditor2,
-    #aceeditor3, #aceeditor4 {+    #aceeditor3, #aceeditor4, #aceeditor5 {
       display: none;       display: none;
     }     }
行 21: 行 21:
         //alert('RequireJS loaded!');         //alert('RequireJS loaded!');
         console.log('RequireJS loaded!');         console.log('RequireJS loaded!');
-       }).fail((jqXHR, textStatus, errorThrown) => {+      }).fail((jqXHR, textStatus, errorThrown) => {
         //alert(errorThrown);         //alert(errorThrown);
         console.log('RequireJS load error!');         console.log('RequireJS load error!');
行 41: 行 41:
       });       });
          
-      $(document).ajaxStop(() => { +      try { 
-        try { +        require(['jquery', 'ace']); 
-          require(['jquery', 'ace']);+      } 
 +      catch (ex) { 
 +        console.log('RequireJS error!'); 
 +        console.log(ex); 
 +      } 
 +       
 +      console.log('ace loading...'); 
 +      require(['jquery', 'ace'], function($, ace) { 
 +        let _requireJSFailBack; 
 +         
 +        // RequireJS failback! 
 +        if (!!!$ || !!!ace) { 
 +          //alert('RequireJS failback!'); 
 +          console.log('RequireJS failback!'); 
 +          console.log('settings.js に誤りがあります！！'); 
 +           
 +          _requireJSFailBack = true; 
 +          $ = (!!!$ ? jQuery : $); 
 +           
 +          if (!!!ace) { 
 +            $('head').append($('<script>').attr( 
 +              {src: '/_media/javascript/ace/1.4.5/src-min-noconflict/ace.js?cache=recache'})); 
 +            ace = self.ace; 
 +          }
         }         }
-        catch (ex) { +         
-          console.log('RequireJS error!'); +        $.fn.regex = function(pattern, fn_a) { 
-          console.log(ex);+          var fn = $.fn.attr || $.fn.text; 
 +          return this.filter(function() { 
 +            return pattern.test(fn.apply($(this), fn_a)); 
 +          }); 
 +        }; 
 +         
 +        self.editors = []; 
 +        self.codes = []; 
 +        const modes = [ 
 +          'html', 'javascript', 'html', 'javascript', 'javascript', 
 +        ]; 
 +         
 +        function setAceEditorStyle(editor, mode) { 
 +          let lines = 0; 
 +           
 +          editor.setTheme('ace/theme/cobalt'); 
 +          editor.session.setOptions({ 
 +            mode: 'ace/mode/' + mode, 
 +            tabSize: 2, 
 +            useSoftTabs: true 
 +          }); // setOptions 
 +          editor.setValue(editor.getValue().trim(), -1); 
 +           
 +          lines = editor.getSession().getDocument().getLength(); 
 +          editor.setOptions({maxLines: lines}); 
 +           
 +          editor.setReadOnly(true);
         }         }
                  
-        console.log('ace loading...'); +        const $aceEditors = $('[id^=aceeditor]'); 
-        require(['jquery', 'ace'], +        //console.dir($aceEditors); 
-          function($, ace) { +        for (let i = 0; i < $aceEditors.length; i++) { 
-            let _requireJSFailBack; +          editors.push(ace.edit($aceEditors[i].id)); 
-             +          const mode = !!modes[i] ? modes[i] : 'javascript'; 
-            // RequireJS failback! +          console.log(`mode: ${mode}`); 
-            if (!!!$ || !!!ace) { +           
-              //alert('RequireJS failback!'); +          setAceEditorStyle(editors[i], mode); 
-              console.log('RequireJS failback!'); +           
-              console.log('settings.js に誤りがあります！！'); +          $($aceEditors[i]).fadeIn('slow'); 
-               +        } 
-              _requireJSFailBack = true; +         
-              $ = (!!!$ ? jQuery : $); +        const $aceCodes = $('div').regex(/^wrap_acecode_.*/, ['class']); 
-               +        console.log('$aceCodes'); 
-              if (!!!ace) { +        console.dir($aceCodes[0]); 
-                $('head').append($('<script>').attr( +        for (let i = 0; i < $aceCodes.length; i++) { 
-                  {src: '/_media/javascript/ace/1.4.5/src-min-noconflict/ace.js?cache=recache'})); +          codes.push(ace.edit($aceCodes[i])); 
-                ace = self.ace; +           
-              } +          setAceEditorStyle(codes[i], 'html'); 
-            } +        } 
-             +         
-            self.editors = []; +        $.ajax({ 
-            const modes = ['html', 'javascript', 'html', 'javascript', 'javascript']; +          url: BASE_URL + 'settings.js', 
-            let lines = 0; +          type: 'GET', 
-             +        }).done((data) => { 
-            for (let i = 0; i < 5; i++) { +          editors[3].setValue(data, -1); 
-              editors.push(ace.edit('aceeditor' + String(i))); +          let lines= editors[3].getSession().getDocument().getLength(); 
-               +          editors[3].setOptions({maxLines: lines}); 
-              editors[i].setTheme('ace/theme/cobalt'); +           
-              editors[i].session.setOptions({ +          if (_requireJSFailBack) { 
-                mode: 'ace/mode/' + modes[i], +            $('#settings_js_error').fadeIn('slow'); 
-                tabSize: 2, +          } 
-                useSoftTabs: true +        }).fail((jqXHR, textStatus, errorThrown) => { 
-              }); // setOptions +           
-              editors[i].setValue(editors[i].getValue().trim(), -1); +        }); 
-              lines = editors[i].getSession().getDocument().getLength(); +         
-              editors[i].setOptions({maxLines: lines}); +        $.ajax({ 
-              editors[i].setReadOnly(true); +          url: BASE_URL + 'require-2.3.6.js', 
-              $('#aceeditor' + String(i)).fadeIn('slow'); +          type: 'GET', 
-            } +        }).done((data) => { 
-            //alert('settings.js loading...'); +          editors[4].setValue(data, -1); 
-            $.ajax({ +          editors[4].setOptions({maxLines: 35}); 
-              url: BASE_URL + 'settings.js', +        }).fail((jqXHR, textStatus, errorThrown) => { 
-              type: 'GET', +         
-            }).done((data) => { +        }); 
-              editors[3].setValue(data, -1); +      }); // require end 
-              lines = editors[3].getSession().getDocument().getLength(); +    })(); // async function end
-              editors[3].setOptions({maxLines: lines}); +
-               +
-              if (_requireJSFailBack) { +
-                $('#settings_js_error').fadeIn('slow'); +
-              } +
-            }).fail((jqXHR, textStatus, errorThrown) => { +
-               +
-            }); +
-             +
-            $.ajax({ +
-              url: BASE_URL + 'require-2.3.6.js', +
-              type: 'GET', +
-            }).done((data) => { +
-              editors[4].setValue(data, -1); +
-              editors[4].setOptions({maxLines: 35}); +
-            }).fail((jqXHR, textStatus, errorThrown) => { +
-             +
-            }); +
-        }); // require end +
-      }); // ajaxStop end +
-    })();+
   </script>   </script>
 </html> </html>
行 152: 行 180:
   });   });
 });%% });%%
 +</WRAP>
 +
 +==== DokuWiki に埋め込む方法 ====
 +<WRAP prewrap 100% acecode_html>
 +<code>
 +<html>
 +  <script src="/_media/javascript/requirejs/require-2.3.6.min.js?cache=recache"></script>
 +  <script src="/_media/javascript/requirejs/settings.js?cache=nocache"></script>
 +</html>
 +</code>
 </WRAP> </WRAP>
  
行 178: 行 216:
 <WRAP prewrap 100% #aceeditor4> <WRAP prewrap 100% #aceeditor4>
 </WRAP> </WRAP>
 +
 +===== ES6 class を RequireJS で定義する方法 =====
 +<WRAP prewrap 100% #aceeditor5>
 +%%// 定義方法
 +define('DokuWiki', ['axios'], (axios) => {
 +  return class DokuWiki {
 +    static get CODE_START() {
 +      return '<!--[code-start]-->';
 +    }
 +    
 +    constructor() {
 +      this.MEDIA_AJAX_URL = '/lib/exe/ajax.php';
 +    }
 +    
 +    async getMediaList(ns, grep_) {
 +      let grep = !!grep_ ? grep_ : '';
 +      //...
 +    }
 +  }; // class end
 +}); // define end
 +
 +// 使い方
 +require(['DokuWiki'], (DokuWiki) => {
 +  const dokuWiki = new DokuWiki();
 +});%%
 +</WRAP>
 +※**class** を **return** するように記述する。\\
  
 ===== 参考文献 ===== ===== 参考文献 =====
  • javascript/requirejs.1567930156.txt.gz
  • 最終更新: 2019/09/08 17:09
  • by ともやん