5

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

  2. 如何重构使用 ajax 的多种方法？

  3. 我目前内联分配所有 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");  
                }  
            }  
        });  
    }  
}

    }

4

4 回答 4

2

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

<div id="书签">
<a href="#">书签</a>
</div>

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

您可以动态获取“contentId”和“userId”。

于 2010-07-27T20:08:32.450 回答
1

首先，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 到底有多大。

于 2010-07-27T20:06:41.267 回答
0

我的想法：

  1. 这取决于许多因素，但如果页面特定代码“大”，那么最好将其分开。但是，如果它只有几行，而且我们不是在谈论数千页，那么将它们全部归入 main.js 可能不是什么大问题。

  2. 对 ajax 不是很熟悉，所以我将继续评论如何“重构”。

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

于 2010-07-27T20:10:38.467 回答
0

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

于 2010-07-27T20:23:41.800 回答