Top > 開発ガイド > コンポーネント開発Tips集 > JavaScript先読み化対応

JavaScript先読み化対応

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

Rubricksでは多くのJSを利用しています。画面遷移の度にそれらを全て読み直すとパフォーマンス低下の原因になります。そこで、RubricksではJSを予め読み込むことで読み直しの発生を抑制しています。

ディレクトリ構成

先読みに対応したRubricks上で動作するコンポーネントでは、各コンポーネント毎に「_preload.rhtml」というファイルを準備する必要があります。配置は下記の通りです。

RAILS_ROOT
└components
  └bbs
    └preload
      └_preload.rhtml

_preload.rhtmlのイメージ

_preload.rhtmlは下記のようなイメージになります。

<%= stylesheet_link_tag     '/stylesheets/components/sample/style' %>
<%= javascript_include_tag  '/javascripts/components/sample/bbs' %>

<style type="text/css">
  .sample_class1 {
    color:#808080;
  }
  .sample_class2 {
    text-align:left;
  }
</style>

<script tyle="text/javascript">
  Object.extend(rubricks.sample, {
    count: 0,
    function_alert: function(str) {
      alert(it);
    }
  });
</script>

下記のような内容が書かれています。

• 外部CSSの読み込み宣言
• 外部JSの読み込み宣言
• CSSの定義
• JSの定義

逆に、下記のような内容は_preload.rhtmlに書き出さずに、各rhtmlに記述します。

• onclickなどに記述されたJS
• JSの実行文

    <span onclick='rubricks.bbs.clear_tray'>clear</span>
    <script>
      rubricks.sample.new_window = new Window('dom_name_of_window');
      rubricks.sample.new_window.open();
    </script>
  

パッケージ名の付与

関数と変数（及びクラス）の前にはパッケージ名を付与します。下記のルールに従ってください。 JSでは「パッケージ名」という概念は一般的ではありませんが、RubricksではJavaなどの慣例にならってそう呼ぶことにしています。

パッケージ名の付与には下記2つの意味があります。

• コンポーネント間で関数名が衝突しないようにする
• グローバル変数として宣言された「rubricks」や「bbs」に関数を入れることでどこからでも関数へアクセスできるようにする

2つ目の意味は分かりづらいかもしれないので、気になる方は捕捉をご覧下さい。

rubricks.【コンポーネント名】.【任意の関数名】

例：

Object.extend(rubricks.sample, {
  SampleHandler: Class.create(),
  count: 0,
  execute_it: function() {
    alert('it');
  },
});

先読みファイルの分割

JSの量が多い場合などには下記のように先読みファイルを分割することができます。

_preload.rhtml

<%= render_preload_partial :sample_access %>
<%= render_preload_partial :sample_admin %>

関数の宣言とスコープ

関数内でのみ利用される変数には「var」をつけます。

Object.extend(rubricks.sample, {
  executer: function(count) {
    var plus_five = count + 5;
    alert(plus_five);
  }
});