差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:requirejs [2019/09/08 17:09] – ともやん | javascript:requirejs [2020/08/30 13:05] (現在) – ともやん | ||
---|---|---|---|
行 2: | 行 2: | ||
< | < | ||
# | # | ||
- | # | + | # |
display: none; | display: none; | ||
} | } | ||
行 21: | 行 21: | ||
// | // | ||
console.log(' | console.log(' | ||
- | }).fail((jqXHR, | + | |
// | // | ||
console.log(' | console.log(' | ||
行 41: | 行 41: | ||
}); | }); | ||
| | ||
- | | + | |
- | | + | require([' |
- | require([' | + | } |
+ | catch (ex) { | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | console.log(' | ||
+ | | ||
+ | let _requireJSFailBack; | ||
+ | |||
+ | // RequireJS failback! | ||
+ | if (!!!$ || !!!ace) { | ||
+ | // | ||
+ | console.log(' | ||
+ | console.log(' | ||
+ | |||
+ | _requireJSFailBack = true; | ||
+ | $ = (!!!$ ? jQuery : $); | ||
+ | |||
+ | if (!!!ace) { | ||
+ | $(' | ||
+ | {src: '/ | ||
+ | ace = self.ace; | ||
+ | } | ||
} | } | ||
- | | + | |
- | | + | $.fn.regex = function(pattern, fn_a) { |
- | | + | |
+ | return this.filter(function() { | ||
+ | return pattern.test(fn.apply($(this), | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | 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); | ||
} | } | ||
| | ||
- | | + | |
- | | + | //console.dir($aceEditors); |
- | function($, ace) { | + | for (let i = 0; i < $aceEditors.length; i++) { |
- | let _requireJSFailBack; | + | editors.push(ace.edit($aceEditors[i].id)); |
- | + | const mode = !!modes[i] ? modes[i] : 'javascript'; | |
- | | + | |
- | if (!!!$ || !!!ace) { | + | |
- | // | + | setAceEditorStyle(editors[i], mode); |
- | | + | |
- | console.log(' | + | $($aceEditors[i]).fadeIn(' |
- | + | } | |
- | _requireJSFailBack = true; | + | |
- | $ = (!!!$ ? jQuery : $); | + | const $aceCodes |
- | + | | |
- | if (!!!ace) { | + | |
- | $(' | + | for (let i = 0; i < $aceCodes.length; |
- | {src: '/ | + | codes.push(ace.edit($aceCodes[i])); |
- | ace = self.ace; | + | |
- | } | + | |
- | } | + | } |
- | + | ||
- | self.editors = []; | + | |
- | const modes = [' | + | url: BASE_URL + ' |
- | let lines = 0; | + | type: ' |
- | + | }).done((data) => { | |
- | | + | editors[3].setValue(data, |
- | editors.push(ace.edit(' | + | |
- | + | editors[3].setOptions({maxLines: | |
- | editors[i].setTheme('ace/ | + | |
- | | + | if (_requireJSFailBack) { |
- | | + | $('# |
- | tabSize: 2, | + | } |
- | useSoftTabs: | + | }).fail((jqXHR, |
- | | + | |
- | editors[i].setValue(editors[i].getValue().trim(), -1); | + | }); |
- | | + | |
- | | + | $.ajax({ |
- | | + | url: BASE_URL + ' |
- | $('# | + | type: ' |
- | } | + | }).done((data) => { |
- | // | + | editors[4].setValue(data, |
- | $.ajax({ | + | editors[4].setOptions({maxLines: |
- | url: BASE_URL + ' | + | }).fail((jqXHR, |
- | type: ' | + | |
- | }).done((data) => { | + | }); |
- | editors[3].setValue(data, | + | }); // require |
- | lines = editors[3].getSession().getDocument().getLength(); | + | })(); // async function end |
- | editors[3].setOptions({maxLines: | + | |
- | + | ||
- | if (_requireJSFailBack) { | + | |
- | $('# | + | |
- | } | + | |
- | }).fail((jqXHR, | + | |
- | + | ||
- | }); | + | |
- | + | ||
- | $.ajax({ | + | |
- | url: BASE_URL + ' | + | |
- | type: ' | + | |
- | }).done((data) => { | + | |
- | editors[4].setValue(data, | + | |
- | editors[4].setOptions({maxLines: | + | |
- | }).fail((jqXHR, | + | |
- | + | ||
- | }); | + | |
- | }); // require end | + | |
- | }); // ajaxStop | + | |
- | })(); | + | |
</ | </ | ||
</ | </ | ||
行 152: | 行 180: | ||
}); | }); | ||
});%% | });%% | ||
+ | </ | ||
+ | |||
+ | ==== DokuWiki に埋め込む方法 ==== | ||
+ | <WRAP prewrap 100% acecode_html> | ||
+ | < | ||
+ | < | ||
+ | <script src="/ | ||
+ | <script src="/ | ||
+ | </ | ||
+ | </ | ||
</ | </ | ||
行 178: | 行 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** するように記述する。\\ | ||
===== 参考文献 ===== | ===== 参考文献 ===== |