社内で唯一（？）の8 tab派。agoです。
suzunari.js、sisso.jsと、最近いくつかJSのライブラリを公開する機会があったので、そのとき使ったライブラリを作るときに便利なコードを紹介したいと思います。
1 script tagからのパラメータ読み込み
外部からの指定によりライブラリ内の動作が変わる場合、script tagから値を指定できると設定のための記述要素を減らすことができます。 （ファイル名を静的に指定している理由に関しては「最後のscript tagの取得方法」をご覧ください）
<script type="text/javascript"http://example.com/path/script_file_name.js#param1=value1¶m2=value2"></script>
var param = (function (file_name) {
var scp = document.getElementsByTagName('script');
var reg = new RegExp(file_name);
var i = scp.length;
var result = {};
while (i--) {
if (!reg.test(scp[i].src.toLowerCase())) continue;
var sp = scp[i].src.split('#');
if (sp.length === 1) return;
var pair = sp.pop().split(/[&;]+/);
var j = pair.length;
while (j--) {
var k_v = pair[j].split('=');
if (k_v.length === 2) result[decodeURIComponent(k_v[0])] = decodeURIComponent(k_v[1]);
};
break;
};
return result;
})('script_file_name.js');
また、同時に既存の変数から初期値を読み込むようにすれば、より柔軟な指定が可能になります。 （「DOM内に既定のIDがある場合動作を変える」というのもありだと思います）
2 setIntervalを使った状態監視
外部ファイルを読み込む場合や、自作のアニメーションの終了を検知する、ブラウザが通知しない状態をイベントとして受け取りたいなど、簡単な状態監視を行いたい場合があると思います。
(function (target, callback) {
var self = this;
if (window[target]) return callback.call(self);
var interval = setInterval(function () {
if (!window[target]) return;
callback.call(self);
clearInterval(interval);
}, 50);
})('var_name', function () { alert(var_name + ' true'); });
setTimeout(function () {
window.var_name = true;
}, 1000);
上記コードにより一時的に変数を監視することができます。 （一秒経過後にalertが実行されます）
3 $.dataを使ったスタイルの保存
これはjQueryを使う前提になりますが、.dataを使用することにより要素のstyleを保存することができます。
(function ($) {
var name_space = 'save_style';
$.fn[name_space] = function () {
$(this).each(function () {
var result = {};
var style = $(this).get(0).style;
$.each(style, function (key, val) {
result[val] = style[val];
});
$(this).data(name_space, result);
});
return this;
};
$.fn['load_style'] = function () {
$(this).each(function () {
$(this).attr('style', '');
$(this).css($(this).data(name_space));
});
return this;
};
})(jQuery);
ライブラリから既存の要素のstyleを変更する場合、そのまま上書きや削除を行うと先に指定されていたstyleを破壊してしまいますが、上のjQuery Pluginを使用することにより先に指定されていたstyleを復元することができます。
カヤックではjavascriptに詳しい方や、JSライブラリ作成経験のある技術者を募集しています！
関連記事
blogparts framework suzunariを作成しました。
