r.js RequireJS用のmoduleをビルドする際にはr.jsを使います。 build.js この時にビルド設定の記述に使用するのがbuild.jsでこんな感じで書きます。 簡単な例だとこんなの ({ baseUrl:'./src', dir : './build', paths:{ jquery:"../lib/jquery-1.8.2", text:'../lib/plugins/text', underscore:'../lib/underscore-1.3.3' } }) 動的なbuild.js build.jsはJSONではなくてJSです。 JSなので処理を書くことが出来ます。 例えば関数その場実行を含む下記のbuild.jsは、上記のものと同じ設定を表します。 ({ baseUrl:'./src', dir : './build', paths:(function ()

モジュール別の設定を読み込む RequireJSではモジュールの名前として"module"が予約されていて、モジュール内でmoduleモジュールを取得するとそのモジュールの情報を参照することが出来ます。 define('foo',['module'], function (module) { }); RequireJS API config methodで設定できる項目の中のconfigにモジュール名をkey何らかのオブジェクトをvalueという辞書を設定しておくと、 moduleモジュールのconfig methodでそのオブジェクトを取得することが出来ます。 今回はmodule moduleとかconfig configとか見てて混乱するのが多いですね。 こんな設定をすると requirejs.config({ config: { 'baz': { color: 'blue' } }

Writing Modular JavaScript With AMD, CommonJS & ES HarmonyのModules With Deferred Dependenciesが便利なので活用してる。 初期化処理が非同期処理でrequireしてきても即使えるとは限らない場合に使う。 モジュール側ではモジュールそのものではなくてpromiseを返しておいて、モジュールの実体が完成したらresolveで渡す。 使う側はrequireしてきたpromiseのthenメソッドのcallbackでモジュールの実体を受け取って使う。 // 何らかの非同期処理を経て初期化されるモジュール define('someModule',['jquery'],function($){ var dfd = $.Deferred(); setTimeout(function(){ // モジュールとして実際

前置き Firebug1.10にhelpコマンドなるものが入ってました。 consoleでhelpって入力して実行するとFirebugで使える関数等が表示されます。 help();じゃないんですよ。 関数じゃなくてコマンド。 どうやって実現しているんだろうかって気になったのでエスパーして似たようなのを作ってみました。 Firebugのソースは読んでないけど多分おんなじようなことをしているはず。 コード 以下、with文の中でcommandって書いて実行するとcommand is executed.って出力されます。 var obj={}; Object.defineProperty(obj,'command',{ get : function() { console.log('command is executed.'); } }); with (obj) { command // com

@rosylillyが気にしていた のでまとめた。 built-in/DOM objectのprototype拡張による弊害 追加したプロパティ/メソッドがfor inで列挙される var obj = {a:1}; for (var i in obj) { console.log(i); } こうするとaだけ出るはずが、 Object.prototype.b=function(){}; こうした後だとa,bが出てしまうって奴ですね。 そのまま代入しないでObject.defineProperty/definePropertiesでenumerable:falseのプロパティとして定義すれば列挙されなくなるので特に問題ありません。 今回挙げるprototype拡張の弊害の内唯一これだけはECMAScript5時代になって解消されました。唯一これだけは。 built-in/DOM object

JavaScript: 世界で最も誤解されたプログラミング言語(2001年) JavaScript: The World's Most Misunderstood Programming Language http://d.hatena.ne.jp/brazil/20050829/1125321936 2012年未だ誤解されているプログラミング言語JavaScript 嫌われている"JavaScript"とは何か? ECMAScript3 13年前・前世紀(1999年)の言語仕様 IE6 11年前(2001年)のランタイム 嫌われている"JavaScript"と同世代の各言語のバージョンは? Python2.1 Ruby1.6 Perl5.6 J2SE1.3 現在のJavaScriptはECMAScript5 どの環境で使える? http://kangax.github.com/es5-c

インスタンスに依存してなければこれで済むから簡単ですよねー function A(){} var proto = A.prototype; Object.defineProperty(proto,'key',{ value : 'default', writable : true }); インスタンスに依存している場合はprototype定義時にそのインスタンスが存在しないのでvalueで初期値を定義できません。 単純なコードだと、実際の値を保持する別propertyとget/setを定義して、まだ保持していなかったら設定するとかそうなるでしょう。 function foo(val) { // valの内容によって戻り値が変わると思いねえ return 'default'; } function A(){} var proto = A.prototype; Object.definePro

Unserscore.jsや互換ライブラリのLo-Dashを使うと関数合成が出来ます。 複数個の関数があって、関数を呼び出した結果を使って関数を呼び出して…っていうのを1個の関数にします。 ドキュメントの例を見れば分かるかと。 簡略化のために関数合成の対象になる関数を1引数・戻り値ありの関数とします。 これを非同期処理をする関数に当てはめるとcallbackを含む2引数・戻り値なしの関数が当てはまるでしょう。 この場合のcallbackは1引数の関数とします。 まず、logを出力するcallback関数を定義しましょう。 function log(result){ console.log(result); } 次にcallbackを含む2引数・戻り値なしの関数を定義します。別に非同期処理はやっていないです。 // 1を足す function add1(callback,arg){ call

minifyされたJavaScriptは各種開発者ツールのdeminifierを使えば整形された状態でdebug出来ますが、packerで圧縮されたJavaScript(以下packed JS)はどうかという話。 Google Chromeの開発者ツール前提で話をするので他のブラウザについては誰か調べてみてください。 packed JSをdebugする際の壁はそれがevalで実行されることですが、Google Chromeの開発者ツールではevalで実行されたJSもdebug実行出来ます。 問題はどうやってdebug実行に持っていくかですが、globalから辿れる何らかのAPIがあるなら呼び出し元でブレークポイントを貼ってstep intoすれば良いです。 その場実行されるようなJSの場合はそれもできないので工夫が必要です。 以下は古いjQueryを使った例でそのような工夫は本来不要ですが

partake.inの12日目は文殊堂がお送りします。 深夜35時などという遅くに申し訳ありません。 今日はSourceTree無料キャンペーンによって存在意義が危うくなった感のあるMacHGも得意な箇所は凄いんだよ、ということで MacHGでrebase ontoをやるお話です。 Mercurialのrebase rebaseというとGitのコマンドという印象が強いですが、 Mercurialでもビルトインのextensionを有効化するだけで使用できます。 話の都合上ついでにいくつか有効化しておきましょう。 [extensions] rebase = mq = graphlog = rebase onto さて、今日お話しするのはgit rebase --onto相当のことです。 まず以下のglogを見てください。 このmami branchから分岐しているmado branchをho

remote repository追加 remote repositoryをgit remote addで追加。 GitTowerの場合Refs->Add New Remote Repositoryから追加。 remote branch情報の取得 remote repositoryに対してgit fetchで、remote repositoryのremote branch一覧を取得出来る。 cloneはfetchを含んでいるようなものなので不要なんだと思う GitTowerの場合remote repositoryを右クリックして、Fetch from Remote Repository これでrepositoryName/branchName でremote branchを使える。

githubというかgitosisはsshの鍵でユーザを判定します。 設定の仕方はhelpでも見てくだしあ。 Redirecting... Redirecting... Redirecting... 自分のgithubユーザとして色んなマシンからgithubを使う場合は簡単です。 上記の説明のとおりに公開鍵を追加していけばいいだけです。 で、同じマシンの同じユーザアカウントで、 複数のgithubユーザとしてgithubを使うのはどうすればいいかというと、 ホストのエイリアスを設定して別の秘密鍵を設定してやれば大丈夫です。 入門OpenSSH / 第4章 OpenSSH を使う ↓の例は複数HostNameへのSSH接続の管理ですが、 ~/.ssh/config で簡単に複数ホストへのSSH接続を管理する - すぱぶろ 同一HostNameで別Hostというふうにも出来るのでそれを使います

前置き IEでのa要素の各属性について - 文殊堂の続き。 IE 6,7 で相対URL -> 絶対 URL の変換 - #生存戦略 、それは - subtechを参考にして、 cloneNodeハックとlink.hrefによるURLの絶対URL化を組み合わせてみました。 http://jsdo.it/monjudoh/o2Mk http://jsdo.it/monjudoh/9aHd link.hrefによるURLの絶対URL化はIE6,7では使えないので割愛。 検証 IE6 なぜかhostnameがiframeではなく外側のものになってしまっている。 少なくとも短いURLについてはouterHTMLハックを使った場合に各属性の値をちゃんと取れていたので、 そっちを使ったほうが良さそう。 a要素の各属性(cloneNodeハック) ---url.length:11 href:[htt

色々あってa要素でURLをパースするというコードを書いていて色々はまったのでまとめます。 IE6-8でのa.hrefの上限 IE6,7:4096bytes IE8:4121bytes でした。 なお、Firefox,Google Chrome,Safariは1MBとか普通に扱えます。 使わないけど。 http://jsdo.it/monjudoh/8Fm6/read 各属性の取得状況 a.hrefにURLを代入して各属性がどうなるか調べてみました。 URLの長さが短い⇔上限超え outerHTMLハックを使わない⇔使う a.hrefにURLを代入後、別の要素のinnerHTMLにa.outerHTMLを代入し、そのfirstChild(a要素)の各属性を見ること の二軸を変えて調べてみました。 http://jsdo.it/monjudoh/sc82 IE6 a.hrefへの代入で更新され

自己紹介 文殊堂といいます BePROUDの見習いiOSプログラマです。 JavaScriptで30byteでFizzBuzzを書けます。 location.href='//is.gd/kzkQhu' iOSの前はUIがリッチな業務システムを作るとかそんな仕事をしてました。 内容 RequireJS実践編 jQuery custom event 応用編 疎結合なUIコンポーネントの作成について

複数画面で使えるAjax formダイアログのコンポーネントを作る 初期状態 Google CalendarのようなWebアプリを想像してください。 1日が1個のセルになっていて、セルをクリックしたらスケジュール登録ダイアログが表示され、 入力して登録ボタンを押すとスケジュールが登録され、セルの中に登録されたスケジュールが表示されます。 イメージ define([ 'schedule-model' ,'schedule-api' ,'schedule-to-selectors' ,'growl' ,'app/schedule-dialog-template' ,'debug' ,'jqueryui/dialog' ],function( ScheduleModel ,ScheduleApi ,scheduleToSelectors ,growl ,scheduleDialogTemplat

前置き custom eventとは何か?(前置きの前置き) ブラウザがサポートしているeventではない独自定義event。 clickとかはブラウザがサポートしているevent ユーザのアクションやブラウザの状態等によって直接発火されることはない click eventは、ユーザがマウスポインタを要素の上に移動後にマウスのボタンを押すと発火される DOMContentLoaded eventは、ページのHTMLがダウンロード完了し、すべてパースされると発火される jQueryではtrigger,triggerHandler methodでeventをユーザのアクション等に関係なく発火することが出来る custom eventも発火出来る 逆に言うとcustom eventはJavaScriptの側からしか発火されない 以前The JUI 2009 Returnsで話をしました。 htt

前説 DjangoでWebアプリを開発していて自分はJavaScript部分を担当しています。 で、サーバ側を動かさないと開発できないのは辛いので、 サーバサイドで生成されたHTMLとJSONをwgetして、js/dummy/とかに配置し、 各種URLの参照を書き換えてローカルでJavaScriptだけもりもり実装できるようにしました。 サーバサイドの実装に先行してJavaScriptの実装を進めていたため、 プロジェクト全体(django-apps)と独立してバージョン管理したかったため、 static配下だけが入ったdjango-staticというリポジトリを作成し、 そちらで開発を進めていきました。 今回の話は、プロジェクト全体(django-apps)とJavaScript&CSSだけ(django-static)の 二つのリポジトリの同期をとって運用していく話です。 準備 hg