JavaScript: Promise を理解する
JavaScript: Promise を理解する
順不同の工程を順序立てて行わせるときにい使うもの
let obj = new Promise (func);
--
関数 func には実行したい処理を書くのだが、2つの処理用の関数を
引数として受け取らなければならない。1つは、成功したあとに行う関数、
もう1つは失敗したときの関数。なので実行したい関数 func は以下の
ような書き方をする
function hoge (seikou, sippai) {
//適当な処理
// new Promise(hoge) ;が実行されるだけで関数hogeも実行される
成功? seikou (123): sippai (456);
}
ここで適当な処理を他の関数に丸投げしたい場合には、seikou関数と
sippai 関数を渡してやらなければならない。
function hoge (seikou, sippai) {
marunage (seikou, sippai);
}
function marunage (seikou, sippai) {
//丸投げされた処理
成功? seikou (123): sippai (456);
}
関数 seikou が呼ばれた後に処理を実行したい場合
obj.then (/*後処理の関数*/);
JavaScript: fetch でテキストを読み込む
fetch ('setupの手順.txt')
.then (res => {
if (res.oj) res.text (); //res.json ();
else throw new Error (''Network response was not ok.');
})
.then (function (txt) {
console.log (txt);
// console.log (JSON.stringify (txt));
})
.catch (err => console.log (err));
SVG で描画してみる
SVG で描画してみる
<code> <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" id="hoge"> </svg> </code> <script> const doc = document, svg = document.querySelector ('#hoge'), { PI, sin, cos } = Math, cx = 400, cy = 400, polyline = doc.createElementNS ("http://www.w3.org/2000/svg", 'polyline'), style = 'fill:none; stroke: red; stroke-width: 1;'; const N = 3 STEP = 4; polyline.setAttribute ('style', style); for (let r = 0; r < 400; r += STEP) { let point = [ ], poly = polyline.cloneNode (true); for (let p = r; p < 360 + r; p += 360 / N) { let a = p * PI / 180; point.push ([cx + sin (a) * r, cy - cos (a) * r]); } point.push (point[0]); poly.setAttribute ('points', point.map (([x, y]) => `${x},${y}`).join (' ')); svg.appendChild (poly); } </script>
JavaScript 簡易データベースもどきに(?)検索機能を付加してみた
<!DOCTYPE html> <title>?</title> <meta charset="utf-8"> <style> li label { color: green; font-weight: bold; padding-right: 1ex;} </style> <body> <div> <label>KeyWord:</label> <input type="search" autofocus> <em>space で区切ることも可能</em> <ul id="list"></ul> </div> <script> { //_____________________________________________________ /* 関数を遅らせて実行する let func = new DelayWork ((s)=>{alert(s)}, 1000); func.start ('Start!!'); //実行 func.stop (); //中止 */ class DelayWork { constructor (callBackFunc, wait = 500) { this.callBackFunc = callBackFunc; // func.bind (this) this.wait = wait; this.timerID = null; } start (...arg) { if (! this.timerID) { let cbfunc = () => { this.timerID = null; this.callBackFunc (...arg); }; this.timerID = setTimeout (cbfunc, this.wait); } return this; } stop () { if (this.timerID) clearTimeout (this.timerID); this.timerID = null; return this; } } //_____________________________________________________ class DelayHandler { constructor (handler, wait = 300) { let cbFunc; switch (Object.prototype.toString.call (handler)) { case '[object Object]' : if ('handleEvent' in handler) if ('function' === typeof handler.handleEvent) cbFunc = handler.handleEvent.bind (handler); break; case '[object Function]' : cbFunc = handler; break; default: throw new Error ('Not handleEvent'); break; } this.handler = new DelayWork (cbFunc, this.wait); this.wait = wait; } handleEvent (event) { this.handler.stop ().start (event); } } //_____________________________________________________ //記事 const Article_DEF_OPTION = { }; class Article { constructor (title = '', key = title, text = '', date = new Date, option = { }) { if (1 > title.length) arguments.length; this.title = title; this.text = text; this.key = key; this.date = date; this.option = Object.assign ({ }, Article_DEF_OPTION, option); } } //_____________________________________________________ const Book_DEF_OPTION = { }; //記事を本にまとめる。keyをもとに検索機能がある class Book { constructor (book = [ ], option = { }) { this.book = book; this.option = Object.assign ({ }, Book_DEF_OPTION, option); } append (...args) { this.book.push (new Article (...args)); return this; } load (ary) { ary.forEach (args => this.append (...args)); return this; } } //_____________________________________________________ //Book に検索機能を追加する const ExBook_DEF_OPTION = { }, REG_NORMALIZATION = /[-\/\\^$*+?.()|\[\]{}]/g, //正規化 REG_SPLITER = /\s+/g,//空白で区切る REG_TRIM = /(^\s+|\s+$|\s+(?=\s))/g,//前後の空白と中間の2文字以上の空白にマッチ REG_KEY = (str) => {//検索文字から正規表現を作る //x(?=y0)(?=y1)(?=yn)... let [a, ...bc] = str.replace(REG_NORMALIZATION, '\\$&').split (REG_SPLITER); return new RegExp (a + bc.map (s => `(?=.*${s})`).join (''), 'i'); }; class ExBook extends Book { constructor (book = [ ], display, option = { }) { super (book, Object.assign ({ }, ExBook_DEF_OPTION, option)); this.display = display; this.found = [ ]; //検索対象 this.key = ''; } find (arg = '') { let key = arg.replace (REG_TRIM, ''), len = key.length; if (len) { let cnt = this.key.length; if (! cnt || len < cnt) this.found = this.book.slice ();//検索対象を初期化 copy if (key !== this.key) { let reg = REG_KEY (key); this.found = this.found.filter (rec => reg.test (rec.key)); this.key = key; this.display.write (this.found.slice()); } } else { this.display.cls (); this.key = ''; } return this; } handleEvent (event) { this.find (event.target.value); } } //_____________________________________________________ const Display_DEF_OPTION = { disp_row : 1, //一回の処理で表示する行 disp_wait : 30, //次の表示処理までの時間 disp_max : 30 //最大の表示する行 }, createElement = function (n) { return this.createElement (n) }, createRow = (function (doc) { let [li, label, span] = ['li', 'label', 'span'].map (createElement, doc) li.appendChild (label); li.appendChild (span); return function (title, text) { label.textContent = title; span.textContent = text; return li.cloneNode (true); }; })(document); class Display { constructor (target, option = { }) { option = Object.assign ({ }, Display_DEF_OPTION, option) this.target = target; this.option = option; this.loop = new DelayWork (this.outByBit.bind (this), option.disp_wait); } write (rows = [ ]) { this.cls (); this.outByBit (rows.splice (0, this.option.disp_max)); return this; } outByBit (rows) { let fgm = this.target.ownerDocument.createDocumentFragment (), part = rows.splice (0, this.option.disp_row); this.target.appendChild (part.reduce ((a,b)=>{ a.appendChild (createRow (b.title + ":", b.text)); return a; }, fgm)); if (rows.length) this.loop.start (rows); return this; } cls () { this.loop.stop (); for (let p = this.target, e; e = p.firstChild; ) e.remove (); return this; } } //_____________________________________________________ this.Article = Article; this.Book = ExBook; this.Display = Display; this.DelayHandler = DelayHandler; } //_____________________________________________________ const //[タイトル... | 検索キー] テキスト(次のタイトル区切りの"["の直前までが対象となる notes = ` [ Array.prototype.push | array push ] 配列の最後に要素を追加する [ Array.prototype.pop | array pop ] 配列の最後から要素を削除し、その要素を返す [Array.prototype.map | array map] 配列から生成した配列を返す [ array.prototype.slice | array slice ] 配列から指定した要素を削除する `; let reg, ary, words = [ ]; { let text = '(.+?)'; let spc = '\\s*'; let text2 = '([\\s\\S]+?)'; let title = '\\['+ spc + text + '(?:' + spc + '\\|' + spc + text + ')?'+ spc + '\\]'; let note = spc + text2 + '(?=\\s*\\[|\\s*$)'; reg = new RegExp (title + note , 'gi'); } while (ary = reg.exec (notes)) { let [, ...arg] = ary; console.log(arg); words.push (new Article (...arg)); } let dic = new Book (words, new Display (document.getElementById ('list'))); document.querySelector ('input[type="search"]') .addEventListener ('input', new DelayHandler (dic), false); </script>
Javascript イベントを遅らせて発火させる
Javascript イベントを遅らせて発火させる
class DelayWork { constructor (callBackFunc, wait = 500) { this.callBackFunc = callBackFunc; // func.bind (this) this.wait = wait; this.timerID = null; } start (...arg) { if (! this.timerID) { let cbfunc = () => { this.timerID = null; this.callBackFunc (...arg); }; this.timerID = setTimeout (cbfunc, this.wait); } return this; } stop () { if (this.timerID) clearTimeout (this.timerID); this.timerID = null; return this; } } //_____________________________________________________ class DelayHandler { constructor (handler, wait = 300) { let cbFunc; switch (Object.prototype.toString.call (handler)) { case '[object Object]' : if ('handleEvent' in handler) if ('function' === typeof handler.handleEvent) cbFunc = handler.handleEvent.bind (handler); break; case '[object Function]' : cbFunc = handler; break; default: throw new Error ('Not handleEvent'); break; } this.handler = new DelayWork (cbFunc, this.wait); this.wait = wait; } handleEvent (event) { this.handler.stop ().start (event); } } //_____________________________________________________ function handler (event) { ; } document.querySelector ('input[type="search"]') .addEventListener ('input', new DelayHandler (handler), false);
時間間隔をちょっと考えて
時間間隔をちょっと考えて
class DateInterval { constructor (begin, end) { this.begin = begin; this.end = end; } isInRange (date = new Date) { let b = +this.begin, e = +this.end, d = +date; return b <= d ? d <= e: false; } copy () { return new DateInterval (new Date (this.begin), new Date (this.end)); } static range (...arg) { let [s, m, h, d] = [...arg.reverse (), 0, 0, 0, 0]; if (31 < d) throw new Error; return new Date (Date.UTC (1970, 0, d + 1, h, m, s, (s % 1 * 1000))); } static split (dateInterval, date) { let rst = [ ], max = +dateInterval.end, step = +date; for (let i = new Date (dateInterval.begin); i < max; i.setTime (+i +step)) rst.push (new Date (i)); return rst; } static create (a, b) { return new DateInterval (new Date (...a), new Date (...b)); } } let a = DateInterval.range (1,0,0); let b = DateInterval.create ([1,0,1], [1,0,2]); console.log (DateInterval.split (b, a));
まだ移譲が不足なのだろうか?
まだ移譲が不足なのだろうか?
<!DOCTYPE html> <title>?</title> <meta charset="utf-8"> <style> label { color: green; margin: 1ex 1ex 1ex; font-weight: bold;} </style> <body> <div> <label>KeyWord:</label> <input type="search" id="keyword" autofocus> <em>space で区切ることも可能</em> <ul id="list"></ul> </div> <script> { class DelayWork { constructor (callBackFunc, wait = 1000) { this.callBackFunc = callBackFunc; // func.bind (this) this.wait = wait; this.timerID = null; } start (...arg) { if (! this.timerID) { let cbfunc = () => { this.timerID = null; this.callBackFunc (...arg); }; this.timerID = setTimeout (cbfunc, this.wait); } return this; } stop () { if (this.timerID) clearTimeout (this.timerID); this.timerID = null; return this; } } //記事 const Article_DEF_OPTION = { }; class Article { constructor (title = '', text = '', date = new Date, keyword = title, option = { }) { if (1 > title.length) arguments.length; this.title = title; this.text = text; this.key = keyword; this.date = date; this.option = Object.assign ({ }, Article_DEF_OPTION, option); } } //_____________________________________________________ const Book_DEF_OPTION = { }, Book_REG_NORMALIZATION = /[-\/\\^$*+?.()|\[\]{}]/g, book_REG_SPLITER = /\s+/g, Book_createRegkey = (str) => { let [a, ...bc] = str.replace(Book_REG_NORMALIZATION, '\\$&').split (book_REG_SPLITER); return new RegExp (a + bc.map (s => `(?=.*${s})`), 'i'); //x(?=y0)(?=y1)(?=yn)... }; //記事を本にまとめる。keyをもとに検索機能がある class Book { constructor (book = [ ], option = { }) { this.book = book; this.option = Object.assign ({ }, Book_DEF_OPTION, option); this.current = [ ]; //検索された記事 this.key = ''; //検索ワードの記憶 } append (...args) { this.book.push (new Article (...args)); return this; } load (ary) { ary.forEach (args => this.append (...args)); return this; } search (key = '') { key = key.trim (); let len = key.length; if (len) { if (0 === this.key.length || len < this.key.length) this.current = this.book.slice (); if (key !== this.key) { let reg = Book_createRegkey (key); this.current = this.current.filter (rec => reg.test (rec.key)); this.key = key; } } else { this.current = [ ]; this.key = ''; } return this; } } //_____________________________________________________ //Book に表示機能を追加する const ExBook_DEF_OPTION = { disp_row : 3, //一回の処理で表示する行 disp_wait : 300, //次の表示処理までの時間 disp_max : 30 //最大の表示する行 }; class ExBook extends Book { constructor (book = [ ], output, option = { }) { option = Object.assign ({ }, ExBook_DEF_OPTION, option); super (book, option); this.output = output; this.loop = new DelayWork (this.outByBit.bind (this), option.disp_wait); } display (rows = this.current.slice ()) { this.cls (); this.outByBit (rows.splice (0, this.option.disp_max)); return this; } cls () { this.loop.stop (); this.output.cls (); return this; } outByBit (rows = [ ]) { this.output.out (rows.splice (0, this.option.disp_row)); if (rows.length) this.loop.start (rows); return this; } } //_____________________________________________________ //Book に入力機能を追加する const Ex2Book_DEF_OPTION = { inkey_wait: 1000 } class Ex2Book extends ExBook { constructor (book, input, output, option = { }) { option = Object.assign ({ }, Ex2Book_DEF_OPTION, option); super (book, output, option); this.input = input; this.routine = new DelayWork (this.find.bind (this), option.inkey_wait); input.addEventListener ('input', this, false); } find (key = '') { key = key.trim (); if (key !== this.key) this.search (key).display (); return this; } handleEvent (event) { this.routine.stop ().start (event.target.value); return this; } } //_____________________________________________________ class ListViewer { constructor (target) { this.target = target; } cls () { for (let p = this.target, e; e = p.firstChild; e.remove ()); return this; } out (rows = [ ]) { let doc = this.target.ownerDocument, li = doc.createElement ('li'), label = doc.createElement ('label'), span = doc.createElement ('span'), fgm = doc.createDocumentFragment (); li.appendChild (label); li.appendChild (span); this.target.appendChild (rows.reduce ((a, {title, text}) => { label.textContent = title; span.textContent = text; fgm.appendChild (li.cloneNode (true)); return a; }, fgm)); return this; } } //_____________________________________________________ this.Book = Ex2Book; this.ListViewer = ListViewer; } //_____________________________________________________ const article = [ { key: 'array map', title: 'Array.map', text: '配列から新たに作成した配列を返す'}, { key: 'array filter', title: 'Array.filter', text: '配列から条件を満たす配列を返す'}, { key: 'array some', title: 'Array.some', text: '配列から条件を一つでも満たすと true を返す'}, { key: 'array reduce', title: 'Array.reduce', text: '配列評価しながら配列を返す'} ], DIC2 = ` Array.prototype.push 配列の末尾に要素を追加する array push Array.prototype.pop 配列の末尾の要素を削除する array pop Array.prototype.shift 配列の先頭の要素を削除する array shift Array.prototype.unshift 配列の先頭に要素を追加する array unshift Array.prototype.indexOf 要素のインデックスを取得する array indexOf Array.prototype.splice インデックス位置を指定して要素を削除する array splice Array.prototype.slice 配列のコピー array slice `; let inp = document.querySelector ('#keyword'), out = new ListViewer (document.querySelector ('#list')), dic = new Book (article, inp, out); dic.load ( DIC2 .trim () .split (/\r|\n|\r|\n/) .map (s => s.trim().split (/\t|\s{2,}/g) .map (s => s.trim ()) ) ); </script>
teratail に登録する
それにしても色々な質問があるものだ。
すべてには答えきれないね。
そこでふと考えた。
解説などしないで、男ならコードだけで勝負しようと思った。
解説などいっさしない!
それに無視することも私の自由だ。
これからは、そうしよう。
タグ別ランキング1位の人の喰い入り様は、尋常ではない。
--
人様の書いたコードは、容易く理解できるものではない。
理解しようともせず、丸投げしてきた。
これも無視しよう。