軽めのjQuery Advent Calendar 2012 16日目 Backbone.jsでattributesにオブジェクトを入れてハマった、っていうエントリーを書こうとしたら、ハマった僕を助けてくれたほかちゃんが先にBackbone.js Advent Calendarでエントリーを書きやがった書いてくれちゃったりしちゃったので、書くことがなくなった。 まあでも結局関連してるのって$.extend()のディープコピーだけなんで、あんまりよくわかってない人向けに書いておきます。書いてて結局これは誰向けの記事なんだろうと思い始めました。。 $.extend()って何ができんの 例えば $.extend(a, b) とかすると、aがbのこともできるようになります 。 具体的に var shino = { name: 'shino', age: 0, cry: function() { a

目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes

クリックイベントのサンプル .innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。 $(".inner").click(function(){ alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); }); alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。 $(".inner").click(function(e){ e.preventDefault(); alert(".inner"); }); $(".outer").click(fu

jQuery要素/DOM要素の他に、純粋な配列の操作などができる関数をjQueryは持っていますが、命名や引数などややこしいことが多いのでまとました。 配列を操作するjQueryのユーティリティ関数 純粋な配列を操作できる関数 $.inArray(needle, array) $.each(array, callback(index, value)) $.map(array, callback(value, index)) $.grep(array, callback(value, index) [, invert]) $.merge(first, second) コールバック関数に渡される引数の順序が統一されていないことに注意。 純粋な配列は操作できない関数 $.unique(array) 勘違いすると厄介です。詳しくは後述。 関数の解説 $.inArray(needle, array)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

function Foo() { this.foo = 'Foo!'; } function Bar() { this.bar = 'Bar!'; } Foo.prototype = new Bar(); Bar.prototype.baz = 'Baz!'; var obj = new Foo(); console.log('foo' in obj); // true console.log('bar' in obj); // true console.log('baz' in obj); // true console.log(obj.hasOwnProperty('foo')); // true console.log(obj.hasOwnProperty('bar')); // false console.log(obj.hasOwnProperty('baz')); // fal

ビューはアプリケーションにとってのインターフェースであり、ユーザーはビューの表示を目にし、そしてビューに対して操作を行います。本書で作成しているコードでは、ビューはロジックを持たないHTMLの断片であり、アプリケーションのコントローラ（イベントハンドラやデータの操作を受け持ちます）によって管理されています。ビューの中にロジックを記述しようという強い誘惑にかられることがしばしばありますが、これはMVCによる抽象化に反しており、絶対に行ってはなりません。無意味なスパゲッティコードへとつながる行為は慎むべきです。 5.1 ビューの動的な描画 ビューを生成する1つの方法として、JavaScriptのコードによって生成するというものがあります。DOMの要素を作成するにはdocument.createElement()関数を使用します。作成された要素にコンテンツをセットし、ページのDOMの中に追加しま

そもそも、コントローラとは一体何でしょうか。簡単に言うなら、コントローラはアプリケーションの中でビューとモデルとをつなぐ接着剤の役割を果すものです。ビューとモデルの双方に関与しているコンポーネントはコントローラだけです。ページが読み込まれると、コントローラはビューにイベントハンドラを関連付け、コールバックを適切に処理し、必要に応じてモデルとのやり取りも行います。 便利なライブラリも存在しますが、コントローラの作成にライブラリは必須ではありません。コントローラにとって必要なのは、モジュール性を持ち独立した存在であるということだけです。疎結合度の高いコンポーネントとしてふるまうべきであり、グローバル変数を定義したりすることは可能な限り避けなければなりません。これを実現するための優れた手法がModuleパターンです。 4.1 Moduleパターン ロジックをカプセル化してグローバル変数の衝突によ

3.1 MVCと名前空間 MVCパターンでは、データ管理はモデル（MVCのM）の中で行われます。モデルはビューやコントローラから切り離されていなければなりません。データの操作やふるまいに関するすべてのロジックは、モデルの中に適切な名前空間とともに保持されるべきです。 これはなかなか実践出来てないところ。 プラグイン化して管理、連携してるとモデルもビューもコントローラも混ぜ混ぜで書いてた。

JavaScriptのパフォーマンスを上げる13のテクニック 一部意訳あり。(特に関数についての11と13)。深く理解したい方はスライドや動画を観ることをオススメ。 (元記事） http://www.jonefox.com/blog/2012/07/10/13-javascript-performance-tips/ - 先日、Googleのダニエル・クリフォードは"Google I/O 2012"にて「V8で打ち破るJavaScriptのスピードリミット」と題した素晴らしい講演を行った。その中で彼は、JavaScriptコードで実践できる13のシンプルな最適化手法を紹介している。それらはChromeのV8 JavaScriptエンジンのコンパイルや実行速度を上げ、コードを速くするものだ。彼はそれらについての多くの説明を行なっているが、もしただシンプルTips一覧が欲しいというなら、以下を

2.1 イベントの監視 イベントリスナを削除するにはremoveEventListener()を使います。ここには以下のように、addEventListenerで指定したのと同じ引数を指定します。リスナが匿名関数であるなどの理由でリスナへの参照が存在しない場合は、要素ごと破棄しない限りリスナを削除することはできません。 まあ当たり前の事ですね。 ちなみに非標準だけど第4引数はaWantsUntrustedで、信頼されないコンテンツによって引き起こされるイベントを許可する、なる項目もあるらしい。 element.addEventListener - MDN 2.2 イベントの発生順序 ある要素とその祖先に同じ種類のイベントを指定している場合、下記ブラウザによって挙動が違う。 Netscape4はイベントキャプチャリング（event capturing）に対応しています。ここでは、最も上位（外

1.1 初期のJavaScript JavaScriptが強力で動的なオブジェクト指向言語である これって議論が分かれるところだけど書籍ではオブジェクト指向言語と言い切っている。 1.2 アプリケーションの構造化 大規模なjavaScriptアプリケーションを作成する上で鍵になるのは、「javaScriptの」アプリケーションをつくろうとはしないことです。まず、独立性の高いコンポーネントへとアプリケーションを分割するべきです。 粒度が細かいほうが制作しやすいし管理もしやすいと。 1.3 MVCとは MVCはデザインパターンの1つであり、アプリケーションをデータ（Model）とプレゼンテーションレイヤ（View）そしてユーザーインタラクションレイヤ（Controller）の3つに分割するという概念です。 大抵のWEBアプリケーションはこう分割できるよねと。 ユーザーがアプリケーションを操作し

JavaScript のオブジェクトがある名前のプロパティをもっているのかどうか調べる方法や、オブジェクトがもっているプロパティの名前の一覧を取得する方法はいくつか種類があって、それぞれどういうものだったかちゃんと覚えてなかったのでまとめてみました。 基本的に data property か accessor property かというのは、プロパティの存在を調べる際やプロパティの名前の一覧を取得する際には関係ないのです。 プロパティの名前一覧を列挙するときには、プロパティが enumerable かどうかというのは関係します。 *1 ECMA-262 5.1 を参照してまとめました。 オブジェクトが指定のプロパティをもっているかどうかの検査 オブジェクトが、指定の名前のプロパティをもっているかどうか調べる方法。 in 演算子 ECMA-262 5.1 - The in operator

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

以下、Underscore.jsが1.3.3当時の情報です。 template _.template(templateString, [data], [settings]) Underscore.js Utility template Backbone.jsを試すついでに、Underscore.jsについてるtemplateを試してみました。他のテンプレートライブラリ持ち込んでくるのも億劫だったので。 <script id="tmplString" type="text/template"> <h3>店舗情報</h3> <div id="store"> <p><a href="<%- data.store.url %>"><%- data.store.name %></a></p> <img src="<%- data.store.image %>" alt="店舗写真" /> <dl>