slowjet

is a part of a carburetor

JavaScript

複数人で開発するときに揃えたほうがいいところ: 機能の実装方法を揃える

例えば、ドラッグアンドドロップを実装するとして、一人はjQueryのプラグインを使って実装して、もう一人はHTML5のDrag & Drop APIを使って実装してしまわないように、その時にいる人たちで話して統一する。後から入った人には、その旨が分かるようにメモで…

大量にDOM操作(追加削除変更)をしていて、そのDOMのイベントを監視している場合は確実にイベントの監視を解除する

キの字だけど、最近イベントの監視を解除し忘れていたのが原因で、メモリリークを起こしてブラウザをクラッシュさせるという事案があったので。 View.render = function() { this.$someElem = $('<div class="someView"></div>'); this.$someElem.on('click', function() { ... }); this.…

複数人で開発するときに揃えたほうがいいところ: イベントの命名規則

イベントドリブンな持ち回しだと、よくあるイベント名を使いがち。例えば、クリックされたっていうのから、コントローラーとかへ渡す場合 // view _onClick: function(ev) { this.someController.trigger('click', @); } // controller _eventify: function(…

複数人で開発するときに揃えたほうがいいところ: コメントを出来る限り書く

コメントは出来るだけ、分かりやすく書いたほうがいい コードを読めば分かるけど、あっちへいったりこっちへいったり… コメントが適切に書かれていれば、このメソッドはどこでどう必要になっていて なぜこの引数が必要なのかなど、そういう情報が一目で分か…

複数人で開発するときに揃えたほうがいいところ: どのクラス/コンストラクタ/オブジェクトのメソッドを実行しているのかを明示する

気づいたところをメモしていくところ。今さら…とか恥ずかしがらずに書く。 どのクラス/コンストラクタ/オブジェクトのメソッドを実行しているのかを明示する 例えばSuperPagesと、これを継承するBasicPagesという二つのコレクションがあり、これらはどちらも…

$('<div class="hoge">')はIE8以下ではダメ

ふむ、知らなかった。IE8以下だとうまく要素が作れないので $('<div class="hoge"/>') または $('<div class="hoge"></div>') または $('<div>').addClass('hoge') とする。久しぶりにjQuery関連でハマってちょっとだけうれしい。 classがダメなんじゃなくて、属性関連も全部ダメ。単独じゃない場合は、閉じる</div></div>…

ここにGitHubを便利に使うUserScriptが2つあります

GitHubのIssueナンバーをタイトルに表示する GitHubのIssueページに検索ボックスをとても分かりやすい位置に置く 最初のやつはあれば便利っていう感じだけど、 画像がでかいな・・・ 二つめのやつなんか、ぱっとみどこにあるか分かりますかね。 ヘッダーにある・…

Backbone.jsでsetするときにvalidateが動かないじゃん

だまってvalidateオプションをtrueにするんだ model.set('hoge', 'fuga', { validate: true });

genymotionとADB(Android Debug Bridge)でAndroidのWebページデバッグ

長らくAndroid対応をしてなかったので浦島状態だったのだけど、Genymotioinっていうのを使うと、さくさく動いてデバッグしやすいというのを聞きまして。 結論から言うと、4.x系だけでした。2.3.x系以前のOSはなかったので、つまり実機か、バーチャルテスト端…

Backbone.jsでタッチイベント周りの処理

eventsの遅延評価で、イベント部分を分ける。対象メソッドは共通にしておく。メソッド内で必要になる位置関連のメソッドも用意しておいて、どちらであっても問題なく取得できるようにしておく。 タッチイベント周りと書いたけど、下記のコードはタッチで何ら…

CoffeeScriptではNamed functionが使えない

ふーむなるほどー使えないんですなー 検索したら出てきた笑ったやつ↓ Named function in CoffeeScript - Gists - GitHub こういうのどう書くんだろうと思ったら (function foo() { bar(); setTimeout(foo, 100); }()); CoffeeScriptだと、こうするようだ (fo…

jQueryのajaxError

気がつけば2ヶ月以上ブログを書いていなかった・・・ マメ男にはなれなさそうです ずっとバカの一つ覚えみたいに $('body').ajaxError(function() { foo(); }); としてましたけど、ajaxErrorが1.8系からdocumentにしか使えなくなっていた $(document).ajaxError…

コールスタックを辿って、関数が呼ばれた元の位置を知る

プロジェクトが長くなってくると、前に書いたはずのコードも忘れがちだよね… あれ、なんでこれ2回も呼ばれてるの、記憶にないんだけど(いやいや前に書いてる Chrome なら Error オブジェクトの stack で辿れる function hoge() { var err = new Error(); er…

BLOB とは何か

a[download] と Blob で任意のファイルを作ってダウンロードさせる で唐突に出てきた BLOB という物が何かという説明をちょっと。 32KB以上の大きなデータを扱う場合は、 Large Object(LOB) Data Types を利用する。 BLOB はこれのひとつで、Binary Large OB…

Backbone の collection 全てを destroy する

前書いたと思ってたけど書いてなかった。 destroy で DELETE も同時に行う。 collection.each(function(model) { model.destroy(); }); これだと、destroy 実行で collection から model が削除されて length が変わってしまうので、ダメ _.each(collection.…

a[download] と Blob で任意のファイルを作ってダウンロードさせる

これを JSON ファイルとして保存したい { hoge: 1, fuga: 2, piyo: 3 } インターフェース <a href="#" class="download disabled">ダウンロード</a> 1. Blob(*) を使ってバイナリデータを作る var a = document.querySelector('.download'); var obj = { hoge: 1, fuga: 2 , piyo: 3 }; var blob = new …

$.when には Deferred の配列を渡せない

どうも JS Deferred の癖が残っているようでいつもやってる気がする function hoge() { var dfrs = []; _.each(arr, function(obj) { var $dfr = $.Deferred(); dfrs.push($dfr); // 完了したら $dfr.resolve(); }); return $.when(dfrs); } これだとだめ。…

preventDefault()の位置に悩む

どこに書いても気持ち悪いなんとかしてください 気持ち的にはこれなんだけど $('a').click(function(e) { e.preventDefault(); var self = this; // hogehoge }); ちきしょう、varを先頭にまとめたいぜ・・・ かといって $('a').click(function(e) { var sel…

$.extend()とディープコピーを理解しよう

軽めのjQuery Advent Calendar 2012 16日目 Backbone.jsでattributesにオブジェクトを入れてハマった、っていうエントリーを書こうとしたら、ハマった僕を助けてくれたほかちゃんが先にBackbone.js Advent Calendarでエントリーを書きやがった書いてくれちゃ…

XHR2でデータをFormDataで送るときの構造の入れ子

なんしか受け取り側が { parent: { child1: 'value', child2: 'value' } } みたいになってるとき var formData = new FormData(); formData.append('parent[child1]', 'hogehoge'); formData.append('parent[child2]', 'fugafuga'); とすればOK 関連: http:…

エラーがあった場所を知りたい .stack

どんだけ更新してないのか・・・ //hogeoge .next(function(res) { // hogehogehogehoge }) .error(function(res) { console.log(res); }); resは正しいのでerrorになる。どこでエラーが出てるか分からない。 .error(function(res) { console.log(res.stack)…

iOS4.3以下だとEvent delegationでA要素を探せない

こんなコードがあって、アンカー部分をタップしてもiOS4.3以下ではA要素を捕捉できない。 document.addEventListener('click', function(ev) { var target = ev.target; // iOS5以上、Android2.2以上では大丈夫(2.1以下未確認 if ( target.nodeName === 'A'…

Backbone.jsのRouter

Backboneについて何か書こう書こうと思ってたけど、長くなってしまいがちで、長い文章は苦手なので下書きがたまるいっぽうだったんだけど、簡単なやつから書いていきましょうかなみたいな Routerを使うと、hashchangeを監視してroutesに記述したルールに沿っ…

JSでViewを管理するテンプレートエンジンはどれがいいんじゃ

最近はUnderscore.jsのテンプレート使ってるんだけど結局どれが使いやすさとかでいいんじゃろっていう。いくつか見たやつ挙げてみたけど、まだまだあるで jQuery Templates Underscore.js templates Mustache ICanHaz (including Mustache EJS Tempo Closure…

Google+の+1ボタンを任意のタイミングでレンダリングする

AjaxとかJSテンプレート使ってるときのやり方 https://developers.google.com/+/plugins/+1button/#example-explicit-load parsetags付きで読み込んでおく <script src="https://apis.google.com/js/plusone.js"> {"parsetags": "explicit"} </script> +1ボタンを置きたいところにソースを貼る <g:plusone></g:plusone> 任意のタイミングで実行する…

html(:root)にclassをふる

やったことなかった var doc_elm = document.documentElement; // document.html じゃないよ doc_elm.setAttribute('class', 'hoge');

CoffeeScriptで即時実行関数

Private variables - The Little Book on CoffeeScript - Common CoffeeScript idioms doキーワードで即時実行関数 do -> // here is private 引数渡すときは do (n) -> // hogehoge にすると (function(n) { // hogehoge })(n); になる

繰り返し処理を登録するClassみたいなの

funcで登録した関数をinterval毎に実行し続ける感じ ひとつの関数を登録するときはこう repeat = Repeat( interval: 100, func: -> console.log 'hoge' ) # 実行 repeat.run() # 止める repeat.stop() いくつも登録したいときはこう repeat = Repeat( interv…

FacebookのJS SDKをinitするようなやつ

これやっとけばOK。 function fb_init(app_id, abs_path, callback) { var body = document.body, fb_root = document.createElement('div'); fb_root.setAttribute('id', 'fb-root'); body.appendChild(fb_root); window.fbAsyncInit = function() { FB.ini…

iOSでDOMに直書きしたstyle属性を空にしたいときは setAttribute('style' ,'')

Chromeだと removeAttribute('style') とか style = '' でも大丈夫だったけど、iOSは setAttribute('style', '') ってしないとだめだった、詳しいことはまた今度