jGlycyの構造

jGlycyのソースコードは以下の通りです。(バージョンは1.0rc)

1 (function($, prefix, jg){
2   $[jg] = $({});
3   $[jg].extend({
4     invoke: function(nodes) {
5       nodes.each(function(){
6         var node = this;
7         var funcs = $(node).attr(prefix).split(',');
8         $(funcs).each(function(){
9           var arg = $(node).attr(prefix + ":" + this);
10          if(arg) {
11            eval('var options = {' + arg + '}');
12          } else {
13            var options = {};
14          }
15          if($.fn[this]) {
16            $(node)[this](options);
17          }
18        });
19      });
20    },
21    invokeElement: function(node) {
22      $[jg].invoke($("*[" + prefix + "]", node));
23    }
24  });
25  $(document).ready(function(){
26    $[jg].invokeElement(document);
27  });
28 })(jQuery, "jg", "jg");

グローバル領域を汚染をしないように、jQueryにjgというプロパティを設けて、
その中にjGlycyの動作に必要な関数を定義してあります。

このプロパティ名は28行目の第三引数を変えることにより、自由に変更することができます。

jGlycyで定義してある関数は2つ

  • invoke()
  • invokeElement()

invoke()

jg属性とjg_関数名属性をパースして引数で与えられた要素に 指定プラグイン機能を割り当てる関数。

jgという文字列は、28行目の第二引数を変更することにより、自由に定義することができる。

invokeElement()

指定した要素内にある要素をinvokeし、jg属性を持つ要素を評価する関数。
HTMLが読み込まれた際、document指定でこの関数が実行される。(26行目)

Ajax等で、HTMLが更新された際の要素再評価などにも使用できる

最終更新: Y/m/d H:i