2011-01-18のJS:CommonJS, Firefox4, モダンJSのベストプラクティス

少しペースが早いですが、2回目の紹介記事です。
最近はCommonJS,modulesというワードが多く見かける気がします。

「第 0 回 HTML5 プログラミング&クリエイティブ・コンテスト」のお知らせ - Google Japan Developer Relations Blog
http://googledevjp.blogspot.com/2011/01/0-html5.html

公募期間: 2011 年 1 月 12 日〜 2011 年 2 月 11 日
HTML5を使った作品コンテストが開催されています。プログラミング部門とクリエイター部門に分かれて行うようです。

body要素のid属性またはclass属性をJavaScriptのディスパッチャーに使う - あと味
http://d.hatena.ne.jp/jdg/20110118/1295310812

jsファイルを一つにまとめたときに実行スクリプトを振り分けするために、bodyのid属性,class属性を元に判断するディスパッチャー関数。

NetAgent Official Blog : 難読化JavaScriptで利用可能なテクニック
http://www.netagent-blog.jp/archives/51739962.html

記号プログラミングと難読化エンコーダーの合わせ技でよい難読化を行う手法についての解説。
eval 関数を使うところを、Firefox 独自実装の crypto.generateCRMFRequest メソッドを利用。
evalについてはPerfection kills » Global eval. What are the options?がとても詳しい

Ecmazing JavaScript Blogs
http://www.ecmazing.com/blogs/

JavaScript(ECMAScript)で著名な方のブログを集めたサイト。
サイドバーから選択してその場で表示できるので、連続して見ていくのに便利なビューアー
海外のJavaScript情報を見つけよう | Web scratchと併せて

ruidlopes/scopeleaks - GitHub
https://github.com/ruidlopes/scopeleaks

グローバル名前空間に変数や関数が漏れていないかをスナップショットと比較して検出するライブラリ。
Browser、CommonJS 、JavaScriptCoreで動作する

打造最出色的模块加载框架：SeaJS Module Loader v0.3.0 预览版 - 岁月如歌
http://lifesinger.org/blog/2011/01/seajs-v0-3-0pre/

こちらについては別途記事にしました
CommonJSに基づいたモジュール管理ローダーSeaJS | JSer.info

John Resig on Advanced Javascript to Improve your Web App | Think Vitamin
http://thinkvitamin.com/code/john-resig-on-advanced-javascript-to-improve-your-web-app/

Future of Web Apps Miami conferenceでのjQuery作者であるJohn Resigの講演動画と内容の書き起こし。

memoize 实现代码中的小陷阱 - 岁月如歌
http://lifesinger.org/blog/2011/01/a-trap-of-memoize-code/

underscore.jsのmemorizeメソッドではtoStringやhasOwnPropertyいったものをキーとして渡した際に動作がおかしくなるというバグについての解説。(既にバグ提出はされているそうです)
一般にstrをキーとして受け取る関数でありがちなパターンとなってそうです。

jQuery 1.5の新機能: jQueryのサブクラスが作れるようになる | へびにっき
http://wp.serpere.info/archives/2050

jQuery 1.5 beta1で追加された
jQuery.subclass()の解説

RightJS: What’s New In RightJS 2.2
http://rightjs.org/tutorials/what-new-in-rjs22

JavaScriptフレームワークであるRightJSの2.2がリリースされました。
* Native CSS Transitions Support In Fx
* Fx.Attr Class
* Better UJS
* Mouseenter/Mouseleave Handlers
* DOM-Shortcuts For Strings
* Class And Wrapper Merge
* Supercalls On Modules
* IE8 Kicked Out In the Olds Module
* Full Stack CSS3 Support
* Object.merge With Deep Merge
* Element#index method
* Raw DOM Search
* IE Native UID
* Deprecations Removed
* Optimizations And Cleanups

Dmitry Baranovskiy’s Web Log
http://dmitry.baranovskiy.com/post/typeof-and-friends

入力のtypeを固定してtypeof演算子で比較することは本当にいいのか?
また==はよくないと言われているが、常に===を使うことが良いことなのかについて。

Web 2.0 Development and Business Lessons: Why You Need to Learn JavaScript
http://www.w2lessons.com/2011/01/why-you-need-to-learn-javascript.html

なぜ今JavaScriptを学ぶ必要があるか?という話。
今はクライアントでも複雑なUIを作成することができ、サーバサイドNode.jsのようなモノがある。
デスクトップは”the cloud”へシフトしてるようにも見える。その中でJSアプリケーションの負う部分は大きい。また巨大化するソースにおいてJavaScriptフレームは活用することは大事だ(文中ではDojo toolkitを出している、jQueryでない理由も書いてある)
またフレームワークを扱うためにはJavaScriptの基本原理をまず学ぶべきである。
JS is no longer an option for true programmers, it’s a requirement…and it’s not the nightmare you think it is.
といった感じの内容です。

これでできる！クロスブラウザJavaScript入門：第22回　JavaScriptによるUIの実装：ドラッグ｜gihyo.jp … 技術評論社
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0022

汎用的なドラッグの書き方,
UIとしてドラッグの実装方法

DailyJS: Arbor, Mug, I, Ristretto
http://dailyjs.com/2011/01/14/arbor-mug-i-ristretto/

JVM向けのJavaScriptコンパイラーであるMugの特徴を述べています。
CommonJS modulesを採用指定事やRhinoに比べて高速に動作するのが特徴

The CSS Corner: CSS3 Media Queries - IEBlog - Site Home - MSDN Blogs
http://blogs.msdn.com/b/ie/archive/2011/01/12/the-css-corner-css3-media-queries.aspx

IE9でのMedia Queriesサポート状況が公開されました。

Firefox 4 Beta 9 – 素晴らしい機能を満載して登場 « Mozilla Developer Street (modest)
https://dev.mozilla.jp/hacksmozillaorg/firefox-4-beta-9-a-huge-pile-of-awesome/

Firefox4での変化を網羅的に紹介。
今までもっとも激しいアップデートになっている。

node.js関係

NEVERSAW.US | Not Your Father’s Javascript
http://neversaw.us/2011/1/16/not-your-fathers-javascript/

最近のエンジン向け(主にNode.jsを対象)にJavaScriptのベストプラクティスを書いている。
-変数宣言はSingle var、変数の命名のパターン
-パッケージのディレクトリやファイル名はCommonJSのルールに習う
-列挙のパターンとしてforEach,mapを使ってシンプルに書ける
- Object.keysとforEachとbindを併せてオブジェクトのコピーを作成。(IE6,7はObject.keysがないので定義方法も)
-Function.prototype.bindの使い方、いろいろな使い方
古いものも多くあるため新しいものは見つけるのが難しいですがそれを乗り越えた先に見つかるものがある。