javascript:requirejs

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:requirejs [2019/08/26 23:12] – ともやんjavascript:requirejs [2020/08/30 13:05] (現在) – ともやん
行 1: 行 1:
 <html> <html>
 +  <style>
 +    #aceeditor0, #aceeditor1, #aceeditor2,
 +    #aceeditor3, #aceeditor4, #aceeditor5 {
 +      display: none;
 +    }
 +  </style>
   <script>   <script>
     'use strict';     'use strict';
     const $ = jQuery;     const $ = jQuery;
     const BASE_URL = '/_media/javascript/requirejs/';     const BASE_URL = '/_media/javascript/requirejs/';
-    let url = 'require-2.3.6.min.js'; +    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',
行 20: 行 35:
         //alert('settings.js loaded!');         //alert('settings.js loaded!');
         console.log('settings.js loaded!');         console.log('settings.js loaded!');
-      }).error((jqXHR, textStatus, errorThrow) => { +      }).fail((jqXHR, textStatus, errorThrown) => { 
-        //alert(errorThrow);+        //alert(errorThrown);
         console.log('settings.js  load error!');         console.log('settings.js  load error!');
-        console.log(errorThrow);+        console.log(errorThrown);
       });       });
-    }).error((jqXHR, textStatus, errorThrow) => { 
-      //alert(errorThrow); 
-      console.log('RequireJS load error!'); 
-      console.log(errorThrow); 
-    }); 
          
-    $(() => { 
       try {       try {
         require(['jquery', 'ace']);         require(['jquery', 'ace']);
行 39: 行 48:
         console.log(ex);         console.log(ex);
       }       }
-      require(['jquery', 'ace'], +       
-        function($, ace) { +      console.log('ace loading...'); 
-          // requireJS failback +      require(['jquery', 'ace'], function($, ace) { 
-          if (!!!$ || !!!ace) { +        let _requireJSFailBack; 
-            //alert('requireJS failback!'); +         
-            console.log('requireJS failback!'); +        // RequireJS failback! 
-            console.log('settings.js に誤りがあります！！'); +        if (!!!$ || !!!ace) { 
-            self._requireJSFailBack = true; +          //alert('RequireJS failback!'); 
-            $ = (!!!$ ? jQuery : $); +          console.log('RequireJS failback!'); 
-            if (!!!ace) { +          console.log('settings.js に誤りがあります！！');
-              $('head').append($('<script>').attr({src: '/_media/javascript/ace/src-min-noconflict/ace.js'})); +
-              ace = self.ace; +
-            } +
-          }+
                      
-          //alert('ace loading...'); +          _requireJSFailBack = true; 
-          //alert($); +          $ = (!!!$ ? jQuery : $);
-          //alert(ace); +
-          console.log('ace loading...'); +
-          console.log($); +
-          console.log(ace);+
                      
-          self.editors = []; +          if (!!!ace) { 
-          const modes = ['html', 'javascript', 'html', 'javascript', 'javascript'];+            $('head').append($('<script>').attr( 
 +              {src: '/_media/javascript/ace/1.4.5/src-min-noconflict/ace.js?cache=recache'})); 
 +            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;           let lines = 0;
                      
-          for (let i = 0; i < 5; i++) { +          editor.setTheme('ace/theme/cobalt'); 
-            editors.push(ace.edit('aceEditor' + String(i))); +          editor.session.setOptions({ 
-             +            mode: 'ace/mode/' + mode, 
-            editors[i].setTheme('ace/theme/chrome'); +            tabSize: 2, 
-            editors[i].session.setOptions({ +            useSoftTabs: true 
-              mode: 'ace/mode/' + modes[i], +          }); // setOptions 
-              tabSize: 2, +          editor.setValue(editor.getValue().trim(), -1); 
-              useSoftTabs: true +           
-            }); // setOptions +          lines = editor.getSession().getDocument().getLength(); 
-            lines = editors[i].getSession().getDocument().getLength(); +          editor.setOptions({maxLines: lines}); 
-            editors[i].setOptions({maxLines: lines}); +           
-            editors[i].setReadOnly(true);+          editor.setReadOnly(true); 
 +        } 
 +         
 +        const $aceEditors = $('[id^=aceeditor]'); 
 +        //console.dir($aceEditors); 
 +        for (let i = 0; i < $aceEditors.length; i++) { 
 +          editors.push(ace.edit($aceEditors[i].id)); 
 +          const mode = !!modes[i] ? modes[i] : 'javascript'; 
 +          console.log(`mode: ${mode}`); 
 +           
 +          setAceEditorStyle(editors[i], mode); 
 +           
 +          $($aceEditors[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'); +
-            } +
-          }).error((jqXHR, textStatus, errorThrow) => { +
-             +
-          });+
                      
-          $.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) => { 
-          }).error((jqXHR, textStatus, errorThrow) => { +          editors[4].setValue(data, -1); 
-             +          editors[4].setOptions({maxLines: 35}); 
-          }); +        }).fail((jqXHR, textStatus, errorThrown) => { 
-      }); // require +         
-    }); // jQuery+        }); 
 +      }); // require end 
 +    })(); // async function end
   </script>   </script>
 </html> </html>
