JavaScript のオブジェクトを不変にする
◆ いまさらだけど freeze, seal, preventExtensions を使ってみた ◆ 完全に変更不可能が freeze ◆ 既存の変更だけできるのが seal ◆ 変更と削除ができて追加だけできないのが preventExtensions ◆ ひとつのオブジェクトに変更不可能なものと変更可能なものを混ぜたいならひとつずつ writable:false にする 変更するつもりがないなら let じゃなくてとりあえず const ってくらいに ですが プロパティには const をつけられません オブジェクトのプロパティというとどんどん変更していくものというイメージなので仕方ないかな とか思ってましたけど 考えてみると ES5 のときの defineProperty の writable がそうです var obj = {a:1} Object.defineProperty(o
ルート以外からの querySelector の意外な動き
◆ 要素のメソッドで querySelector しても検索は全体からされて内側だけってフィルタしてる ◆ 直接要素を指すものじゃなければ基準にする要素の外側の id や class 使える ◆ セレクタにいきなり ">" を使って 子要素をセレクタで検索できない ◆ 自分自身をセレクタで書いて ">" を使うのもありだけど そのセレクタが自分自身以外にマッチするかもしれない セレクタの基準は常にルートquerySelector って root からの document.querySelector 以外にも好きな要素に対して実行できます
onclick と addeventlistener の実行順 : (*x).b=z->a+y/c
◆ プロパティつけたタイミングで addEventListener 設定したのと同じ ◆ Chrome はプロパティ変更時に remove して add したように再設定される ◆ Firefox/IE は順番はそのままで null を設定したときに remove になる 優先度をつけたりあとから並び替えたりはできません 全部 remove してソートして add すれば可能です addEventListener 以外にも onclick のような onXXX 系プロパティに値をセットすることでもリスナを設定できます onXXX と addEventListener が組み合わさるとどんな順番になるの？っと疑問に思ったので試してみました ↓は Chrome で実行してます const elem = document.body const log = x => _ =>console.log
IE 11 で border が消える : (*x).b=z->a+y/c
<!doctype html> <meta charset="utf-8" /> <style> body { font-family: "Yu Gothic"; } .icon { line-height: 1; } table { width: 500px; border-collapse: collapse; border: solid 1px #ccc; } th { background: #f0f0f0; } td { background: #f8f8f8; } .relative { position: relative; } </style> <div> <a class="icon">a</a> </div> <table> <thead> <tr> <th>1</th> <th class="relative">2</th> <th>3</th> </tr> </th
Fetch as Google で Google ロボットが使える JavaScript を調べてみる : (*x).b=z->a+y/c
◆ Fetch as Google のクライアントは Chrome 27 のよう ◆ その頃に対応してなかった機能は動かない ◆ そこでエラーになるので JavaScript が全く実行されないときもある これの続きです 前回は アロー関数が Google の JavaScript 実行環境だと動かなくてその JavaScript のブロックがエラーになってしまって正しく表示されないことがわかりました ですが const など ES6 で追加された機能で動くものもあります Fetch as Google を他人のサイトでも使えれば ECMAScript 6 compatibility table などに試してみれば一覧がわかるのですが そうは行かないので 自分が使いそうな機能を適当にいくつか試してみました こんな HTML を用意しました <!doctype html> <meta cha
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
