JavaScript

r.jsでビルドする際に設定として使うbuild.jsを動的にする。さらに部品化する。

r.js RequireJS用のmoduleをビルドする際にはr.jsを使います。 build.js この時にビルド設定の記述に使用するのがbuild.jsでこんな感じで書きます。 簡単な例だとこんなの ({ baseUrl:'./src', dir : './build', paths:{ jquery:"../lib/jquery-1.8.2", text…

Require JSで設定をmodule外に出して、それをビルド時に同梱する

モジュール別の設定を読み込む RequireJSではモジュールの名前として"module"が予約されていて、モジュール内でmoduleモジュールを取得するとそのモジュールの情報を参照することが出来ます。 define('foo',['module'], function (module) { }); RequireJS A…

CommonJS AMDとDeferred

Writing Modular JavaScript With AMD, CommonJS & ES HarmonyのModules With Deferred Dependenciesが便利なので活用してる。 初期化処理が非同期処理でrequireしてきても即使えるとは限らない場合に使う。 モジュール側ではモジュールそのものではなくてpr…

JavaScriptでコマンドを作って実行する

前置き Firebug1.10にhelpコマンドなるものが入ってました。 consoleでhelpって入力して実行するとFirebugで使える関数等が表示されます。 help();じゃないんですよ。 関数じゃなくてコマンド。 どうやって実現しているんだろうかって気になったのでエスパー…

JavaScriptでのbuilt-in/DOM objectのprototype拡張

@rosylillyが気にしていた window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.c…

BPStudy#60 ECMAScript5時代のJavaScriptライブラリ

JavaScript: 世界で最も誤解されたプログラミング言語(2001年) JavaScript: The World's Most Misunderstood Programming Language http://d.hatena.ne.jp/brazil/20050829/1125321936 2012年未だ誤解されているプログラミング言語JavaScript 嫌われている"J…

インスタンスに依存した初期値を持つ書き換え可能propertyの定義

インスタンスに依存してなければこれで済むから簡単ですよねー function A(){} var proto = A.prototype; Object.defineProperty(proto,'key',{ value : 'default', writable : true }); インスタンスに依存している場合はprototype定義時にそのインスタンス…

JavaScriptでの非同期関数合成

Unserscore.jsや互換ライブラリのLo-Dashを使うと関数合成が出来ます。 複数個の関数があって、関数を呼び出した結果を使って関数を呼び出して…っていうのを1個の関数にします。 ドキュメントの例を見れば分かるかと。 簡略化のために関数合成の対象になる関…

packerで圧縮されたJavaScriptのdebug方法

minifyされたJavaScriptは各種開発者ツールのdeminifierを使えば整形された状態でdebug出来ますが、packerで圧縮されたJavaScript(以下packed JS)はどうかという話。 Google Chromeの開発者ツール前提で話をするので他のブラウザについては誰か調べてみてく…

Shibuya.js - Test.js LT テスターを支援する仕組みの話

お前、誰よ 文殊堂といいます BePROUD社員 お仕事 最近は、JavaScript時々Objective-C 今日のお話 自動テストの話はしません テスターによるテストの話をします タイミングによって発生したりしなかったりする類のバグってありますよね テスターさんがモンキ…

続・IEでのa要素の各属性について

前置き IEでのa要素の各属性について - 文殊堂の続き。 IE 6,7 で相対URL -> 絶対 URL の変換 - #生存戦略 、それは - subtechを参考にして、 cloneNodeハックとlink.hrefによるURLの絶対URL化を組み合わせてみました。 http://jsdo.it/monjudoh/o2Mk htt…

IEでのa要素の各属性について

色々あってa要素でURLをパースするというコードを書いていて色々はまったのでまとめます。 IE6-8でのa.hrefの上限 IE6,7:4096bytes IE8:4121bytes でした。 なお、Firefox,Google Chrome,Safariは1MBとか普通に扱えます。 使わないけど。 http://jsdo.it/mon…

疎結合なUIコンポーネントの作成について

複数画面で使えるAjax formダイアログのコンポーネントを作る 初期状態 Google CalendarのようなWebアプリを想像してください。 1日が1個のセルになっていて、セルをクリックしたらスケジュール登録ダイアログが表示され、 入力して登録ボタンを押すとスケジ…

jQuery custom event 応用編

前置き custom eventとは何か?(前置きの前置き) ブラウザがサポートしているeventではない独自定義event。 clickとかはブラウザがサポートしているevent ユーザのアクションやブラウザの状態等によって直接発火されることはない click eventは、ユーザがマウ…

java-ja.js #2 RequireJS実践編

java-ja.js #2 : ATND 自己紹介 文殊堂といいます。 BePROUDという会社のリーダーです ↑はロケタッチの話です(ロケタッチ知らない人は4SQでMayorになったみたいな話だと思っといてください)。 弊社では今(2010年12月現在)人材募集中らしいですよ。 今の仕事…

IEではRequireJS+jQueryで$(document).ready()で設定したcallbackが実行されないことがある&その対応

とりあえずRequireJS0.14.5+jQuery1.4.3,RequireJS0.15.0+jQuery1.4.4で発生。 IEは6~8っぽい。なんで気づいたかというと IEでjQueryUI等の動作がおかしくなった CSS Box Modelがサポートされている状態なのに$.boxModel(=$.support.boxModel)がtrueでない f…

RequireJS moduleについて

RequireJSって何? 公式サイト RequireJS スライド jQueryRequireJS.pdf 日本語記事だとこの辺? http://zudolab.net/blog/?p=451 要はJavaScriptの依存性解決をしてくれるライブラリで、こんな感じで使えます。 require( [ 'lib/a' ,'lib/b' ,'lib/c' ], func…

debug-assert-RequireJS-moduleなるものを作りますた

GitHub - monjudoh/debug-assert-RequireJS-module: RequireJS module for debugging and assertion. これは何かと言うとRequireJS moduleについて - 文殊堂で説明したRequireJSのmoduleで、 debug支援用のものです。 debug log出力の基本的な使い方 Require…

Dateをプロトタイプ汚染から守るExDate

というJavaScriptのライブラリを作りました。 GitHub - monjudoh/ExDate: JavaScript Date class wrapper for using conbination with Date libraly which leads to prototype pollution. 何をするライブラリか ExDateというclassを定義しています。 やって…

GreasemonkeyでクロスドメインiframeのcontentWindowにアクセスするとエラーになる件の回避方法

http://from.example.org/ のページでほげほげした結果を iframeで開いたhttp://to.example.com/ のページにwindow.postMessageで渡して、 そっちのGreasemonkeyで何か処理をさせるみたいなGreasemonkeyを書いててハマったのでメモ。 こんな感じのコードだっ…

若手IT勉強会 secrets of the JavaScript Ninja 読書会(第5章 prototypeの話)

注意 基本的に自分が気になったことしか此処には書かないので、 これだけ読んでもNinja本読んだ代わりには全くならないですよ、っと。 HTML Prototypes HTMLElement.prototypeに生やしたmethodが、 document.getElementById等で取得したDOM要素のobjectで使…

Excelの表中の「数字-」の数字を増減

例:1減らす場合 Firebugのconsoleに下のコードをコピペして、 Excelの表を範囲選択してコピーしたものを"ここ"って書いてあるところに突っ込む。 で、実行。 copy( <> .toString().replace(/(\d)-/g,function($0,$1) ($1-1)+"-") );

Excelの表をRedmine等に持っていく

Firebugのconsoleに下のコードをコピペして、 Excelの表を範囲選択してコピーしたものを"ここ"って書いてあるところに突っ込む。 で、実行。 copy( <> .toString().replace(/^|\t|$/gm,'|') );

Ex DOM Storageが読み込んだ直後に使えるとは限らない件

Ex DOM Storageのscriptタグの下のscriptタグ内のJavaScriptで、 localStorage,sessionStorageの各プロパティ・メソッドが使えないという現象が、 数回に一回発生した。 今、これを使ってるアプリではとりあえずDOMContentLoaded後にはまず確実に使えるっぽ…

Webページのtable一行分をコピーして、CSV一行分に変換してクリップボードに突っ込む

Firebugのconsoleに下のコードをコピペして、 table一行分をコピーしたものを"ここ"って書いてあるところに突っ込む。 で、実行。 copy( <> ここ .toString() .trim() .replace(/\n/g,'') .replace(/\s+/g,',') ); 文字列の中にXMLのタグとして解釈されるで…

Secrets of the JavaScript Ninja輪読会 JavaScriptのテスト

先日行われた若手IT勉強会 : ATNDに参加。 JavaScriptのテスト周りの話を読む。 JavaScriptのテストユニットフレームワークにおいては、 非同期テストのサポート eventのシミュレーションのサポート が重要とかそんな感じだった。 QUnitでは非同期テストはサ…

Ex DOM Storageがあるからと安心してWeb Storage使いまくりなWebアプリを作ると落とし穴に嵌る件

Ex DOM Storageを使っていて嵌った。 頭がおかしくなりそうだったがなんとかとりあえずの解決はできたので、 その件について話をする。 Ex DOM Storage IE6,7でWeb Storageを使えるようにするライブラリ。 userData behaviorとhtcを使って実装されている。 …

Ex DOM StorageをRailsで使う

Ex DOM Storage をリリースしました - Yet Another Hackadelic 個人的メモ Content-Typeの設定 Content-Type を設定するEx DOM Storage では IE 独自機能である DHTML Behavior を使っています。これについては別のエントリで解説しようと思いますが、配布フ…

storage eventの中でlocalStorage.lengthを参照し、localStorage.removeItem()実行でFirefox3.6を落とす

JS Bin localStorage storage eventの中でlocalStorage.lengthを参照するようにして、 localStorage.removeItem()実行後にlocalStorageにitemが1件ある状態で localStorage.removeItem()を実行すると Firefox3.6 では稀によく死ぬ。 同じkeyに対するsetItem(…

JavaScriptが遅い第一の原因

十年近く前の処理系が未だに現役であること。 JavaScriptが遅い4つの原因とは? - Publickey