差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:requirejs [2019/08/26 22:47] – ともやん | javascript:requirejs [2020/08/30 13:05] (現在) – ともやん | ||
---|---|---|---|
行 1: | 行 1: | ||
< | < | ||
+ | < | ||
+ | # | ||
+ | # | ||
+ | display: none; | ||
+ | } | ||
+ | </ | ||
< | < | ||
'use strict'; | 'use strict'; | ||
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: ' |
+ | 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: ' | ||
行 18: | 行 34: | ||
}).done((data) => { | }).done((data) => { | ||
// | // | ||
- | | + | console.log(' |
- | //alert(errorThrow); | + | |
+ | //alert(errorThrown); | ||
+ | console.log(' | ||
+ | console.log(errorThrown); | ||
}); | }); | ||
- | }).error((jqXHR, | ||
- | // | ||
- | }); | ||
| | ||
- | $(() => { | + | try { |
- | require([' | + | require([' |
- | | + | } |
- | // failback | + | catch (ex) { |
- | if (!!!$ || !!!ace) { | + | console.log(' |
- | // | + | console.log(ex); |
- | self._requireJSFailBack = true; | + | } |
- | $ = (!!!$ ? jQuery : $); | + | |
- | if (!!!ace) { | + | console.log(' |
- | $(' | + | require([' |
- | ace = self.ace; | + | let _requireJSFailBack; |
- | } | + | |
- | } | + | |
+ | if (!!!$ || !!!ace) { | ||
+ | // | ||
+ | | ||
+ | | ||
| | ||
- | | + | |
- | | + | |
- | // | + | |
- | self.editors = []; | + | |
- | const modes = [' | + | |
- | let lines = 0; | + | |
| | ||
- | | + | |
- | | + | |
- | + | | |
- | editors[i].setTheme('ace/ | + | |
- | editors[i].session.setOptions({ | + | |
- | | + | |
- | tabSize: 2, | + | |
- | useSoftTabs: | + | |
- | }); // setOptions | + | |
- | lines = editors[i].getSession().getDocument().getLength(); | + | |
- | editors[i].setOptions({maxLines: | + | |
- | | + | |
} | } | ||
- | // | + | } |
- | $.ajax({ | + | |
- | url: BASE_URL + ' | + | |
- | type: ' | + | var fn = $.fn.attr || $.fn.text; |
- | }).done((data) | + | |
- | editors[3].setValue(data, -1); | + | |
- | | + | |
- | | + | |
- | if (_requireJSFailBack) { | + | |
- | | + | |
- | } | + | |
- | }).error((jqXHR, textStatus, errorThrow) => { | + | |
- | | + | |
}); | }); | ||
+ | }; | ||
+ | | ||
+ | self.editors = []; | ||
+ | self.codes = []; | ||
+ | const modes = [ | ||
+ | ' | ||
+ | ]; | ||
+ | | ||
+ | function setAceEditorStyle(editor, | ||
+ | let lines = 0; | ||
| | ||
- | $.ajax({ | + | |
- | url: BASE_URL + ' | + | editor.session.setOptions({ |
- | type: ' | + | mode: ' |
- | }).done((data) => { | + | tabSize: 2, |
- | editors[4].setValue(data, | + | useSoftTabs: |
- | editors[4].setOptions({maxLines: | + | }); // setOptions |
- | }).error((jqXHR, textStatus, | + | editor.setValue(editor.getValue().trim(), |
- | + | ||
- | }); | + | lines = editor.getSession().getDocument().getLength(); |
- | }); // require | + | editor.setOptions({maxLines: |
- | }); // jQuery | + | |
+ | 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], | ||
+ | } | ||
+ | |||
+ | | ||
+ | url: BASE_URL + ' | ||
+ | type: ' | ||
+ | }).done((data) => { | ||
+ | editors[3].setValue(data, | ||
+ | let lines= editors[3].getSession().getDocument().getLength(); | ||
+ | editors[3].setOptions({maxLines: | ||
+ | |||
+ | if (_requireJSFailBack) | ||
+ | | ||
+ | } | ||
+ | }).fail((jqXHR, | ||
+ | |||
+ | }); | ||
+ | |||
+ | $.ajax({ | ||
+ | | ||
+ | type: ' | ||
+ | }).done((data) => { | ||
+ | editors[4].setValue(data, | ||
+ | editors[4].setOptions({maxLines: | ||
+ | }).fail((jqXHR, textStatus, | ||
+ | |||
+ | }); | ||
+ | }); // require | ||
+ | })(); // async function end | ||
</ | </ | ||
</ | </ | ||
行 90: | 行 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=" | + | <title>My Page</title> |
- | & | + | <script src=" |
- | & | + | <script src=" |
- | & | + | </head> |
- | & | + | <body> |
- | & | + | <h1>My Sample Page</h1> |
- | & | + | </body> |
- | & | + | </html>%% |
- | & | + | </WRAP> |
- | & | + | **scripts/ |
- | & | + | <html>< |
- | </html> | + | <WRAP prewrap 100% #aceeditor3> |
- | </pre> | + | </WRAP> |
- | <br/> | + | |
- | < | + | |
- | <p>< | + | |
- | <pre id=" | + | |
- | </pre> | + | |
- | </ | + | |
===== RequireJS のコード ===== | ===== RequireJS のコード ===== | ||
- | < | + | **require.js**\\ |
- | < | + | <WRAP prewrap 100% #aceeditor4> |
- | <pre id=" | + | </WRAP> |
- | </pre> | + | |
- | </html> | + | ===== ES6 class を RequireJS で定義する方法 ===== |
+ | <WRAP prewrap 100% # | ||
+ | %%// 定義方法 | ||
+ | define(' | ||
+ | | ||
+ | static get CODE_START() { | ||
+ | return '<!--[code-start]-->'; | ||
+ | } | ||
+ | |||
+ | constructor() { | ||
+ | this.MEDIA_AJAX_URL = '/lib/ | ||
+ | } | ||
+ | |||
+ | async getMediaList(ns, | ||
+ | let grep = !!grep_ ? grep_ : ''; | ||
+ | //... | ||
+ | } | ||
+ | }; // class end | ||
+ | }); // define end | ||
+ | |||
+ | // 使い方 | ||
+ | require([' | ||
+ | const dokuWiki = new DokuWiki(); | ||
+ | });%% | ||
+ | </WRAP> | ||
+ | ※**class** を **return** するように記述する。\\ | ||
===== 参考文献 ===== | ===== 参考文献 ===== |