Chapter 17. JavaScript Libraries
2010/09/14(火) 25:48 ［Javascript］｜→親記事へ｜
JavaScriptライブラリについて。
■17.1 Packaging Your Code
Chapter 16. JavaScript Objects - prog*sigの話で出てきたけど、オブジェクトリテラルによってまとめて再利用のためにまとめてみる。グローバル名前空間の占有率を減らすことは、他のライブラリとの衝突を避ける事にも繋がる。
function getElem(identifier) {
return document.getElementById(identifier);
}
function stripslashes (str) {
return str.replace(/\\/g, '');
}
function removeAngleBrackets(str) {
return str.replace(/</g,'<').replace(/>/g,'>');
}
// グローバル名前空間を3つも使ってる。
// =>オブジェクトにまとめる。
var jscbObject = {
// return element
getElem : function (identifier) {
return document.getElementById(identifier);
},
stripslashes : function(str) {
return str.replace(/\\/g, '');
},
removeAngleBrackets: function(str) {
return str.replace(/</g,'<').replace(/>/g,'>');
}
};
何度も使うようなコードは関数(メソッド)にして、モジュール化(Modularize)することで再利用性が高まります。またコードもすっきりする。■17.2 Testing Your Code with JsUnit
JsUnitの使い方について。■17.4 Hosting Your Library
オープンソースでありたいけど、自分のサーバで配布とかはしたくないとき。- Google Code
Wiki, Downloads, Issues, Sourceのダウンロードと一通りそろっている。
- Source Forge
- github
■17.5 Using an External Library: Building on the jQuery Framework
jQueryなどの著名なライブラリは多くの人によって使われ試されているので、独自のライブラリを使うより安全にできる。
■17.6 Using Existing jQuery Plug-ins
jQueryにはいろんなプラグインがあるが、衝突してないかを調べる。なるべく汎用的すぎるものは避ける、ここの目的に沿ったものを。
Unit testをしてみる。
動作がおかしいと思ったとき
- バグやissueが無いか検索
- アップデートがないかを調べる
- jQueryの新しめのやつ自体がバグってる場合も
■17.7 Convert Your Library to a jQuery Plug-in
オリジナルのライブラリをjQueryプラグインにするには。もし、jQueryでメソッドチェーン的に呼び出せるようにしたいなら、 jQuery.fnにメソッドを付ける
jQuery.fn.increaseWidth = function() {
return this.each(function() {
var width = $(this).width() + 10;
$(this).width(width);
});
};
// $("#test").increaseWidth() // =>可能
特にjQueryのメソッドチェーンで呼び出せる必要がないならjQueryオブジェクトを拡張する。
jQuery.bbHelloWorld = function(who) {
alert ("Hello " + who + "!");
};
// $("#test").bbHelloWorld() //=> 無理
// $.bbHelloWorld(); // =>可能
毎回jQueryって書いて拡張するのが面倒なら
jQuery.fn.flashBlueRed = function() {
return this.each(function() {
var hex = rgb2hex($(this).css("background-color"));
if (hex == "#0000ff") {
$(this).css("background-color", "#ff0000");
} else {
$(this).css("background-color", "#0000ff");
}
});
};
// => 下みたいにすれば$でjQueryオブジェクトを参照できるよ
(function($) {
$.fn.flashBlueRed = function() {
return this.each(function() {
var hex = rgb2hex($(this).css("background-color"));
if (hex == "#0000ff") {
$(this).css("background-color", "#ff0000");
} else {
$(this).css("background-color", "#0000ff");
}
});
};
})(jQuery);
下のように先頭に;を入れるのは、他のプラグインが;忘れてることがあるからその対策(そんなに遭遇するパターンなのか…)
;(function($){})(jQuery)
■17.8 Safely Combining Several Libraries in Your Applications
コードを一つにまとめたい、でも動かなくなる場合もある。安全策的には使うフレームワークに相当するライブラリは一つに絞ること。
こっから「良きライブラリ」とは何かの話
一つはwindow.onload=function() ...はDOM Level0のイベントで、既にあるイベントを上書きしてしまって動作がおかしくなるので、フレームワークでは使用しない。
もう一つはグローバルな名前空間はできるだけ使わない(何度もでてきたね)
拡張するときはprototypeを使わずに、ライブラリ側で用意されたものを使用しましょう。
直接拡張すると手に負えなくなるのは目に見えている。
"Well-designed libraries are well-tested, and provide a way to report bugs and view existing bugs."
よく使われてるライブラリはバグが見えやすいし、少ないので使うべきって感じ。
まとめ
- A good library does not use DOM Level 0 event handling.
- A well-defined library uses object literals to namespace its functionality.
- A well-defined library introduces few global objects.
- Libraries that play well with others provide event hooks. Well-behaved libraries also don’t extend existing objects via the prototype property.
- Solid libraries are well-tested, and hopefully provide these self-tests as deliverables.
- Stable libraries are actively maintained and, preferably, open sourced.
- Secure libraries provide documentation of known bugs and problems, and a way to report on any bugs and problems you find.
- Usable libraries are well-documented. Bandwidth-friendly libraries are optimized and compressed, though you can always compress the library yourself
またライブラリを圧縮、最適化することができ帯域に優しい。
- Confident libraries aren’t built on the assumption that no other library will be used.
まあ著者はjQueryだよって言いたいようだ。
最後のサマリの部分は面白いので、誰かがもっとちゃんとして翻訳をしてくれるはず。
コメント（0件）
- TB-URL http://efcl.info/adiary/079/tb/