差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:requirejs [2019/08/26 22:57] – ともやん | 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([' |
- | | + | } |
- | // requireJS | + | catch (ex) { |
- | if (!!!$ || !!!ace) { | + | console.log(' |
- | // | + | console.log(ex); |
- | console.log(' | + | } |
- | console.log(' | + | |
- | self._requireJSFailBack = true; | + | console.log(' |
- | $ = (!!!$ ? jQuery : $); | + | require([' |
- | if (!!!ace) { | + | let _requireJSFailBack; |
- | $(' | + | |
- | ace = self.ace; | + | |
- | } | + | if (!!!$ || !!!ace) { |
- | } | + | // |
+ | console.log(' | ||
+ | console.log(' | ||
| | ||
- | | + | |
- | | + | $ = (!!!$ ? jQuery : $); |
- | // | + | |
- | console.log(' | + | |
- | console.log($); | + | |
- | console.log(ace); | + | |
| | ||
- | self.editors = []; | + | |
- | const modes = [' | + | $(' |
+ | {src: '/ | ||
+ | ace = self.ace; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | $.fn.regex = function(pattern, | ||
+ | var fn = $.fn.attr || $.fn.text; | ||
+ | return this.filter(function() { | ||
+ | return pattern.test(fn.apply($(this), | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | function setAceEditorStyle(editor, | ||
let lines = 0; | let lines = 0; | ||
| | ||
- | for (let i = 0; i < 5; i++) { | + | |
- | editors.push(ace.edit(' | + | editor.session.setOptions({ |
- | + | mode: ' | |
- | editors[i].setTheme('ace/ | + | tabSize: 2, |
- | | + | useSoftTabs: |
- | mode: 'ace/ | + | }); // setOptions |
- | | + | editor.setValue(editor.getValue().trim(), |
- | | + | |
- | }); // setOptions | + | lines = editor.getSession().getDocument().getLength(); |
- | lines = editors[i].getSession().getDocument().getLength(); | + | editor.setOptions({maxLines: |
- | editors[i].setOptions({maxLines: | + | |
- | | + | editor.setReadOnly(true); |
+ | } | ||
+ | |||
+ | const $aceEditors = $(' | ||
+ | // | ||
+ | | ||
+ | editors.push(ace.edit($aceEditors[i].id)); | ||
+ | const mode = !!modes[i] ? modes[i] : 'javascript'; | ||
+ | console.log(`mode: ${mode}`); | ||
+ | |||
+ | | ||
+ | |||
+ | $($aceEditors[i]).fadeIn('slow'); | ||
+ | } | ||
+ | |||
+ | 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, | ||
+ | | ||
+ | editors[3].setOptions({maxLines: | ||
+ | |||
+ | if (_requireJSFailBack) { | ||
+ | | ||
} | } | ||
- | // | + | |
- | $.ajax({ | + | |
- | url: BASE_URL + ' | + | |
- | type: ' | + | |
- | | + | |
- | editors[3].setValue(data, | + | |
- | lines = editors[3].getSession().getDocument().getLength(); | + | |
- | editors[3].setOptions({maxLines: | + | |
- | if (_requireJSFailBack) { | + | |
- | $('# | + | |
- | } | + | |
- | }).error((jqXHR, textStatus, | + | |
- | + | ||
- | }); | + | |
| | ||
- | | + | }); |
- | url: BASE_URL + ' | + | |
- | type: ' | + | |
- | }).done((data) => { | + | url: BASE_URL + ' |
- | editors[4].setValue(data, | + | type: ' |
- | editors[4].setOptions({maxLines: | + | }).done((data) => { |
- | }).error((jqXHR, textStatus, | + | editors[4].setValue(data, |
- | + | editors[4].setOptions({maxLines: | |
- | }); | + | }).fail((jqXHR, textStatus, |
- | }); // require | + | |
- | }); // jQuery | + | }); |
+ | }); // require | ||
+ | })(); // async function end | ||
</ | </ | ||
</ | </ | ||
行 96: | 行 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** するように記述する。\\ | ||
===== 参考文献 ===== | ===== 参考文献 ===== |