Question

这些天我发现自己将很多代码放在$(document).ready()中，这对我来说似乎并不干净。例如，如果我创建的东西将通过ajax查询我的数据库并返回它并将其附加到我的列表中，我会做这样的事情：

$(function(){
   //Initialize my DOM elements
   $MyList = $("#MyList"),
   $MyButton = $("#MyButton");

   //Add my Click event
   $MyButton.click(function(){
      $.ajax({
         type: 'POST',
         url: "/lists/getmylist",
         contentType: "application/json",
         success: function(results){
            //Parse my results and append them using my favorite templating helper
            var jsonResults = $.parseJSON(result);
            $MyList.mustache("my-template", jsonResults);
         }
      });
   })
});

现在我知道这是一个小例子，但是当我有多个点击事件，ajax请求等时，它开始变得非常庞大和混乱。这一切最终都准备好了。我知道我可以将所有的ajax请求放在一个外部的javascript文件中，以帮助它变得更干净，但这个架构一般都可以吗？看起来真的很乱。我见过其他人使用插件架构或初始化函数。我通常会在我的所有页面的底部准备好这个文档，并且只需要输入任何必要的内容来使我的页面正常工作。这是构建我的js的好方法吗？

Answer 1

我认为添加一些Model对象和一般面向对象的编程主体可能会有很长的路要走。如果你破坏了数据提取并存储到模型类中，它应该会有很大的帮助。

以下是一些链接，可以让您开始考虑使用Javascript进行OO。

Writing Object-Oriented JavaScript

Javascript Design Patterns

Javascript: prototypal inheritance Javascript: prototypal inheritance 2

另一件可能有用的事情就是将Javascript分解为多个文件。一个用于全局脚本，可以通过附加到所有页面的标题和每个需要它的页面的脚本包含在内。

Answer 2

也许Backbone.js（或其中一个frameworks）可能是你正在寻找的救援的一部分。

我发现Backbone非常有帮助组织一些继承的意大利面。您的出发点可能是将大量文档转换为骨干视图（或多个）

通过将视图，集合，模型分离为单个文件来组织脚本，然后将它们捆绑并缩小为一个文件，这样浏览器只需要发出一个请求而不是多个请求。

ASP.NET MVC4可以为你做bundling，它在MVC3上的工作方式也类似

这只是一个简单起点的例子，有更多高级技术（例如AMD，require.js）来减少每页的脚本大小，但是通过缓存和gzip，我发现单个所有脚本包都没问题对于很多情况。

至于你的例子，这是一个可能的骨干实现

请记住将您的代码命名为...

var app = app || {};

$(function ($) {

// depending on your server setup you might be able to just override the url
// and get away with what you want. Otherwise you might look into overriding
// the save/fetch or sync methods of the collection
app.MyListCollection = Backbone.Collection.extend({
    url: '/lists/getmylist'

});


app.MyListView = Backbone.View.extend({

//bind the view to the existing element in the HTML.
    el: '#MyList',

    // your mustache template 
    template:$('#list-template').html(),

    // hook up your event handlers to page components
//(within the context of your el)
    events: {
        'click #MyButton': 'onMyButtonClick'
    },

    //called on object creation.
    initialize: function () {

//you could create a collection here or pass it into the init function
        this.collection = new app.MyListCollection();

        //when the collection is changes, call the render method
        this.listenTo(this.collection, 'reset', this.render);
    },
    // render is named by convention, but its where you would "redraw" your view and apply your template
    render: function () {

    this.$el.html(
        Mustache.render(
            this.template(this.collection.toJSON())));

        return this;
    },

    //your click handler
    onMyButtonClick: function(e){
        this.collection.fetch();
    }

});
});

使用您的doc准备好启动您需要的任何骨干功能并使用它来引导您的javascript与您可能拥有的任何服务器端数据。

$(function () {

// create an instance of your view
new app.MyListView();

//example bootstrap using razor
app.title = @Model.Title;
});

正确构建我的jquery / javascript

2 个答案: