javascript:requirejs

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:requirejs [2019/08/22 09:59] – ともやんjavascript:requirejs [2020/08/30 13:05] (現在) – ともやん
行 1: 行 1:
 <html> <html>
-  <script src='/_media/javascript/requirejs/require-2.3.6.min.js' defer></script> +  <style> 
-  <script src='/_media/javascript/requirejs/settings.js' defer></script>+    #aceeditor0, #aceeditor1, #aceeditor2, 
 +    #aceeditor3, #aceeditor4, #aceeditor5 { 
 +      display: none; 
 +    } 
 +  </style>
   <script>   <script>
-    jQuery(function($) { +    'use strict'; 
-      require(['jquery', 'ace'], +    const $ = jQuery; 
-        function($, ace) { +    const BASE_URL = '/_media/javascript/requirejs/'; 
-          self.editors = []; +    let url; 
-          const modes = ['html', 'javascript', 'html', 'javascript', 'javascript']; +     
-          let lines = 0;+    (async () => { 
 +      url = 'require-2.3.6.min.js?cache=recache'; 
 +      await $.ajax({ 
 +        url: BASE_URL + url, 
 +        type: 'GET', 
 +        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'; 
 +      await $.ajax({ 
 +        url: BASE_URL + url, 
 +        type: 'GET', 
 +        dataType: 'script', 
 +      }).done((data) => { 
 +        //alert('settings.js loaded!'); 
 +        console.log('settings.js loaded!'); 
 +      }).fail((jqXHR, textStatus, errorThrown) => { 
 +        //alert(errorThrown); 
 +        console.log('settings.js  load error!'); 
 +        console.log(errorThrown); 
 +      }); 
 +     
 +      try { 
 +        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 に誤りがあります！！');
                      
-          for (let i = 0; i < 5; i++) { +          _requireJSFailBack = true; 
-            editors.push(ace.edit('aceEditor' + String(i))); +          $ = (!!!$ ? jQuery : $);
-             +
-            editors[i].setTheme('ace/theme/chrome'); +
-            editors[i].session.setOptions({ +
-              mode: 'ace/mode/' + modes[i], +
-              tabSize: 2, +
-              useSoftTabs: true +
-            }); // setOptions +
-            lines = editors[i].getSession().getDocument().getLength(); +
-            editors[i].setOptions({maxLines: lines}); +
-            editors[i].setReadOnly(true); +
-          }+
                      
-          let settings_js_text = ''; +          if (!!!ace) { 
-          $.ajax({ +            $('head').append($('<script>').attr( 
-            url: '/_media/javascript/requirejs/settings.js', +              {src: '/_media/javascript/ace/1.4.5/src-min-noconflict/ace.js?cache=recache'})); 
-            type: 'GET', +            ace = self.ace; 
-            async: false, +          } 
-            success: function(data) { +        } 
-              settings_js_text = data; +         
-            }+        $.fn.regex = function(pattern, fn_a) { 
 +          var fn = $.fn.attr || $.fn.text; 
 +          return this.filter(function() { 
 +            return pattern.test(fn.apply($(this), fn_a));
           });           });
-          editors[3].setValue(settings_js_text, -1); +        }; 
-          lines = editors[3].getSession().getDocument().getLength();+         
 +        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); 
 +        } 
 +         
 +        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});           editors[3].setOptions({maxLines: lines});
                      
-          let require_js_text = ''; +          if (_requireJSFailBack) { 
-          $.ajax({ +            $('#settings_js_error').fadeIn('slow'); 
-            url: '/_media/javascript/requirejs/require-2.3.6.js', +          } 
-            type: 'GET', +        }).fail((jqXHR, textStatus, errorThrown) => { 
-            async: false, +           
-            success: function(data) { +        }); 
-              require_js_text = data; +         
-            } +        $.ajax({ 
-          }); +          url: BASE_URL + 'require-2.3.6.js', 
-          editors[4].setValue(require_js_text, -1);+          type: 'GET', 
 +        }).done((data) => { 
 +          editors[4].setValue(data, -1);
           editors[4].setOptions({maxLines: 35});           editors[4].setOptions({maxLines: 35});
-      }); // require +        }).fail((jqXHR, textStatus, errorThrown) => { 
-    }); // jQuery+         
 +        }); 
 +      }); // require end 
 +    })(); // async function end
   </script>   </script>
 </html> </html>
行 55: 行 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> +
-<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** するように記述する。\\
  
 ===== 参考文献 ===== ===== 参考文献 =====
行 119: 行 248:
 [[https://qiita.com/kami_zh/items/f093c34906d14ba65ad3|JavaScriptのモジュールシステムに関するまとめ - Qiita]]\\ [[https://qiita.com/kami_zh/items/f093c34906d14ba65ad3|JavaScriptのモジュールシステムに関するまとめ - Qiita]]\\
 [[https://stackoverflow.com/questions/49631520/how-to-integrate-es6-module-syntax-in-requirejs-project|javascript - How to integrate ES6 Module syntax in RequireJS project - Stack Overflow]]\\ [[https://stackoverflow.com/questions/49631520/how-to-integrate-es6-module-syntax-in-requirejs-project|javascript - How to integrate ES6 Module syntax in RequireJS project - Stack Overflow]]\\
- 
  • javascript/requirejs.1566435568.txt.gz
  • 最終更新: 2019/08/22 09:59
  • by ともやん