私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.132 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
簡単な「行」で遊んでる所悪いが、本当のお題は >>822 の「列」だからな
動くコードで出てるのは、jQuery版のこれだけ（ >>821）
$(document).on('click', 'td', function() {
var index = $(this).siblings().addBack().index(this) + 1;
$(this).closest('table')
.find('th.selected').removeClass('selected').end()
.find("th:nth-of-type(" + index + ")").addClass('selected');
});
アンチjQueryは頑張れ。これ真似するだけだろ？
動くコードで出てるのは、jQuery版のこれだけ（ >>821）
$(document).on('click', 'td', function() {
var index = $(this).siblings().addBack().index(this) + 1;
$(this).closest('table')
.find('th.selected').removeClass('selected').end()
.find("th:nth-of-type(" + index + ")").addClass('selected');
});
アンチjQueryは頑張れ。これ真似するだけだろ？
短くかければいいのなら単にhoge()と呼べば済むライブラリを提供すればいい
それと同じで君の回答と言うのは質問者の成長を微塵も考えていない自己満足のコードなんだよ
おかしな方向で張り合ってる暇があったらきちんとロジックやAPIの説明を交えた
質問者の為になって次から独り立ちできるような回答を心掛けろ
それと同じで君の回答と言うのは質問者の成長を微塵も考えていない自己満足のコードなんだよ
おかしな方向で張り合ってる暇があったらきちんとロジックやAPIの説明を交えた
質問者の為になって次から独り立ちできるような回答を心掛けろ
オブジェクトにイベントリスナを登録
オブジェクトにイベントを発火させると、イベントリスナを順次呼ぶ
みたいな仕組みを作る時の定石みたいのありますか？
自分でonメソッドやonceメソッドやtriggerメソッドを実装することも
そんなに手間ではなさそうですが
使ったら便利になるパーツが既に揃ってるんじゃないかという気もします
オブジェクトにイベントを発火させると、イベントリスナを順次呼ぶ
みたいな仕組みを作る時の定石みたいのありますか？
自分でonメソッドやonceメソッドやtriggerメソッドを実装することも
そんなに手間ではなさそうですが
使ったら便利になるパーツが既に揃ってるんじゃないかという気もします
イベントと言いつつただちょっと伝播するコールバックがしたいだけだろ
イベントってそんなたいそうなものですか？
http://developer.mozilla.org/ja/docs/Web/API/EventTarget
EventTargetの簡易実装はたった35行ですよ
もともとかなりシンプルな仕組みだと思いますが
http://developer.mozilla.org/ja/docs/Web/API/EventTarget
EventTargetの簡易実装はたった35行ですよ
もともとかなりシンプルな仕組みだと思いますが
>854
> みたいな仕組みを作る時の定石みたいのありますか？
あるよ。EventEmitterとかいうのがそれ
node関連でよく使われているがブラウザでも使える
EventEmitterとかEventEmitter2とかEventEmitter3とかEventEmitter4とか
あるので注意なｗ
なお、いつものことだが
jQueryはDOM要素だけでなく任意のオブジェクトに対してonでイベントハンドラを定義できる
たったこれだけで、あなたの希望のものが実現できるよ
var obj = { foo: 'bar' };
$(obj).on('myevent', function() {alert(this.foo)});
$(obj).on('myevent', function() {alert(1)});
$(obj).on('myevent', function() {alert(2)});
$(obj).trigger('myevent');
> みたいな仕組みを作る時の定石みたいのありますか？
あるよ。EventEmitterとかいうのがそれ
node関連でよく使われているがブラウザでも使える
EventEmitterとかEventEmitter2とかEventEmitter3とかEventEmitter4とか
あるので注意なｗ
なお、いつものことだが
jQueryはDOM要素だけでなく任意のオブジェクトに対してonでイベントハンドラを定義できる
たったこれだけで、あなたの希望のものが実現できるよ
var obj = { foo: 'bar' };
$(obj).on('myevent', function() {alert(this.foo)});
$(obj).on('myevent', function() {alert(1)});
$(obj).on('myevent', function() {alert(2)});
$(obj).trigger('myevent');
>>859
ありがとうございます
EventEmitterというのは、聞いたことのある言葉ですが、
そういうものだったのですね
jQueryも使えることは調べていて知りましたが
イベントを実装するためにオブジェクト自体がjQueryオブジェクトになってしまうのはどうか？
と思ってやめたのでした
ありがとうございました
ありがとうございます
EventEmitterというのは、聞いたことのある言葉ですが、
そういうものだったのですね
jQueryも使えることは調べていて知りましたが
イベントを実装するためにオブジェクト自体がjQueryオブジェクトになってしまうのはどうか？
と思ってやめたのでした
ありがとうございました
EventEmitterを継承するようにしたら、思っていた感じになりました
ありがとうございました
ありがとうございました
> イベントを実装するためにオブジェクト自体がjQueryオブジェクトになってしまうのはどうか？
別にjQueryオブジェクトにはならないよ
別にjQueryオブジェクトにはならないよ
var arr=[];
function p(n){
arr.push(n);
}
p({id:'hoge',age:20});
p({id:'fuga',age:18});
console.log(arr);
これをクラスぽく書くにはどうしたらいいですか？
var my=function(){
this.arr=[];
}
my.prototype.p=function(n){ this.arr.push(n);return this; }
var a=new my();
a.p({id:'hoge',age:20});
a.p({id:'fuga',age:18});
var b=new my();
b.p({id:'moge',age:30});
b.p({id:'muga',age:38});
console.log(a);
console.log(b);
この.pを無くしてa({})やb({})という風にしたいのです
function p(n){
arr.push(n);
}
p({id:'hoge',age:20});
p({id:'fuga',age:18});
console.log(arr);
これをクラスぽく書くにはどうしたらいいですか？
var my=function(){
this.arr=[];
}
my.prototype.p=function(n){ this.arr.push(n);return this; }
var a=new my();
a.p({id:'hoge',age:20});
a.p({id:'fuga',age:18});
var b=new my();
b.p({id:'moge',age:30});
b.p({id:'muga',age:38});
console.log(a);
console.log(b);
この.pを無くしてa({})やb({})という風にしたいのです
Constructorから作るインスタンスを素のオブジェクトじゃなくて関数にしたいってことかな
ならConstructor内のthisを無視してthis拘束した関数作ってprototypeに色々付けてそれreturnすればいい
ならConstructor内のthisを無視してthis拘束した関数作ってprototypeに色々付けてそれreturnすればいい
Javaの教祖マーティン・ファウラー御大、名著「リファクタリング」第２版にJavaではなくJavascript を採用してしまうｗｗｗｗｗ
http://martinfowler.com/articles/201803-refactoring-2nd-ed.html
http://martinfowler.com/articles/201803-refactoring-2nd-ed.html
>>866
jQueryも採用しますか？
jQueryも採用しますか？
>>867
そもそもDOM APIがでてこないんじゃないの？
アレな人はJavaScriptの話題だけしろーっていって
DOM APIの話はOKとかダブルスタンダードなこと言ってるけど
JavaScriptにDOM APIは関係ないからね
その本はあくまで言語の話しかしないでしょう。
でもライブラリを使って短くしましょうぐらいは言うかもね
そもそもDOM APIがでてこないんじゃないの？
アレな人はJavaScriptの話題だけしろーっていって
DOM APIの話はOKとかダブルスタンダードなこと言ってるけど
JavaScriptにDOM APIは関係ないからね
その本はあくまで言語の話しかしないでしょう。
でもライブラリを使って短くしましょうぐらいは言うかもね
>アレな人はJavaScriptの話題だけしろーっていって
>DOM APIの話はOKとかダブルスタンダードなこと言ってるけど
ここがWEB製作板で扱う話題が以下なんだから当然では・・・
・HTML、CSSなどのサイト制作の技術
・JavaScript、VBScriptなどのクライアントサイドプログラム
>DOM APIの話はOKとかダブルスタンダードなこと言ってるけど
ここがWEB製作板で扱う話題が以下なんだから当然では・・・
・HTML、CSSなどのサイト制作の技術
・JavaScript、VBScriptなどのクライアントサイドプログラム
ついでに言えばテーマがリファクタリングの本なんだから
DOM APIが出ようが出まいが関係ないだろう・・・
DOM APIが出ようが出まいが関係ないだろう・・・
>>871
ここはWebクライアントサイド技術の板なんだから
ブラウザに標準搭載のDOMが関係ないわけないだろ
ただオプションであるライブラリの１つを
さも当たり前かのように扱うなということを皆言ってる
料理でいうと、「砂糖・塩」と「親子丼の素・牛丼の素」は
いくら同じ調味料でも違うし
基本的に後者を使うのがスマートだと思い込んでる事自体が
料理愛好家によって批判されてるんだよ
ここはWebクライアントサイド技術の板なんだから
ブラウザに標準搭載のDOMが関係ないわけないだろ
ただオプションであるライブラリの１つを
さも当たり前かのように扱うなということを皆言ってる
料理でいうと、「砂糖・塩」と「親子丼の素・牛丼の素」は
いくら同じ調味料でも違うし
基本的に後者を使うのがスマートだと思い込んでる事自体が
料理愛好家によって批判されてるんだよ
クロージャでやってみました>>869
http://jsfiddle.net/4ed98ue3/1/
本当は別のクラスにこういう機能を組み込みたかったのですが
それだとa.p({})みたいに.pを書かないといけなくなってしまうのです
・arrayにプッシュするときは.pみたいなのを書かずa({})でできる
・それ以外の機能は”.なんたら”を書く
みたいな感じです
http://jsfiddle.net/4ed98ue3/1/
本当は別のクラスにこういう機能を組み込みたかったのですが
それだとa.p({})みたいに.pを書かないといけなくなってしまうのです
・arrayにプッシュするときは.pみたいなのを書かずa({})でできる
・それ以外の機能は”.なんたら”を書く
みたいな感じです
こんな感じ？
var my=function(){
var that = this;
this.arr = [];
return function(n){ that.p(n); return that; };
}
my.prototype.p=function(n){ this.arr.push(n); return this;};
my.prototype.get=function(n){ return this.arr[n];};
var a=new my();
var c = a({id:'hoge',age:20});
a({id:'fuga',age:18});
var b=new my();
var d = b({id:'moge',age:30});
b({id:'muga',age:38});
c.p({id:'nuga',age:48});
console.log(c);
console.log(d);
console.log(c.get(c.arr.length - 1));
var my=function(){
var that = this;
this.arr = [];
return function(n){ that.p(n); return that; };
}
my.prototype.p=function(n){ this.arr.push(n); return this;};
my.prototype.get=function(n){ return this.arr[n];};
var a=new my();
var c = a({id:'hoge',age:20});
a({id:'fuga',age:18});
var b=new my();
var d = b({id:'moge',age:30});
b({id:'muga',age:38});
c.p({id:'nuga',age:48});
console.log(c);
console.log(d);
console.log(c.get(c.arr.length - 1));
文章編集用のtextareaと、操作用のbuttonがあります
textareaにフォーカスがある時に操作用のbuttonをクリックした時にも
textareaのフォーカスは奪いたくありません
デフォルトイベントを殺そうと、
buttonのclickイベントリスナの中で
preventDefaultとstopPropagationをしても、フォーカスは失われます
フォーカスを奪わないようにするにはどうすればいいのでしょうか？
textareaにフォーカスがある時に操作用のbuttonをクリックした時にも
textareaのフォーカスは奪いたくありません
デフォルトイベントを殺そうと、
buttonのclickイベントリスナの中で
preventDefaultとstopPropagationをしても、フォーカスは失われます
フォーカスを奪わないようにするにはどうすればいいのでしょうか？
>>879
ふと思い出してmousedownをpreventDefaultしたら
フォーカスを奪わないと確認できました
こういう場合、
デフォルトイベントを殺すためのmousedownイベントと
clickイベントを別々に設定するのでしょうか？
clickイベントの代わりにmousedownイベントを使うようにしたら、
イベントリスナを一つにまとめることが出来ますが
clickの代わりにmousedownを使うのは、それはそれでどうなのかと思います
どうやるのがセオリーですか？
ふと思い出してmousedownをpreventDefaultしたら
フォーカスを奪わないと確認できました
こういう場合、
デフォルトイベントを殺すためのmousedownイベントと
clickイベントを別々に設定するのでしょうか？
clickイベントの代わりにmousedownイベントを使うようにしたら、
イベントリスナを一つにまとめることが出来ますが
clickの代わりにmousedownを使うのは、それはそれでどうなのかと思います
どうやるのがセオリーですか？
スマホみたいにtextarea触ると入力画面に遷移する環境をどう扱うかで分かれそう
PCだけなら地道にtextarea操作時に常時キャレットの位置を記録しておいて
何かあったらfocus()してキャレットを元に戻すまで一まとめにしてしまうのが
面倒だけど一番な気がする
そういう実装をエディタ系でたまに見る
PCだけなら地道にtextarea操作時に常時キャレットの位置を記録しておいて
何かあったらfocus()してキャレットを元に戻すまで一まとめにしてしまうのが
面倒だけど一番な気がする
そういう実装をエディタ系でたまに見る
>>883-884
ありがとうございます
mousedownはpreventDefaultだけするようにしました
こういう挙動が問題だと今日始めて気づいたのですが、
皆さん色々工夫してるということが分かって何か安心しました
ありがとうございました
ありがとうございます
mousedownはpreventDefaultだけするようにしました
こういう挙動が問題だと今日始めて気づいたのですが、
皆さん色々工夫してるということが分かって何か安心しました
ありがとうございました
そもそも、focus を奪わないって無理だろ
focusは、PC 内で同時に、1つのアプリの、1つのコントロールしか持てないから、
コントロールに入力する・ボタンを押すなどの際には、focusを奪う必要がある
また、focusを持つコントロールは、見えていないといけない
focusは、PC の資源。
何かのアプリが動くと、しょっちゅう、focusが奪われる。
それがウザイ
focusは、PC 内で同時に、1つのアプリの、1つのコントロールしか持てないから、
コントロールに入力する・ボタンを押すなどの際には、focusを奪う必要がある
また、focusを持つコントロールは、見えていないといけない
focusは、PC の資源。
何かのアプリが動くと、しょっちゅう、focusが奪われる。
それがウザイ
クリック対象がフォーカスを持たないものなら
フォーカスを奪わなくできる
フォーカスを奪わなくできる
tabでフォーカス移動でいるかどうかとは違って
divだろうとspanだろうとimgだろうとフォーカスは持つし取れるんじゃないの
divだろうとspanだろうとimgだろうとフォーカスは持つし取れるんじゃないの
JSは即時関数やら関数定義を大量にする必要が出てくるのに
functionって長いじゃん、それが理由
#案とかいろいろあったよ
functionって長いじゃん、それが理由
#案とかいろいろあったよ
>>890
関数の引数に、値のように見える関数を渡したいから
array.sort(比較関数) みたいにね。
ここ、比較関数を渡すんだけど、function() だったらいかにも関数じゃん？
じゃなくて、比較処理値みたいに関数っぽくないものを渡したくない？
array.sort( (a, b) => b - a ) みたいにね。
ほら、これ引数に関数を渡してるように見ないでしょ？
まるで値、実体は関数なんだけど、関数に見えない。値みたい
それがアロー関数の素晴らしい所
これは関数なんだけど、関数だとおもっちゃいけない。
値だ。そういう処理をする値だ。と考えると
thisが変わっちゃうなんてありえないって思えてくるでしょ？
それがアロー関数の素晴らしい所
関数の引数に、値のように見える関数を渡したいから
array.sort(比較関数) みたいにね。
ここ、比較関数を渡すんだけど、function() だったらいかにも関数じゃん？
じゃなくて、比較処理値みたいに関数っぽくないものを渡したくない？
array.sort( (a, b) => b - a ) みたいにね。
ほら、これ引数に関数を渡してるように見ないでしょ？
まるで値、実体は関数なんだけど、関数に見えない。値みたい
それがアロー関数の素晴らしい所
これは関数なんだけど、関数だとおもっちゃいけない。
値だ。そういう処理をする値だ。と考えると
thisが変わっちゃうなんてありえないって思えてくるでしょ？
それがアロー関数の素晴らしい所
>>892
javaやらrubyやらが涙ぐましい努力をして導入したのとは違い、javascriptは元から関数が第一級オブジェクトであるのでその通り。
でも短くかけるようになるだけでも嬉しいじゃん。
this使う場合もたいていbindしなくてよくなるから短くなるぞ。
javaやらrubyやらが涙ぐましい努力をして導入したのとは違い、javascriptは元から関数が第一級オブジェクトであるのでその通り。
でも短くかけるようになるだけでも嬉しいじゃん。
this使う場合もたいていbindしなくてよくなるから短くなるぞ。
まあ使えなくても困りはしない
アロー演算子は言語仕様だから
オレオレライブラリで代用したりはできないけど
どうでもいいけど
function( ... ){ ... }( ... )[ ... ]
とかのクソわかりづらい記述が俺は大嫌いだ
アロー演算子は言語仕様だから
オレオレライブラリで代用したりはできないけど
どうでもいいけど
function( ... ){ ... }( ... )[ ... ]
とかのクソわかりづらい記述が俺は大嫌いだ
(function( ... ){ ... })( ... )[ ... ]じゃないか？ｗ
そういうときこそ変数に入れて分けよう。
var hoge = function( ... ){ ... }
var fuga = hoge( ... )
var piyo = fuga[ ... ]
一行で書くのはたいていはパフォーマンスのためというより変数の名前考えるのがダルいから。ソースは俺。
分からないなら分かりやすく書こう。
そういうときこそ変数に入れて分けよう。
var hoge = function( ... ){ ... }
var fuga = hoge( ... )
var piyo = fuga[ ... ]
一行で書くのはたいていはパフォーマンスのためというより変数の名前考えるのがダルいから。ソースは俺。
分からないなら分かりやすく書こう。
クソな書き方するワンライナークズって死ねばいいよね という話だろ
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.122 + (1004) - [97%] - 2015/2/14 4:45
- + JavaScript の質問用スレッド vol.135 + (1002) - [97%] - 2018/11/23 10:30
- + JavaScript の質問用スレッド vol.130 + (974) - [97%] - 2016/10/26 14:18
- + JavaScript の質問用スレッド vol.142 + (984) - [97%] - 2020/8/27 19:15
- + JavaScript の質問用スレッド vol.112 + (1001) - [97%] - 2013/11/27 16:46
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.122 + (116) - [97%] - 2018/5/2 18:30
- + JavaScript の質問用スレッド vol.131 + (1004) - [97%] - 2018/3/7 13:30
- + JavaScript の質問用スレッド vol.133 + (1001) - [97%] - 2018/6/8 10:45
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.130 + (1001) - [97%] - 2017/11/25 20:45
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.142 + (926) - [97%] - 2019/12/23 13:15
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.102 + (1001) - [97%] - 2012/9/11 17:30
- + JavaScript の質問用スレッド vol.138 + (1004) - [97%] - 2019/4/20 23:45
- + JavaScript の質問用スレッド vol.139 + (1001) - [97%] - 2019/5/27 15:15
トップメニューへ / →のくす牧場書庫について