jQueryでいいじゃないですか

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
(function($, window, document, undefined){
    'use strict';
    var
    console,
    modules,
    vars,

    setVars = function(){
        console = window.console;
        window.modules = modules = window.modules || {};
        window.vars = vars = window.vars || {};
    },

    defined = function(args){
        return args !== undefined;
    },

    exec = function(controller, action, $el){
        var func = modules[controller][action];
        if (defined(func)) {
            func($el);
        }
        else {
            console.error('function not defined. arguments:', arguments);
        }
    },

    execByElement = function(el, separator){
        var sep = defined(separator) ? separator : ':',
        $el = $(el),
        args = $el.data('run').split(sep);
        args.push($el);
        exec.apply(null, args);
    },

    autoExec = function(el){
        execByElement(el);
    },

    clickExec = function(e){
        execByElement(e.target);
    },

    onDocumentLoaded = function(e){
        console.debug('onDocumentLoaded e:', e);
        $('.js-click-exec').on('click', clickExec);
        $('.js-auto-exec').forEach(autoExec);
        $('.js-vars').forEach(function(el){
            $.extend(vars, $(el).data());
        });
        console.debug('vars:', vars);
    },

    onWindowLoaded = function(e){
        console.debug('onWindowLoaded e:', e);
        console.debug('window.modules:', window.modules);
        console.debug('window.vars:', window.vars);
    },

    showConsole = function($el){
        console.debug('showConsole $el:', $el);
        var args = $el.data();
        console.debug('args:', args);
    },

    init = function(){
        setVars();
        modules.main = {
            thanks: showConsole,
            fine: showConsole
        };
        $(document).on('DOMContentLoaded', onDocumentLoaded);
        $(window).on('load', onWindowLoaded);
    };
    init();
})(window.jBone, window, document);
1
2
3
4
5
6
<button class="js-click-exec" data-run="main:fine">main:fine</button>
<button class="js-click-exec" data-run="main:thanks" data-thanks="bye">main:thanks</button>
<div class="js-vars" data-hoge="hoge"></div>
<div class="js-auto-exec" data-run="main:fine"></div>
<div class="js-vars" data-huge="huge"></div>
<div class="js-vars" data-hige="hige" data-hage="hage"></div>
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy