正确构建我的jquery/javascript

现在我发现自己在$(document).ready()中放了很多我的代码，这对我来说看起来并不干净。例如，如果我创造的东西，将通过AJAX查询我的数据库，并将其返回并添加到我的名单，我会做这样的事情：正确构建我的jquery/javascript

$(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的好方法吗？

来源

2013-03-15 anthonypliu

如果您愿意，我可以将其迁移到我们的Code Review测试版网站。你可能会在那里得到更好的答案。 @如果你愿意的话，回复我。 – Kev 2013-03-16 17:39:46

我认为增加一些模型对象和一般的面向对象的编程原则可能会在这里有很长的路要走。如果你打破了你的数据提取和存储模型类，它应该有很大的帮助。

下面是一些应该让你开始考虑使用Javascript进行面向对象的链接。

Writing Object-Oriented JavaScript

Javascript Design Patterns

Javascript: prototypal inheritance Javascript: prototypal inheritance 2

另一件事，可能助阵会打破的Javascript成多个文件。一个用于全局脚本，可能通过附加到所有页面的标题以及您需要它的每个页面的脚本包含在内。

来源

2013-03-15 00:07:45

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

我发现骨干非常有帮助组织一些遗传意大利面条。你的出发点可能是转换您的海量文档准备到骨干视图（或倍数）

通过分离出来的意见，集合，型号为单独的文件，然后捆绑并一起再压缩成一个单一的文件组织您的脚本，以便浏览器只需要提出一个请求而不是很多。

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(); 
    } 

}); 
});

使用您的文档准备旋转起来不管骨干功能，你需要，并用它用您可能拥有的任何服务器端数据引导您的JavaScript。

$(function() { 

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

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

来源

2013-03-15 14:42:55 HaveThunk

正确构建我的jquery/javascript

回答

相关问题