Question

假设我有一个包含三个资源的基本Rails应用：authors，blogs和books。我使用scaffold命令创建了资源，因此每个资源都有自己的JavaScript文件：authors.js，blogs.js和books.js。

我看到了几个不同的实现，我们可以如何使JavaScript的全局命名空间保持干净，并保持我们的页面特定的JavaScript彼此分离，这样它们就不会发生冲突。

这是我设计的实现。它似乎做我想要的，但我想得到反馈，如果由于某种原因这被认为是一个糟糕的实施/坏习惯。如果人们有更好的方法，我也欢迎其他实施。

对于 app/views/layouts 中的所有布局，请为body标记指定此内容：

<body class="<%= controller_name %>">

对于JavaScript代码：我们知道，Rails中的所有JavaScript最终会被整合到一个大的JavaScript文件中。出于可读性目的，我从每个单独的JavaScript文件中提取了所有JavaScript并将它们放在一起（在应用程序中，我将JavaScript代码保存在每个相应的js文件中）：

var authorsjs = {      
init: function(){
    alert("hello from authorjs");
    // all author bindings specified here
    $("#oneEl").on('click', function(){
        alert("oneEl was clicked");
    });
},
someAuthorFunc: function(){
    alert("someAuthorFunc run");
}
};

$(document).on('page:change', function(){
if($('body').hasClass("authors") == true ){
        authorsjs.init();
}
});


var booksjs = {      
init: function(){
    alert("init booksjs run");
    // all books bindings specified here
    $("#twoEl").on('click', function(){
        alert("twoEl was clicked");
    });
},
someBookFunc: function(){
    alert("someBookFunc run");
}
};

$(document).on('page:change', function(){
if($('body').hasClass("authors") == true ){
        authorsjs.init();
}
});

正如预期的那样，这些点击事件不适用于与blogs关联的视图，绑定到#oneEl的事件仅适用于与作者关联的视图，并且事件绑定到#twoEl仅适用于与书籍相关的观点。

Answer 1

根据反馈做出回答

以下作品。我正在使用jquery-turbolinks gem。每个控制器的js都封装在一个对象中。对于每个页面请求，都会检查body类，并运行相应的对象init方法。我还继续创建了一个someGlobals对象，它为所有控制器提供了通用的js代码。

此代码按预期工作，但非常混乱。我希望有一些方法来清理前端代码。如果您有任何建议，请告诉我：

$(document).ready(function(){
    var authorsjs = {      
        init: function(){
            alert("hello from authorjs");
            // all author bindings specified here
            $("#oneEl").on('click', function(){
                alert("oneEl was clicked");
            });
        },
        someAuthorFunc: function(){
            alert("someAuthorFunc run");
        }
    };

    if($('body').hasClass("authors") == true ){
        authorsjs.init();
    }
});


$(document).ready(function(){
        var booksjs = {      
        init: function(){
            alert("init booksjs run");
            // all books bindings specified here
            $("#twoEl").on('click', function(){
                alert("twoEl was clicked");
                booksjs.someBookFunc();
            });
        },
        someBookFunc: function(){
            alert("someBookFunc run");
        }
    };

    if($('body').hasClass("booksjs") == true ){
        booksjs.init();
    }
});


$(document).ready(function(){
    var blogsjs = {
        init: function(){
            blogsjs.formValidations();
        },
        formValidations: function(){
            $('#blog_title').on("click", function(){
                console.log($(this).val());
                $('p').css("color", "green");
                $(this).css("color", "blue");
                alert("hello");
            });
            $('#blog_title').on("keypress", function(){
                var value = $(this).val();
                $("#preview").text(value);
            });
        }

    };

    if($('body').hasClass("blogs") == true){
        blogsjs.init(); 
    }   
});



$(document).ready(function(){
    var someGlobals = {
        init: function(){
            $('p').on('click', function(){
                alert("Global: P was clicked somehwere!");
            })
        }

    };
    someGlobals.init();
});

面向对象的方式在Rails中分离特定于页面的JavaScript

1 个答案: