差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:requirejs [2019/09/06 11:16] – ともやん | javascript:requirejs [2020/08/30 13:05] (現在) – ともやん | ||
---|---|---|---|
行 1: | 行 1: | ||
< | < | ||
< | < | ||
- | # | + | #aceeditor0, #aceeditor1, #aceeditor2, |
- | display: none; | + | #aceeditor3, #aceeditor4, # |
- | } | + | |
- | | + | |
- | display: none; | + | |
- | } | + | |
- | | + | |
- | display: none; | + | |
- | } | + | |
- | # | + | |
- | display: none; | + | |
- | } | + | |
- | | + | |
display: none; | display: none; | ||
} | } | ||
行 21: | 行 10: | ||
const $ = jQuery; | const $ = jQuery; | ||
const BASE_URL = '/ | const BASE_URL = '/ | ||
- | let url = ' | + | let url; |
- | $.ajax({ | + | |
- | url: BASE_URL + url, | + | (async () => { |
- | type: ' | + | |
- | dataType: ' | + | |
- | }).done((data) => { | + | url: BASE_URL + url, |
- | // | + | type: ' |
- | console.log(' | + | dataType: ' |
+ | }).done((data) => { | ||
+ | // | ||
+ | console.log(' | ||
+ | }).fail((jqXHR, | ||
+ | // | ||
+ | console.log(' | ||
+ | console.log(errorThrown); | ||
+ | }); | ||
+ | | ||
url = ' | url = ' | ||
- | $.ajax({ | + | |
url: BASE_URL + url, | url: BASE_URL + url, | ||
type: ' | type: ' | ||
行 42: | 行 40: | ||
console.log(errorThrown); | console.log(errorThrown); | ||
}); | }); | ||
- | }).fail((jqXHR, | ||
- | // | ||
- | console.log(' | ||
- | console.log(errorThrown); | ||
- | }); | ||
| | ||
- | $(document).ajaxStop(() => { | ||
try { | try { | ||
require([' | require([' | ||
行 56: | 行 48: | ||
console.log(ex); | console.log(ex); | ||
} | } | ||
- | require([' | + | |
- | | + | console.log(' |
- | let _requireJSFailBack; | + | |
+ | let _requireJSFailBack; | ||
+ | |||
+ | // RequireJS failback! | ||
+ | if (!!!$ || !!!ace) { | ||
+ | // | ||
+ | console.log(' | ||
+ | console.log(' | ||
| | ||
- | | + | _requireJSFailBack = true; |
- | if (!!!$ || !!!ace) { | + | $ = (!!!$ ? jQuery : $); |
- | // | + | |
- | console.log(' | + | |
- | console.log(' | + | $(' |
- | | + | |
- | $ = (!!!$ ? jQuery : $); | + | ace = self.ace; |
- | if (!!!ace) { | + | |
- | $(' | + | |
- | ace = self.ace; | + | |
- | } | + | |
} | } | ||
+ | } | ||
+ | | ||
+ | $.fn.regex = function(pattern, | ||
+ | var fn = $.fn.attr || $.fn.text; | ||
+ | return this.filter(function() { | ||
+ | return pattern.test(fn.apply($(this), | ||
+ | }); | ||
+ | }; | ||
+ | | ||
+ | self.editors = []; | ||
+ | self.codes = []; | ||
+ | const modes = [ | ||
+ | ' | ||
+ | ]; | ||
+ | | ||
+ | function setAceEditorStyle(editor, | ||
+ | let lines = 0; | ||
| | ||
- | | + | |
- | //alert($); | + | |
- | | + | mode: 'ace/mode/' + mode, |
- | | + | tabSize: 2, |
- | //console.log($); | + | useSoftTabs: |
- | // | + | }); // setOptions |
+ | | ||
| | ||
- | | + | |
- | | + | |
- | let lines = 0; | + | |
| | ||
- | for (let i = 0; i < 5; i++) { | + | |
- | editors.push(ace.edit(' | + | } |
- | + | ||
- | editors[i].setTheme('ace/ | + | const $aceEditors = $(' |
- | | + | // |
- | mode: 'ace/ | + | |
- | | + | editors.push(ace.edit($aceEditors[i].id)); |
- | | + | const mode = !!modes[i] ? modes[i] : 'javascript'; |
- | }); // setOptions | + | console.log(`mode: ${mode}`); |
- | editors[i].setValue(editors[i].getValue().trim(), -1); | + | |
- | lines = editors[i].getSession().getDocument().getLength(); | + | |
- | editors[i].setOptions({maxLines: | + | |
- | | + | $($aceEditors[i]).fadeIn('slow'); |
- | $('#aceeditor' | + | } |
+ | |||
+ | const $aceCodes = $(' | ||
+ | console.log(' | ||
+ | console.dir($aceCodes[0]); | ||
+ | for (let i = 0; i < $aceCodes.length; | ||
+ | | ||
+ | |||
+ | setAceEditorStyle(codes[i], ' | ||
+ | } | ||
+ | |||
+ | $.ajax({ | ||
+ | url: BASE_URL + ' | ||
+ | type: ' | ||
+ | }).done((data) => { | ||
+ | editors[3].setValue(data, -1); | ||
+ | | ||
+ | editors[3].setOptions({maxLines: | ||
+ | |||
+ | if (_requireJSFailBack) { | ||
+ | $('#settings_js_error' | ||
} | } | ||
- | // | + | |
- | $.ajax({ | + | |
- | url: BASE_URL + ' | + | |
- | type: ' | + | |
- | }).done((data) => { | + | |
- | editors[3].setValue(data, | + | |
- | lines = editors[3].getSession().getDocument().getLength(); | + | |
- | editors[3].setOptions({maxLines: | + | |
- | + | ||
- | if (_requireJSFailBack) { | + | |
- | $('# | + | |
- | } | + | |
- | | + | |
- | + | ||
- | }); | + | |
| | ||
- | | + | }); |
- | url: BASE_URL + ' | + | |
- | type: ' | + | |
- | }).done((data) => { | + | url: BASE_URL + ' |
- | editors[4].setValue(data, | + | type: ' |
- | editors[4].setOptions({maxLines: | + | }).done((data) => { |
- | }).fail((jqXHR, | + | editors[4].setValue(data, |
- | + | editors[4].setOptions({maxLines: | |
- | }); | + | }).fail((jqXHR, |
+ | |||
+ | }); | ||
}); // require end | }); // require end | ||
- | }); // ajaxStop | + | })(); // async function |
</ | </ | ||
</ | </ | ||
行 131: | 行 151: | ||
本家: [[https:// | 本家: [[https:// | ||
ソースコード: | ソースコード: | ||
+ | \\ | ||
+ | 今となっては、[[https:// | ||
+ | 古いブラウザーにも対応しており **require.config** で細かいモジュール設定が可能である。\\ | ||
===== 使い方 ===== | ===== 使い方 ===== | ||
**index.html**\\ | **index.html**\\ | ||
行 158: | 行 180: | ||
}); | }); | ||
});%% | });%% | ||
+ | </ | ||
+ | |||
+ | ==== DokuWiki に埋め込む方法 ==== | ||
+ | <WRAP prewrap 100% acecode_html> | ||
+ | < | ||
+ | < | ||
+ | <script src="/ | ||
+ | <script src="/ | ||
+ | </ | ||
+ | </ | ||
</ | </ | ||
行 184: | 行 216: | ||
<WRAP prewrap 100% # | <WRAP prewrap 100% # | ||
</ | </ | ||
+ | |||
+ | ===== 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** するように記述する。\\ | ||
===== 参考文献 ===== | ===== 参考文献 ===== |