jQueryを使ったモジュールパターンと実行のメモ : JavaScript

Tweet

Pocket

jQuery実行のメモ。

index.html

<script src="jquery.js></script>
<script src="app.js"></script>
<script src="example"></script>

app.js

/* トップレベル名前空間定義 */
function App() {
}
App.namespace = function() {
}

example.js

jQuery(function($) {
    var example = App.namespace('Example');
    (function() {
        // Example実装
        function some() {
            // パプリックメソッド
        }
        example.some = some;
    }())
});

index.html

<script src="jquery.js></script>
<script src="app.js"></script>
<script src="example"></script>
<script>
    var example = App.namespace('Example');
    example.some() /* エラー  exampleはDOM構築後のjQueryスコープで実装されるのでsomeメソッドundefinedのエラー*/
</script>

jQuery(function($) {})で実行する。

<script src="jquery.js></script>
<script src="app.js"></script>
<script src="example"></script>
<script>
    jQuery(function($) {
    var example = App.namespace('Example');
    example.some() /* 正常 */
    });
</script>