行 109: 行 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**\\
 +<WRAP prewrap 100% #aceeditor0>
 +%%<!DOCTYPE html>
 <html> <html>
-<p><b>index.html</b></p> +  <head> 
-<pre id="aceEditor0"> +    <title>My Page</title> 
-&lt;!DOCTYPE html&gt; +    <script data-main="scripts/main" src="scripts/require.js"></script> 
-&lt;html&gt; +  </head> 
-    &lt;head&gt; +  <body> 
-        &lt;title&gt;My Page&lt;/title&gt; +    <h1>My Sample Page</h1> 
-        &lt;script data-main="scripts/main" src="scripts/require.js"&gt;&lt;/script&gt; +  </body> 
-    &lt;/head&gt; +</html>%% 
-    &lt;body&gt; +</WRAP> 
-        &lt;h1&gt;My Sample Page&lt;/h1&gt; +**scripts/main.js**\\ 
-    &lt;/body&gt; +<WRAP prewrap 100% #aceeditor1> 
-&lt;/html&gt; +%%require(['jquery', 'ace'], ($, ace) => { 
-</pre> +  console.log($('#contents').html()); 
-<br/> +  self.editor = ace.edit('aceEditor'); 
-<p><b>scripts/main.js</b></p> +  editor.setTheme('ace/theme/chrome'); 
-<pre id="aceEditor1"> +  editor.session.setOptions({ 
-require(['jquery', 'ace'], +    mode: 'ace/mode/javascript', 
-  function($, ace) { +    tabSize: 2, 
-    console.log($('#contents').html()); +    useSoftTabs: true 
-    self.editor = ace.edit('aceEditor'); +  }); 
-    editor.setTheme('ace/theme/chrome'); +});%% 
-    editor.session.setOptions({ +</WRAP> 
-      mode: 'ace/mode/javascript', + 
-      tabSize: 2, +==== DokuWiki に埋め込む方法 ==== 
-      useSoftTabs: true +<WRAP prewrap 100% acecode_html> 
-    }); +<code> 
-}); +<html> 
-</pre>+  <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> </html>
 +</code>
 +</WRAP>
 +
 ===== settings.js を書く方法 ===== ===== settings.js を書く方法 =====
 +**index.html**\\
 +<WRAP prewrap 100% #aceeditor2>
 +%%<!DOCTYPE html>
 <html> <html>
-<p><b>index.html</b></p> +  <head> 
-<pre id="aceEditor2"> +    <title>My Page</title> 
-&lt;!DOCTYPE html&gt; +    <script src="scripts/require.js"></script> 
-&lt;html&gt; +    <script src="scripts/settings.js"></script> 
-    &lt;head&gt; +  </head> 
-        &lt;title&gt;My Page&lt;/title&gt; +  <body> 
-        &lt;script src="scripts/require.js"&gt;&lt;/script&gt; +    <h1>My Sample Page</h1> 
-        &lt;script src="scripts/settings.js"&gt;&lt;/script&gt; +  </body> 
-    &lt;/head&gt; +</html>%% 
-    &lt;body&gt; +</WRAP> 
-        &lt;h1&gt;My Sample Page&lt;/h1&gt; +**scripts/settings.js**\\ 
-    &lt;/body&gt; +<html><b><span id="settings_js_error" style="color: red; display: none;">settings.js にエラーがあります！！</span></b></html> 
-&lt;/html&gt; +<WRAP prewrap 100% #aceeditor3> 
-</pre> +</WRAP> 
-<br/> +
-<p><b>scripts/settings.js</b></p> +
-<p><b><span id="settings_js_error" style="color: red; display: none;">settings.js にエラーがあります！！</span></b></p> +
-<pre id="aceEditor3"> +
-</pre> +
-</html>+
 ===== RequireJS のコード ===== ===== RequireJS のコード =====
-<html> +**require.js**\\ 
-<p><b>require.js</b></p> +<WRAP prewrap 100% #aceeditor4> 
-<pre id="aceEditor4"> +</WRAP> 
-</pre> + 
-</html>+===== 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.1566828747.txt.gz
  • 最終更新: 2019/08/26 23:12
  • by ともやん