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

我在一个大型网站上工作，该网站有很多自定义（特定于页面的js）。有一个main.js和特定于页面的.js文件。有没有更好的方法可以使用以下模式

如何重新考虑使用ajax的多个方法

我目前以内联方式分配所有onclick事件，例如onclick=“MYSITE.message.send…”-有更好的方法吗？创建多个$（“#按钮”）。单击（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");  
                }  
            }  
        });  
    }  
}  

var MYSITE=MYSITE？MYSITE:{}；
var MYSITE{
书签：{
添加：函数（contentId，userId）{
变量数据={
contentId:contentId，
userId:userId
};  
$.ajax（{
url:“/rest/bookmarks/”，
类型：“post”，
数据：数据，
完成：函数（响应）{
if（response.error）{
警报（响应.错误）；
}否则{
警惕（“成功”）；
}  
}  
});  
}  
},  
信息：{
/*  */  
发送：函数（contentId，userId）{
变量数据={
contentId:contentId，
userId:userId
};  
$.ajax（{
url:“/rest/bookmarks/”，
类型：“post”，
数据：数据，
完成：函数（响应）{
if（response.error）{
警报（响应.错误）；
}否则{
警惕（“成功”）；
}  
}  
});  
}  
}  

}

---

首先，直接分配

onclick=“

是不好的做法方法并没有那么多的工作，但即使是这样，它也更干净，更值得推荐。它将HTML标记与JS功能分开，使以后更容易更改内容。这是您应该重构的第一件事

我使用JS所做的是创建一个包含所有类/核心功能的主库JS文件。然后在特定页面上使用内联

标记来调用将链接连接到函数的方法

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

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

在页面正文中：

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

$（initLinksOnPageX）；

---

同样，这可以使您的标记远离任何JS代码，因此您的JS相关更新只发生在一个文件中（或更少）。通过这种设置，您不应该严格需要特定于页面的JS文件，尽管从组织上讲这可能是有意义的——我不知道您的JS到底有多大。

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

<div id="bookmarks"> <a href="#">BOOKMARK</a> </div> $("div#bookmarks").delegate("a", "click", function(){ MYSITE.message.send('1234', '1234'); }); $（“div#bookmarks”）。委托（“a”，“click”，function（）{ MYSITE.message.send（'1234'，'1234'）； }); 您还可以动态获取“contentId”和“userId”。

我的想法：

这取决于许多因素，但是如果特定于页面的代码是“大”的，那么最好将其分开。但是，如果只是几行，而我们不是说数千页，那么将其全部集中到main.js中可能不是一个大问题

我不太熟悉ajax，所以我将继续评论如何“重构”

如果可以循环onclick事件的分配，那么不内联执行它们将节省大量工作

---

我想把我的自定义功能包装成一个jQuery插件。

碰巧我最近完成了一篇关于这个问题的一个方面的博客文章：我同意你的观点，但是不会在线点击点击要比$'（'{按钮'）快。点击（函数{}），你说的“更快”是什么意思？"? 就性能而言，两者之间的差异可以忽略不计。您应该阅读有关UnobtrusiveJS以及推荐它的原因：--您不使用内联CSS，同样的概念也适用于JS。