javascript:requirejs

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:requirejs [2019/09/06 11:16] – ともやんjavascript:requirejs [2020/08/30 13:05] (現在) – ともやん
行 1: 行 1:
 <html> <html>
   <style>   <style>
-    #aceeditor0 { +    #aceeditor0, #aceeditor1, #aceeditor2, 
-      display: none; +    #aceeditor3, #aceeditor4, #aceeditor5 {
-    } +
-    #aceeditor1 { +
-      display: none; +
-    } +
-    #aceeditor2 { +
-      display: none; +
-    } +
-    #aceeditor3 { +
-      display: none; +
-    } +
-    #aceeditor4 {+
       display: none;       display: none;
     }     }
行 21: 行 10:
     const $ = jQuery;     const $ = jQuery;
     const BASE_URL = '/_media/javascript/requirejs/';     const BASE_URL = '/_media/javascript/requirejs/';
-    let url = 'require-2.3.6.min.js?cache=-1'; +    let url; 
-    $.ajax({ +     
-      url: BASE_URL + url, +    (async () => { 
-      type: 'GET', +      url = 'require-2.3.6.min.js?cache=recache'; 
-      dataType: 'script', +      await $.ajax({ 
-    }).done((data) => { +        url: BASE_URL + url, 
-      //alert('RequireJS loaded!'); +        type: 'GET', 
-      console.log('RequireJS loaded!');+        dataType: 'script', 
 +      }).done((data) => { 
 +        //alert('RequireJS loaded!'); 
 +        console.log('RequireJS loaded!'); 
 +      }).fail((jqXHR, textStatus, errorThrown) => { 
 +        //alert(errorThrown); 
 +        console.log('RequireJS load error!'); 
 +        console.log(errorThrown); 
 +      }); 
 +      
       url = 'settings.js';       url = 'settings.js';
-      $.ajax({+      await $.ajax({
         url: BASE_URL + url,         url: BASE_URL + url,
         type: 'GET',         type: 'GET',
行 42: 行 40:
         console.log(errorThrown);         console.log(errorThrown);
       });       });
-    }).fail((jqXHR, textStatus, errorThrown) => { 
-      //alert(errorThrown); 
-      console.log('RequireJS load error!'); 
-      console.log(errorThrown); 
-    }); 
          
-    $(document).ajaxStop(() => { 
       try {       try {
         require(['jquery', 'ace']);         require(['jquery', 'ace']);
行 56: 行 48:
         console.log(ex);         console.log(ex);
       }       }
-      require(['jquery', 'ace'], +       
-        function($, ace) { +      console.log('ace loading...'); 
-          let _requireJSFailBack;+      require(['jquery', 'ace'], function($, ace) { 
 +        let _requireJSFailBack; 
 +         
 +        // RequireJS failback! 
 +        if (!!!$ || !!!ace) { 
 +          //alert('RequireJS failback!'); 
 +          console.log('RequireJS failback!'); 
 +          console.log('settings.js に誤りがあります！！');
                      
-          // RequireJS failback! +          _requireJSFailBack = true; 
-          if (!!!$ || !!!ace) { +          $ = (!!!$ ? jQuery : $); 
-            //alert('RequireJS failback!'); +           
-            console.log('RequireJS failback!'); +          if (!!!ace) { 
-            console.log('settings.js に誤りがあります！！'); +            $('head').append($('<script>').attr( 
-            _requireJSFailBack = true; +              {src: '/_media/javascript/ace/1.4.5/src-min-noconflict/ace.js?cache=recache'})); 
-            $ = (!!!$ ? jQuery : $); +            ace = self.ace;
-            if (!!!ace) { +
-              $('head').append($('<script>').attr({src: '/_media/javascript/ace/1.4.5/src-min-noconflict/ace.js?cache=-1'})); +
-              ace = self.ace; +
-            }+
           }           }
 +        }
 +        
 +        $.fn.regex = function(pattern, fn_a) {
 +          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;
                      
-          //alert('ace loading...'); +          editor.setTheme('ace/theme/cobalt'); 
-          //alert($); +          editor.session.setOptions({ 
-          //alert(ace); +            mode: 'ace/mode/' + mode, 
-          console.log('ace loading...'); +            tabSize: 2, 
-          //console.log($); +            useSoftTabs: true 
-          //console.log(ace);+          }); // setOptions 
 +          editor.setValue(editor.getValue().trim(), -1);
                      
-          self.editors = []; +          lines = editor.getSession().getDocument().getLength(); 
-          const modes = ['html', 'javascript', 'html', 'javascript', 'javascript']; +          editor.setOptions({maxLines: lines});
-          let lines = 0;+
                      
-          for (let i = 0; i < 5; i++) { +          editor.setReadOnly(true); 
-            editors.push(ace.edit('aceeditor' + String(i))); +        } 
-             +         
-            editors[i].setTheme('ace/theme/cobalt'); +        const $aceEditors = $('[id^=aceeditor]'); 
-            editors[i].session.setOptions({ +        //console.dir($aceEditors); 
-              mode: 'ace/mode/' + modes[i], +        for (let i = 0; i < $aceEditors.length; i++) { 
-              tabSize: 2, +          editors.push(ace.edit($aceEditors[i].id)); 
-              useSoftTabs: true +          const mode = !!modes[i] ? modes[i] : 'javascript'; 
-            }); // setOptions +          console.log(`mode: ${mode}`); 
-            editors[i].setValue(editors[i].getValue().trim(), -1); +           
-            lines = editors[i].getSession().getDocument().getLength(); +          setAceEditorStyle(editors[i], mode); 
-            editors[i].setOptions({maxLines: lines}); +           
-            editors[i].setReadOnly(true); +          $($aceEditors[i]).fadeIn('slow'); 
-            $('#aceeditor' + String(i)).fadeIn('slow');+        } 
 +         
 +        const $aceCodes = $('div').regex(/^wrap_acecode_.*/, ['class']); 
 +        console.log('$aceCodes'); 
 +        console.dir($aceCodes[0]); 
 +        for (let i = 0; i < $aceCodes.length; i++) { 
 +          codes.push(ace.edit($aceCodes[i])); 
 +           
 +          setAceEditorStyle(codes[i], 'html'); 
 +        } 
 +         
 +        $.ajax({ 
 +          url: BASE_URL + 'settings.js', 
 +          type: 'GET', 
 +        }).done((data) => { 
 +          editors[3].setValue(data, -1); 
 +          let lines= editors[3].getSession().getDocument().getLength(); 
 +          editors[3].setOptions({maxLines: lines}); 
 +           
 +          if (_requireJSFailBack) { 
 +            $('#settings_js_error').fadeIn('slow');
           }           }
-          //alert('settings.js loading...'); +        }).fail((jqXHR, textStatus, errorThrown) => {
-          $.ajax({ +
-            url: BASE_URL + 'settings.js', +
-            type: 'GET', +
-          }).done((data) => { +
-            editors[3].setValue(data, -1); +
-            lines = editors[3].getSession().getDocument().getLength(); +
-            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', +        $.ajax({ 
-          }).done((data) => { +          url: BASE_URL + 'require-2.3.6.js', 
-            editors[4].setValue(data, -1); +          type: 'GET', 
-            editors[4].setOptions({maxLines: 35}); +        }).done((data) => { 
-          }).fail((jqXHR, textStatus, errorThrown) => { +          editors[4].setValue(data, -1); 
-             +          editors[4].setOptions({maxLines: 35}); 
-          });+        }).fail((jqXHR, textStatus, errorThrown) => { 
 +         
 +        });
       }); // require end       }); // require end
-    }); // ajaxStop end+    })(); // async function end
   </script>   </script>
 </html> </html>
行 131: 行 151:
 本家: [[https://requirejs.org/|RequireJS]]\\ 本家: [[https://requirejs.org/|RequireJS]]\\
 ソースコード: [[https://github.com/requirejs/requirejs|GitHub - requirejs/requirejs: A file and module loader for JavaScript]]\\ ソースコード: [[https://github.com/requirejs/requirejs|GitHub - requirejs/requirejs: A file and module loader for JavaScript]]\\
 +\\ 
 +今となっては、[[https://github.com/systemjs/systemjs|SystemJS]] の様な ES6/AMD/CommonJS/UMD のモジュールをサポートしているモジュールローダもあるが、[[https://nodejs.org/ja/|Node.js]] や [[https://babeljs.io/|Babel]] のようなトランスパイラを必要とするので、そのようなビルドを必要としない RequireJS は手軽な「モジュール管理フレームワーク」である。\\ 
 +古いブラウザーにも対応しており **require.config** で細かいモジュール設定が可能である。\\
 ===== 使い方 ===== ===== 使い方 =====
 **index.html**\\ **index.html**\\
行 158: 行 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>
  
行 184: 行 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.1567736200.txt.gz
  • 最終更新: 2019/09/06 11:16
  • by ともやん