Question

我正在开发一个拥有大量自定义（特定于页面的js）的大型网站。有一个main.js和page-specific.js文件。有没有更好的方法可以使用以下模式？
如何重新计算使用ajax的多个方法？

我目前分配内联的所有onclick事件，例如 onclick =“MYSITE.message.send ... - 它有更好的方法吗？创建多个 $（”＃button “）.click（function（）{}）; 似乎更多的工作......

var MYSITE = MYSITE ? MYSITE: {};
var MYSITE {  
bookmark: {
    add: function(contentId, userId) {  
        var data = {  
            contentId: contentId,  
            userId: userId  
        };  
        $.ajax({  
            url: "/rest/bookmarks/",  
            type: "post",  
            data: data,  
            complete: function(response) {  
                if (response.error) {  
                    alert(response.error);  
                } else {  
                    alert("success");  
                }  
            }  
        });  
    }  
},  
message: {  
    /* <a onclick="MYSITE.message.send('1234', '1234');" href="javascript:void(0);">BOOKMARK</a> */  
    send: function(contentId, userId) {  
        var data = {  
            contentId: contentId,  
            userId: userId  
        };  
        $.ajax({  
            url: "/rest/bookmarks/",  
            type: "post",  
            data: data,  
            complete: function(response) {  
                if (response.error) {  
                    alert(response.error);  
                } else {  
                    alert("success");  
                }  
            }  
        });  
    }  
}

}

Answer 1

您可以使用jquery委托方法如果您的div元素带有标签

<div id="bookmarks">
<a href="#">BOOKMARK</a>
</div>

$("div#bookmarks").delegate("a", "click", function(){
    MYSITE.message.send('1234', '1234');
});

您可以动态获取'contentId'和'userId'。

Answer 2

首先，直接分配onclick=""是不好的做法。使用jQuery的click()方法并没有那么多工作，但即使它是，它更清洁，更推荐。它使您的HTML标记与JS功能分开，并使以后更容易更改。这是你应该重构的第一件事。

我用JS做的是创建一个包含所有类/核心功能的主库JS文件。然后，我在特定页面上使用内联<script>标记来调用连接函数链接的方法。

在全局app.js文件中，我将有一个函数：

function initLinksOnPageX() {
  $('#button').click(function() { MYSITE.message.send('1234', '1234'); });
  /* ... setup any other events ... */
}

在页面正文中：

<script type="text/javascript">
  $(initLinksOnPageX);
</script>

同样，这可以使您的标记清除任何JS代码，因此您的JS相关更新发生在一个文件（或更少）中。使用此设置，您不应该严格需要特定于页面的JS文件，尽管从组织上讲它可能有意义 - 我不知道您的JS究竟有多大。

Answer 3

我的想法：

这取决于很多因素，但如果页面特定代码是“大”，那么最好将它分开。但是，如果它只是几行，而我们不是在谈论数千页，那么将它们全部集中到main.js可能不是一个大问题。
对ajax不太熟悉，所以我将继续评论如何“重构”。
如果你可以循环你的onclick事件的分配，那么不进行内联就可以为你节省大量的工作。

Answer 4

我会考虑将自定义功能包装为jquery插件。

JavaScript代码组织建议/代码审查

4 个答案: