文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 <html> <style> #aceeditor0, #aceeditor1, #aceeditor2, #aceeditor3, #aceeditor4, #aceeditor5 { display: none; } </style> <script> 'use strict'; const $ = jQuery; const BASE_URL = '/_media/javascript/requirejs/'; let url; (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 に誤りがあります!!'); _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; } } $.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; 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}); 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> ====== RequireJS - モジュール管理フレームワーク ====== 本家: [[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> <head> <title>My Page</title> <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>My Sample Page</h1> </body> </html>%% </WRAP> **scripts/main.js**\\ <WRAP prewrap 100% #aceeditor1> %%require(['jquery', 'ace'], ($, ace) => { console.log($('#contents').html()); self.editor = ace.edit('aceEditor'); editor.setTheme('ace/theme/chrome'); editor.session.setOptions({ mode: 'ace/mode/javascript', tabSize: 2, useSoftTabs: true }); });%% </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> ===== settings.js を書く方法 ===== **index.html**\\ <WRAP prewrap 100% #aceeditor2> %%<!DOCTYPE html> <html> <head> <title>My Page</title> <script src="scripts/require.js"></script> <script src="scripts/settings.js"></script> </head> <body> <h1>My Sample Page</h1> </body> </html>%% </WRAP> **scripts/settings.js**\\ <html><b><span id="settings_js_error" style="color: red; display: none;">settings.js にエラーがあります!!</span></b></html> <WRAP prewrap 100% #aceeditor3> </WRAP> ===== RequireJS のコード ===== **require.js**\\ <WRAP prewrap 100% #aceeditor4> </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** するように記述する。\\ ===== 参考文献 ===== [[https://jsprimer.net/basic/module/|ECMAScriptモジュール · JavaScript Primer]]\\ [[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]]\\ javascript/requirejs.txt 最終更新: 2020/08/30 13:05by ともやん