今更JavaScriptの便利な使い方
今更でだが、世にあるJavaScriptライブラリやフレームワークがどうできているのか、見てみた。
実際、この辺は「だいたいこうだろうな」ってレベルで想像していただけなので、ある意味面白かった。
というのも、プログラミングするときに便利に使うには、JavaScriptライブラリやフレームワークで実践されているノウハウを使うと、非常に楽になるのではないかと思う。
例えば、JavaScriptの基本は「プロトタイプでオブジェクトをカスタマイズする」というところが、すでに実装されたオブジェクトにも通用するので、どんどん便利にできる。
Mootoolsを参考に、いくつか便利な関数を作ってみた。
function $(id) {
return document.getElementById(id);
}
String.prototype.contains = function(string, separator) {
return (separator) ? (separator + this + separator).indexOf(separator + string + separator) > -1 : this.indexOf(string) > -1;
}
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
String.prototype.clean = function() {
return this.replace(/\s+/g, ' ').trim();
}
Element.prototype.hasClass = function(className) {
return this.className.clean().contains(className, ' ');
}
Element.prototype.addClass = function(className) {
if (!this.hasClass(className)) this.className = (this.className + ' ' + className).clean();
return this;
}
Element.prototype.removeClass = function(className) {
this.className = this.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)'), '$1');
return this;
}
Element.prototype.setStyle = function(property, value) {
this.style[property] = value;
return this;
}
Element.prototype.setStyles = function(styles) {
for (var style in styles) this.setStyle(style, styles[style]);
return this;
}
動きますかね？ ざっと作っただけなので、ノーテストなんですが、、、
でもまぁ言いたいことは伝わってると思います。上記のElementやStringはJavaScriptのNativeオブジェクトでprototypeで機能拡張して、同じオブジェクトすべてで同じ機能が使えるようになります。
だから、以下のように使うことができるんです。
$('test').addClass('test-class');
$('test').removeClass('test-class');
$('test').setStyles({'width': '100px', 'height': '100px'});
ちなみに、Mootoolsではimplementというメソッドが用意されていて、
String.proototype[methodName] = functionObject;
というように、実装するようになっているみたいです。つまりこれは、
String.proototype.methodName = functionObject;
としているのと同じなんですね。