亜細亜ノ蛾 - Weblog

使い方

上記の jQuery_inc.js と同じような用途を想定している。ただし、この jQuery.fn.inc では、読み込む場所やファイル・要素は JavaScript ですべて指定できるようにした。(X)HTML を変更する必要はない。

jQuery_inc.js の解説ページと同じように <div class="jquery_inc lastChild"></div> の場所にファイルを読み込む場合を例として挙げる:

// 実際のコードの例
$('div.jquery_inc').inc({url: 'jquery_inc.html', selector: 'dd.recommended', option: 'child'});

// 引数は省略できる・順不同（option なしの例）
$('div.jquery_inc').inc({selector: 'dd.recommended p', url: 'jquery_inc.html'});

// すべてデフォルトの値で実行する
$('div.jquery_inc').inc();

// 仕様
$({target}).inc({ url: {url}, selector: {selector}, option: {(child|replace)} });

option の child, replace は、それぞれ jQuery_inc.js の child_inc, replace_inc に対応している。子要素のインクルード・インクルードした要素との置換、という感じ。オリジナルには file_inc というオプションもあるが、それは url で指定する。

引数を順番に指定する、よくある方法（$('div.jquery_inc').inc('jquery_inc.html', 'dd.recommended', 'child');）のほうが分かりやすいかも、と少し思ったり。引数を数や「オブジェクトか否か」で見分けて、両方の指定ができると便利かもしれない。

作った理由

jQuery を使っているのに (X)HTML に手を加える、という jQuery_inc.js の仕様がイヤだった。だから、jQuery プラグインで簡単にインクルードできるように変更したのだ。

意味のあるマークアップを完了した (X)HTML にはなるべく触らないようにしよう。強力な jQuery の力と CSS とを上手に使って、外見も内面も美しいページ・サイトを作りたいものだ。

inc プラグイン

元のスクリプトを書いた tinybeans さんは（さらに元ネタの？）inc プラグインを紹介している。

inc: A super-tiny client-side include JavaScript jQuery plugin

自分も利用していたし、とくに不具合も起こらなかった。しかし、環境によってはちゃんと UTF-8 で保存したのになぜか IE 6 で表示すると日本語が文字化けすることもあるようだ。

いい機会なので jQuery プラグインのコードは どんな感じか、改めて見てみる。おそらく、IE の場合は iframe で読み込むのが不具合の原因だろう。──思い出した。自分は この部分が気に入らず、「AJAX に対応していない場合は iframe で読み込む」とコードをやっつけで改造していたのだった。文字化けが起こらなかったのは、それか。

「AJAX 未対応のブラウザでは iframe」というアイデアは、なかなか良いと思う。たぶん、実装の例もあるだろうから、またちゃんと調べよう。

参考

jQuery プラグインを作成する際に、大いに参考にしたのが下の記事である。jQuery プラグインの作成方法を書いた日本語の記事の中で、とくに分かりやすかった。

jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpic

自分の探し方が悪いのか、jQuery プラグインの config について詳しく書かれた記事がほかに見つからない。何度もコードを読み直して、ようやく理解できた。

一度やってみると、既存の jQuery 用スクリプトをプラグインにするのは、じつに簡単であることが分かる。さて、次はどれを（勝手に）改造しようかな……。

JSLint

こざかしくも、jQuery.fn.inc は JSLint の「Good Parts」オプションに合格する。それが一番苦労した点、だったりして。

JSLint, The JavaScript Verifier

──英語のアヤシサは、JSLint では判定されなくて良かった。