差分

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

--- javascript:requirejs [2019/08/26 22:47] – ともやん
+++ javascript:requirejs [2020/08/30 13:05] (現在) – ともやん
@@ 行 1: / 行 1: @@
 <html>
+  <style>
+    #aceeditor0, #aceeditor1, #aceeditor2,
+    #aceeditor3, #aceeditor4, #aceeditor5 {
+      display: none;
+    }
+  </style>
   <script>
     'use strict';
     const $ = jQuery;
     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',
+        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';
-      $.ajax({
+      await $.ajax({
         url: BASE_URL + url,
         type: 'GET',
@@ 行 18: / 行 34: @@
       }).done((data) => {
         //alert('settings.js loaded!');
-      }).error((jqXHR, textStatus, errorThrow) => {
+        console.log('settings.js loaded!');
-        //alert(errorThrow);
+      }).fail((jqXHR, textStatus, errorThrown) => {
+        //alert(errorThrown);
+        console.log('settings.js  load error!');
+        console.log(errorThrown);
       });
-    }).error((jqXHR, textStatus, errorThrow) => {
-      //alert(errorThrow);
-    });
-    $(() => {
+      try {
-      require(['jquery', 'ace'],
+        require(['jquery', 'ace']);
-        function($, ace) {
+      }
-          // failback
+      catch (ex) {
-          if (!!!$ || !!!ace) {
+        console.log('RequireJS error!');
-            //alert('require failback!');
+        console.log(ex);
-            self._requireJSFailBack = true;
+      }
-            $ = (!!!$ ? jQuery : $);
-            if (!!!ace) {
+      console.log('ace loading...');
-              $('head').append($('<script>').attr({src: '/_media/javascript/ace/src-min-noconflict/ace.js'}));
+      require(['jquery', 'ace'], function($, ace) {
-              ace = self.ace;
+        let _requireJSFailBack;
-            }
-          }
+        // RequireJS failback!
+        if (!!!$ || !!!ace) {
+          //alert('RequireJS failback!');
+          console.log('RequireJS failback!');
+          console.log('settings.js に誤りがあります！！');
-          //alert('ace loading...');
+          _requireJSFailBack = true;
-          //alert($);
+          $ = (!!!$ ? jQuery : $);
-          //alert(ace);
-          self.editors = [];
-          const modes = ['html', 'javascript', 'html', 'javascript', 'javascript'];
-          let lines = 0;
-          for (let i = 0; i < 5; i++) {
+          if (!!!ace) {
-            editors.push(ace.edit('aceEditor' + String(i)));
+            $('head').append($('<script>').attr(
+              {src: '/_media/javascript/ace/1.4.5/src-min-noconflict/ace.js?cache=recache'}));
-            editors[i].setTheme('ace/theme/chrome');
+            ace = self.ace;
-            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);
           }
-          //alert('settings.js loading...');
+        }
-          $.ajax({
-            url: BASE_URL + 'settings.js',
+        $.fn.regex = function(pattern, fn_a) {
-            type: 'GET',
+          var fn = $.fn.attr || $.fn.text;
-          }).done((data) => {
+          return this.filter(function() {
-            editors[3].setValue(data, -1);
+            return pattern.test(fn.apply($(this), fn_a));
-            lines = editors[3].getSession().getDocument().getLength();
-            editors[3].setOptions({maxLines: lines});
-            if (_requireJSFailBack) {
-              $('#settings_js_error').fadeIn('slow');
-            }
-          }).error((jqXHR, textStatus, errorThrow) => {
           });
+        };
+        self.editors = [];
+        self.codes = [];
+        const modes = [
+          'html', 'javascript', 'html', 'javascript', 'javascript',
+        ];
+        function setAceEditorStyle(editor, mode) {
+          let lines = 0;
-          $.ajax({
+          editor.setTheme('ace/theme/cobalt');
-            url: BASE_URL + 'require-2.3.6.js',
+          editor.session.setOptions({
-            type: 'GET',
+            mode: 'ace/mode/' + mode,
-          }).done((data) => {
+            tabSize: 2,
-            editors[4].setValue(data, -1);
+            useSoftTabs: true
-            editors[4].setOptions({maxLines: 35});
+          }); // setOptions
-          }).error((jqXHR, textStatus, errorThrow) => {
+          editor.setValue(editor.getValue().trim(), -1);
-          });
+          lines = editor.getSession().getDocument().getLength();
-      }); // require
+          editor.setOptions({maxLines: lines});
-    }); // jQuery
+          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');
+          }
+        }).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
+    })(); // async function end
   </script>
 </html>
@@ 行 90: / 行 151: @@
 本家: [[https://requirejs.org/|RequireJS]]\\
 ソースコード: [[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>
-<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>
+</code>
+</WRAP>
 ===== settings.js を書く方法 =====
+**index.html**\\
+<WRAP prewrap 100% #aceeditor2>
+%%<!DOCTYPE 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 のコード =====
-<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** するように記述する。\\
 ===== 参考文献 =====