差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:requirejs [2019/08/21 23:54] – ともやん | javascript:requirejs [2020/08/30 13:05] (現在) – ともやん | ||
---|---|---|---|
行 1: | 行 1: | ||
< | < | ||
- | <script src='/ | + | <style> |
- | | + | # |
+ | # | ||
+ | display: none; | ||
+ | } | ||
+ | </style> | ||
< | < | ||
- | jQuery(function($) { | + | |
- | require(['jquery', 'ace'], | + | const $ = jQuery; |
- | | + | const BASE_URL = '/ |
- | self.editors | + | let url; |
- | const modes = ['html', 'javascript', 'html', 'javascript']; | + | |
- | | + | |
+ | | ||
+ | await $.ajax({ | ||
+ | url: BASE_URL + url, | ||
+ | type: 'GET', | ||
+ | dataType: | ||
+ | }).done((data) => { | ||
+ | | ||
+ | console.log(' | ||
+ | }).fail((jqXHR, | ||
+ | // | ||
+ | console.log(' | ||
+ | console.log(errorThrown); | ||
+ | }); | ||
+ | |||
+ | url = ' | ||
+ | await $.ajax({ | ||
+ | url: BASE_URL + url, | ||
+ | type: ' | ||
+ | dataType: ' | ||
+ | }).done((data) => { | ||
+ | // | ||
+ | console.log(' | ||
+ | }).fail((jqXHR, | ||
+ | // | ||
+ | console.log(' | ||
+ | console.log(errorThrown); | ||
+ | }); | ||
+ | |||
+ | try { | ||
+ | require([' | ||
+ | } | ||
+ | catch (ex) { | ||
+ | console.log(' | ||
+ | console.log(ex); | ||
+ | } | ||
+ | |||
+ | console.log(' | ||
+ | require(['jquery', 'ace'], function($, ace) { | ||
+ | let _requireJSFailBack; | ||
+ | |||
+ | // RequireJS failback! | ||
+ | if (!!!$ || !!!ace) { | ||
+ | //alert('RequireJS failback!'); | ||
+ | console.log('RequireJS failback!'); | ||
+ | | ||
+ | |||
+ | _requireJSFailBack | ||
+ | $ = (!!!$ ? jQuery : $); | ||
| | ||
- | | + | |
- | | + | |
- | + | | |
- | editors[i].setTheme('ace/ | + | |
- | editors[i].session.setOptions({ | + | |
- | | + | |
- | tabSize: 2, | + | |
- | useSoftTabs: | + | |
- | }); // setOptions | + | |
- | lines = editors[i].getSession().getDocument().getLength(); | + | |
- | editors[i].setOptions({maxLines: | + | |
- | | + | |
} | } | ||
- | let settings_js_text = ''; | + | } |
- | $.ajax({ | + | |
- | url: '/ | + | |
- | type: ' | + | var fn = $.fn.attr || $.fn.text; |
- | async: false, | + | |
- | success: | + | |
- | settings_js_text = data; | + | |
- | | + | |
}); | }); | ||
- | | + | }; |
- | lines = editors[3].getSession().getDocument().getLength(); | + | |
+ | self.editors = []; | ||
+ | self.codes = []; | ||
+ | const modes = [ | ||
+ | ' | ||
+ | ]; | ||
+ | |||
+ | function setAceEditorStyle(editor, | ||
+ | let lines = 0; | ||
+ | |||
+ | editor.setTheme(' | ||
+ | editor.session.setOptions({ | ||
+ | mode: ' | ||
+ | tabSize: 2, | ||
+ | useSoftTabs: | ||
+ | }); // setOptions | ||
+ | editor.setValue(editor.getValue().trim(), | ||
+ | |||
+ | lines = editor.getSession().getDocument().getLength(); | ||
+ | editor.setOptions({maxLines: | ||
+ | |||
+ | editor.setReadOnly(true); | ||
+ | } | ||
+ | |||
+ | const $aceEditors = $(' | ||
+ | // | ||
+ | for (let i = 0; i < $aceEditors.length; | ||
+ | editors.push(ace.edit($aceEditors[i].id)); | ||
+ | const mode = !!modes[i] ? modes[i] : ' | ||
+ | console.log(`mode: | ||
+ | |||
+ | setAceEditorStyle(editors[i], | ||
+ | |||
+ | $($aceEditors[i]).fadeIn(' | ||
+ | } | ||
+ | |||
+ | const $aceCodes = $(' | ||
+ | console.log(' | ||
+ | console.dir($aceCodes[0]); | ||
+ | for (let i = 0; i < $aceCodes.length; | ||
+ | codes.push(ace.edit($aceCodes[i])); | ||
+ | |||
+ | setAceEditorStyle(codes[i], | ||
+ | } | ||
+ | |||
+ | $.ajax({ | ||
+ | url: BASE_URL + ' | ||
+ | type: ' | ||
+ | }).done((data) => { | ||
+ | | ||
+ | | ||
editors[3].setOptions({maxLines: | editors[3].setOptions({maxLines: | ||
- | | + | |
- | }); // jQuery | + | if (_requireJSFailBack) { |
+ | $('# | ||
+ | } | ||
+ | }).fail((jqXHR, | ||
+ | |||
+ | }); | ||
+ | |||
+ | $.ajax({ | ||
+ | url: BASE_URL + ' | ||
+ | type: ' | ||
+ | }).done((data) => { | ||
+ | editors[4].setValue(data, | ||
+ | editors[4].setOptions({maxLines: | ||
+ | }).fail((jqXHR, | ||
+ | |||
+ | }); | ||
+ | | ||
+ | })(); // async function end | ||
</ | </ | ||
</ | </ | ||
行 42: | 行 151: | ||
本家: [[https:// | 本家: [[https:// | ||
ソースコード: | ソースコード: | ||
+ | \\ | ||
+ | 今となっては、[[https:// | ||
+ | 古いブラウザーにも対応しており **require.config** で細かいモジュール設定が可能である。\\ | ||
===== 使い方 ===== | ===== 使い方 ===== | ||
+ | **index.html**\\ | ||
+ | <WRAP prewrap 100% # | ||
+ | %%< | ||
< | < | ||
- | <p>< | + | |
- | <pre id=" | + | |
- | & | + | <script data-main=" |
- | & | + | </head> |
- | | + | <body> |
- | <title>My Page</title> | + | <h1>My Sample Page</h1> |
- | & | + | </body> |
- | & | + | </html>%% |
- | & | + | </WRAP> |
- | & | + | **scripts/ |
- | & | + | <WRAP prewrap 100% #aceeditor1> |
- | </html> | + | %%require([' |
- | </pre> | + | console.log($('# |
- | <br/> | + | self.editor = ace.edit(' |
- | < | + | editor.setTheme(' |
- | <pre id=" | + | editor.session.setOptions({ |
- | require([' | + | mode: ' |
- | function($, ace) { | + | tabSize: 2, |
- | console.log($('# | + | useSoftTabs: |
- | self.editor = ace.edit(' | + | }); |
- | editor.setTheme(' | + | });%% |
- | editor.session.setOptions({ | + | </WRAP> |
- | mode: ' | + | |
- | tabSize: 2, | + | ==== DokuWiki に埋め込む方法 ==== |
- | useSoftTabs: | + | <WRAP prewrap 100% acecode_html> |
- | }); | + | < |
- | }); | + | < |
- | </pre> | + | <script src="/ |
+ | <script src="/ | ||
</ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
===== settings.js を書く方法 ===== | ===== settings.js を書く方法 ===== | ||
+ | **index.html**\\ | ||
+ | <WRAP prewrap 100% # | ||
+ | %%< | ||
< | < | ||
- | <p>< | + | |
- | <pre id=" | + | |
- | & | + | <script src=" |
- | & | + | <script src=" |
- | | + | </head> |
- | <title>My Page</title> | + | <body> |
- | & | + | <h1>My Sample Page</h1> |
- | & | + | </body> |
- | & | + | </html>%% |
- | & | + | </WRAP> |
- | & | + | **scripts/settings.js**\\ |
- | & | + | <html>< |
- | </html> | + | <WRAP prewrap 100% # |
- | </pre> | + | </ |
- | <br/> | + | |
- | <p>< | + | ===== RequireJS のコード ===== |
- | <pre id=" | + | **require.js**\\ |
- | </pre> | + | <WRAP prewrap 100% #aceeditor4> |
- | </html> | + | </WRAP> |
+ | |||
+ | ===== ES6 class を RequireJS で定義する方法 ===== | ||
+ | <WRAP prewrap 100% # | ||
+ | %%// 定義方法 | ||
+ | define(' | ||
+ | return class DokuWiki { | ||
+ | static get CODE_START() { | ||
+ | return '< | ||
+ | } | ||
+ | |||
+ | constructor() { | ||
+ | this.MEDIA_AJAX_URL = '/ | ||
+ | } | ||
+ | |||
+ | async getMediaList(ns, | ||
+ | let grep = !!grep_ ? grep_ : ''; | ||
+ | //... | ||
+ | } | ||
+ | }; // class end | ||
+ | }); // define end | ||
+ | |||
+ | // 使い方 | ||
+ | require([' | ||
+ | const dokuWiki = new DokuWiki(); | ||
+ | });%% | ||
+ | </ | ||
+ | ※**class** を **return** するように記述する。\\ | ||
===== 参考文献 ===== | ===== 参考文献 ===== | ||
行 100: | 行 248: | ||
[[https:// | [[https:// | ||
[[https:// | [[https:// | ||
- |