Javascript：処理の共通化メモ

JQueryの処理共通化メモ
※モバイルでも利用可能です。

js, CSSファイルの一元管理

共通して読み込みたいjsやcssなどを記述、少し改良すればmeta情報の書き出しなども可能

loader.js

// 画面動作に必要な外部ファイル
(function() {
  var htmlRoot = 'view';
  var jsRoot = '/js';
  var cssRoot = '/css';
  var reg = new RegExp('^(.+?)://(.+?):?(/.*)?$');
  var s = reg.exec(location.href);
  var url = s[3];
      url = url.slice(1);
      url = url.slice(0, url.indexOf('/'));
      url =  s[1] + '://' + s[2] + '/' + url;
  var baseDir =  jsRoot + '/lib';
  var jsfiles = [
        url + baseDir + '/jquery.js',
        url + baseDir + '/transparency.min.js',
        url + baseDir + '/underscore.min.js',
        url + baseDir + '/backbone.min.js',
        url + baseDir + '/require.min.js',
        url + jsRoot  + '/app/base/base.js',
      ],
      css = [
        url + cssRoot + '/common.css',
      ];
  /**
   * CSSファイルの書き出し
   */
  css.forEach(function(path) {
    document.write('<link media="all" rel="stylesheet" href="' + path + '" />');
  });
  /**
   * jsファイルの書き出し
   */
  jsfiles.forEach(function(jsfile) {
    document.write('<script src="' + path + '"></script>');
  });
}());

JQuery#Ajax()のWait処理の一元化

ajax.wait.js

// JQuery.ajaxをオーバーライド
$(function() {
  var _ajaxFunction = $.ajax;
  $.ajax = function() {
    $.blockUI({ 
      message : '<div><img src="ajax-loader.gif"></div>',
      css     : { border: 'none', background: 'none' }
    });
    return _ajaxFunction.apply($, arguments).always(function(){ $.unblockUI(); });
  }
});

実装側は通常と同じに利用してwaitがかかります。

<script src="jquery.js" />
<script src="jquery.blockUI.js" />
<script src="ajax.wait.js"></script>
<script>
  $(function() {
    $.ajax('http://test.com',{
      success : function(){},
      error : function(){}
    });
  });
</script>

wait画像はこちらで自動で作成できます。
http://ajaxload.info/

yahooトップページにあるようなサイトテーマの変更

まず、こちらでテーマを作成
http://jqueryui.com/themeroller/

次に先ほどのloader.jsを追記します。
loader.js( functionの中に追記 ）

// テーマの設定（リクエストパラメータ、cookie、デフォルトの順番で取得します）
var default = 'blitzer';
var themes = location.href;
if (themes.indexOf('themes=') > -1) {
  themes = themes.slice(themes.indexOf('themes='));
  themes = themes.slice(themes.indexOf('=') + 1);
} else {
  themes = document.cookie;
  if (themes.indexOf('themes=') > -1) {
    var position = themes.lastIndexOf('themes');
    var startIndex = position + 'themes='.length;
    var endIndex = themes.length;
    themes = themes.slice(startIndex, endIndex);
    if (themes.indexOf(';') > -1) {
      position = themes.indexOf(';');
      startIndex = position;
      endIndex = themes.length;
      themes = themes.slice(0, startIndex);
    } else {
      // default
      themes = default;
    }
  } else {
    // default
    themes = default;
  }
}
document.cookie = ('themes=' + themes + ';expires=Tue, 31-Dec-2030 23:59:59;');
document.write(cssTagWrite(url + '/themes/' + themes + '/jquery-ui.min.css', time));
document.write(cssTagWrite(url + '/themes/' + themes + '/jquery.ui.theme.css', time));
document.write(cssTagWrite(url + '/css/lib/loadingbar/loadingbar.start.css', time));

function cssTagWrite(path, time) {
  return '<link media="all" rel="stylesheet" href="' + path + '" />';
}

テーマを変更する場合はURLパラメーターにテーマを指定する

  <a href="#themes=blitzer" class="theme"><div></div></a>

テーマはcookieに保存します。

※スクラッチする箇所については、cssをjquery UIに準拠して実装してください。
　（ui-**** のcss Chromeなどで「要素の検証」でcssをみれば簡単です）

エンタープライズ向けJavascriptについて

独自でエンタープライズ向けのJavascriptフレームワーク(Backbone.jsベース)を作成しましたので、今度はそちらをUPします。