JavaScript は最初から存在するオブジェクト(ビルトインオブジェクト)の拡張が可能です。
// Numberオブジェクトを拡張し「奇数ならtrueを返す」メソッドを追加する
Number.prototype.odd = function() {
return !!(this.valueOf() % 2);
}
これは JavaScript の魅力の1つであり OOP 的な観点からも有益に見えるものですが、これには落とし穴があります。
安易な拡張を繰り返すと ライブラリ併用時の衝突や、
Array + for in ループで拡張された(意図しない)プロパティが列挙され、ループ処理が使えなくなる等の副作用が露呈するのです。
やりすぎた拡張は「プロトタイプ汚染」と呼ばれます。JavaScript という言語が持つ優れた拡張性は、汚染とのトレードオフなのです。
ブラウザ上で動作する JavaScript では、トップレベルオブジェクト(window オブジェクト)が常に存在します。
トップレベルオブジェクトはどこからでもアクセス可能なネームスペース(スコープ)に属す特別なオブジェクトです。
window オブジェクトに何かを追加するということは、グローバル関数やグローバル変数を追加したことになります。
// ブラウザ上で動作する JavaScript では // var hoge = 1; は、window.hoge = 1; と同じ <script> var hoge = 1; alert(hoge === window.hoge); // true </script>
コンセプトの異なる複数のライブラリを組み合わせた場合に、トップレベルオブジェクト以下の名前空間(グローバルネームスペース)が汚染され、ライブラリの衝突が発生するケースがあります。
特に、window.$ や window.$$ などは、多くのライブラリが似て非なる実装を行っているため、簡単に衝突します。
以下が uupaa.js によるグローバルネームスペースの拡張リストです。
ライブラリ併用による衝突が発生しないように配慮してあります。
uu で始まるキーワードは uupaa.js が使用します。
ECMA-262の仕様を非モダンブラウザでも使用可能にします。
多用される機能を取り込みます。
多用される機能を取り込みます。
多用される機能を取り込みます。
ある要素の色やテキストを変更しようとした場合に、まずその要素を特定する必要があります。
セレクタとは、ドキュメントツリーに存在する多数の要素から、ある特徴を元に絞り込みを行う一連の関数群のことです。
uupaa.js は、多様なセレクタを提供しています。
シンタックスシュガーとは、苦く飲みづらい薬を糖衣(砂糖でまぶ)した状態のことです。
プログラミングの世界では、構文を簡単に扱えるように形を多少変化させたものを意味します。
var hash = { a: 0 }; とあった場合に、「hash の a にアクセスする」には、2種類の構文が使えます。
JavaScript の本質的な構文は スクエアシンタックス で、ドットシンタックス はその シンタックスシュガーです。
ドットシンタックスは記号や数値で始まるプロパティにアクセスできないという制限もあります。
hash["(; _ ;)"] は構文的に正しく、hash.(; _ ;) はエラーになります。
<div id="sample" class="dummy"></div> といった HTML の断片があった場合に、
id 属性の値は "sample" で、class 属性の値は "dummy" です。
div 要素の style 属性の値を全て列挙するには次のようにします。
uu.css("div[style]").forEach(function(v) {
alert(v.style);
});
DOMノードにはいくつか種類があり、これを NodeType と呼びます。
| NodeType | Value | 説明 |
|---|---|---|
| ELEMENT_NODE | 1 | HTML を構成する要素(タグ)です。 |
| ATTRIBUTE_NODE | 2 | DOM Attribute ノードです。 |
| TEXT_NODE | 3 | テキストノードです。 |
| CDATA_SECTION_NODE | 4 | CDATA セクションノードです。 |
| ENTITY_REFERENCE_NODE | 5 | |
| ENTITY_NODE | 6 | |
| PROCESSING_INSTRUCTION_NODE | 7 | |
| COMMENT_NODE | 8 | コメントノードです。 |
| DOCUMENT_NODE | 9 | document ノード(ルートノード)です。 |
| DOCUMENT_TYPE_NODE | 10 | |
| DOCUMENT_FRAGMENT_NODE | 11 | |
| NOTATION_NODE | 12 |
Feature は機能を拡張する仕組みです。他のシステムでは同様の仕組みをプラグインやアドオンと呼んでいたりもします。
uupaa.jsでは、部品のオンデマンドロード(必要になったタイミングでロードすること)が可能です。
部品の読み込みには、uu.feature() を使用します。
uupaa.js における"クラス"という言葉には、 オブジェクト指向用語(OOP)としての"クラス"と、CSS の"クラス"の二つの意味があります。
CSS2Properties で
定義されている CSS のプロパティ名(スタイル名)の形式を cssProp と呼びます。
例: fontWeight
CSS で使用可能なプロパティ名(スタイル名)の形式を css-prop と呼びます。
例: font-weight
document.getComputedStyle() が返す値を計算済みのスタイルと呼びます。
計算済みのスタイルは、JavaScript で設定されている elm.style の値の他に、
HTML タグに直接書かれたインラインスタイル(＜tag style="xx: ..."＞)や、
style 要素で設定されているスタイルも加味したもので、画面描画に使用される実際の値にかなり近いものです。
計算済みのスタイルの単位は(基本的には) px ですが、IEはそれ以外の値( "auto" )を返す場合もあります。
相対単位(pt,em 等)で値を指定している場合でも、getComputedStyle() が返す値の単位は px になります。
color は、"rgb(red,gree,blue)" や "#FFFFFF" に変換されます(ブラウザ毎に異なります)。
{ fontWeight: "normal" } を、{ fontWeight: "400" } に変換するブラウザもあります。
see: ブラウザ毎の getComputedStyle の戻り値
Hash 型は Object 型の別名(alias)です。
連想配列的な Object 型の変数を Hash と呼びます。
var hash = { a: 1, b: 2, c: 3 }; // Hashを生成
文字列 Index でアクセスする要素が混在する Array も Hash と呼びます。
var ary = [ 1, 2, 3 ]; // この時点では Array と呼ぶが ary["StringIndex"] = "a"; // これ以後は Hash と呼ぶ
便宜上 Array と同じように操作できるが、実体は Array や Hash ではなく、length プロパティを持つものを FakeArray(擬似配列) と呼びます。
代表的なものに、arguments, NodeList, document.images があります。
RectHash は { x, y, w, h } を要素に持つ Hash です。
x が水平方向の座標, y が垂直方向の座標, w が水平方向の幅, h が垂直方向の高さ です。
矩形の座標/サイズを表現する入れ物として使います。
x, y, w, h 以外の要素を持つRectHashや、{ x, y } しか持たない Hash を RectHash と呼ぶ場合があります。
var rbga = { r: 255, g: 255, b: 255, a: 1.0 }; // "white"
var hsva = { h: 360, s: 100, v: 100, a: 1.0 }; // "white"
Singletonは、「一つしか存在しないもの」という意味です。
シングルトンクラスは、何度 new しても常に一つの実体(の参照)を返すため、
スマートなグローバル変数 を生成できます。
var obj1 = new SingletonClass(); // インスタンスを生成 var obj2 = new SingletonClass(); // obj1の参照を取得 alert(obj1 === obj2); // true (obj1とobj2は同じもの)
│ │ │■│ ← top stack(n=2) 最後に積まれたスタック │■│ ← n=1 二番目に積まれたスタック │■│ ← bottom stack(n=0) 最初に積まれたスタック ─┴─┴─