最近のJavaScriptのテンプレ #JavaScript

最近下のように書いてる。変遷としては、若干サーバーサイドJavaScriptを意識しつつ徐々に離れていった感じ。

即時関数を2重にして、トップには何も書かない
外側の即時関数の中には、'use strict'を書く
- 非strictモードのコードが含まれているとどっちのモードになるかわからないため。負の遺産が含まれ(ry
- だいたいjQuery使うので、外側の即時関数の書き方はjQuery boilerplateのを参考にしている(jQuery使わない場合は、第二引数を抜かす)
内側の即時関数に実際の宣言を書く
- app.jsか何か設定用のスクリプトでアプリケーション用名前空間としてグローバルオブジェクトを宣言しておく(window.App = {};など)
- 即時関数内で宣言されたプロパティやメソッド、関数などを返り値にして、グローバルオブジェクトに展開する

functions.js

/**
 * functions.js - Utility functions.
 */

;(function(global, $, undefined) {
  'use strict';

  var App = global.App;  // 名前空間は宣言済み(app.jsのような設定用のスクリプトか何かで宣言する)

  App.functions = (function() {
    // プライベートな関数や変数が必要な場合は、返り値(module)に含まない様に、この辺に書く
    // […]

    var module = {
      /**
       * compact array by removing 0, false, null, '' and undefined.
       *
       * @param {Array} array An source array.
       * @return {Array} The compacted array.
       */
      compact: function(array) {
        var arr = $.isArray(array) ? array : [array];
        return $.grep(arr, function(val, i) {
          return !!val;
        });
      }
    };

    return module;  // この例ではオブジェクトリテラルだが、コンストラクタを使っている場合は、コンストラクタを返すようにする。
  }());
}(this, jQuery));

app.js

/*!
 * app.js - Application root.
 */

;(function(global, undefined) {
 'use strict';

 global.App = {
  DEFAULT_KEYWORD: '@iphone_dev_jp'
 };

}(this));

bootstrap.js

/*!
 * bootstrap.js - Setup and Load application.
 */

;(function(global, $, undefined) {
  'use strict';

  var App = global.App;

  // Mixin helper functions to View.
  $.extend(App.View.prototype, App.viewHelpers);

  $(function() {
    var view = App.View.getInstance();
    view.initialize({collection: new App.Tweets()});
    view.registerEvents().search(App.DEFAULT_KEYWORD);
  });
}(this, jQuery));

最近のJavaScriptのテンプレ

参考