JavaScriptのMVCフレームワークと仲間たち ｜ Classmethod.dev()
JavaScriptのMVCフレームワークと仲間たち JavaScriptでイイ感じに開発をしたいという欲求が高まってきたため、自分でフレームワークを作らずに世界の賢者たちから学びたいと思います。今回は、JavaScriptでMVCフレームワーク等を実現しているフレームワークや周辺のライブラリ、さらにはツールやユーティリティまで幅広くご紹介します。 (2012/1/17 updated) Backbone.js Spine.js JavaScriptMVC AngularJS SproutCore Ember.js YUI App Framework Broke.js Fidel.js Sammy.js KnockoutJS eyeballs.js The M Project Knockback Batman.js Shipyard.js Agility.js ベース jQuery Doj
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
pixivポップボードのキャッシュの仕組みとFacebookのUIの話
pixivポップボードのキャッシュの仕組みとFacebookのUIの話 こんにちは。JavaScript Advent Calendar 2011 オレ標準コース18日目の@ykskです。 先日pixivにポップボードという通知機能がリリースされました。自分がお気に入りユーザーに追加されたり、投稿したイラストがブックマークされたりした時にヘッダーに未読件数などのお知らせを表示します。僕は直接機能を実装していたわけではないのですが、リリース直後に起こった負荷の問題でJSを書きました。今日はその話をします。主にUIの話です！ え！ リリース直後、定期的に未読数の更新をAjaxで行っていた部分の負荷が急激に上がりました。ページロード時にHTMLに未読数を埋め込んだあと、2分ごとに未読数取得APIへリクエストするという処理です。 ポップボードはヘッダーに出るため、ほぼ全てのページでこの処理が入りま
GitHub - HeatherSoron/Canvas-Text-Compress-JS: Compress text client-side in Javascript using the PNG-based compression built into HTML5's Canvas element
To use this software, do one of two things: (1) If you want to just play around with the compression algorithm, open up the included HTML file and enter some text into the left-hand box. Click the "save" button below, and notice that you've got a string of letters in the right-hand box. You can now copy that text, reload the page, paste the text back into the right-hand box, and hit load - returni
dust
2. The compiled template registers itself by name: When you're done messing around have a look at the guide. Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use. It is particularly well-suited for asynchronous and streaming applications. Syntax Dust templates use two types of tags: keys and sections. Keys refe
本当はそれなりに面倒くさいJavaScriptとhistoryとAjaxのお話 - 愛と勇気と缶ビール
口上 historyとAjaxといえば、JavaScriptからある程度任意でhistoryのエントリをpushできるhistory.pushStateとか、history.replaceStateは既に大分有名になった感がある。 素晴らしい未来では、全てのブラウザにpushStateが乗っていて「location.hashを使ったAjax遷移が許されるのは10年前のブラウザまでだよねー」というハッピーな世界が実現するのだろう。が、今現在ではまだpushStateに対応していないブラウザのシェアも多く、Ajaxによる擬似画面遷移をモリモリ行うようなサイトではpushStateのある環境、ない環境の両方を考慮してやる必要がある。 (ちなみに、要件によっては「pushStateがないブラウザは通常の遷移で我慢しろ！」という割り切りも全然ありだと思う) 先に言っておくと、この記事は長いです。 環
メッセージングでまあまあ捗るかもしれない話 - 愛と勇気と缶ビール
この記事はJavaScript Advent Calendar(オレ標準コース)の13日めのエントリイになります。 ちなみに家に帰った瞬間、マシンの時計がずれて12/14になってて、大分一人で焦りました。てへぺろ。ぺろぺろ。 この記事の題材はJavaScriptにおけるメッセージング（もどき）です。 で、メッセージングって何やねんと JavaScriptで！メッセージング！というとその筋の人はwindow.postMessageを思い出すのかも知れませんが、 この記事では「メッセージング」という言葉をもっと広い意味に捉えて使っています。 だいたい、「あるオブジェクトがメッセージを受け取るオブジェクトを直接には知らなくても、特定の目的を持ったメッセージを投げて処理をさせることができるような仕組み」のことを「メッセージング」と呼んでいます。 すごい！すごい分かりにくい！ (ちなみにいわゆるプロ
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
Ember.js - A framework for ambitious web developers
A framework for ambitious web developers. Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device. Read the Tutorial Build with the teams that never stop shipping. Some of the best development teams in the world have been iterating on their products for years with Ember. With scalab
画像を組み込む - Canvas - HTML5.JP
Canvasでは、JPEGやPNGといったブラウザに対応した画像であれば、それを組み込むことができます。このコーナーでは、画像の組み込み方法と、いくつかのオプション機能について紹介していきます。 画像組み込みの基本 Canvasで画像を組み込むためには、drawImageメソッドを使います。与える引数に応じて、描画する画像の扱い方が違ってきます。 ctx.drawImage(image, dx, dy) ctx.drawImage(image, dx, dy, dw, dh) Canvasの座標 (dx, dy) を左上端として、image に格納されたImageオブジェクトを描画します。dw と dh が指定されると、画像は、dw を横幅、dh を縦幅としたサイズに伸縮されます。 ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 元
JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
JavaScriptの正規表現リテラルが状態を持つデモ
あなたのブラウザでの実行結果 説明 ソースのコメントを見てください。 Firefox 3.0.10, Opera9.63, Chrome 1.0では以下のような表示になりました。 A3 B6 C9 (null)0 A3 B6 0A C9 (null)0 A3 A3 A3 A3 A3 10 20 X 0123 Safari 3.2.5, IE 6.0では以下のような表示になりました。 A3 A3 A3 A3 A3 A3 0A A3 A3 A3 A3 A3 A3 A3 10 10 10 0000
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blogs.oracle.com/?origref=blog.involver.com
Google Chrome bug in onchange on select dropdown
rtvote/README.md at master · hakobera/rtvote
Backbone.jsとは？開発に役立つ使い方、トレンド記事やtips - Qiita
learn.knockoutjs.com
GitHub - zentooo/hist.js: Ajax history management helper handling various envinroments (with pushState / with onhashchange / without both of them)
not found
Hello Backbonejs – Artur Adib