使用jQuery時如何更好的組織代碼？

前端頁面中，經常會寫很多事件綁定或者其它jQuery代碼，但是寫多了之後，覺得會很亂，不方便管理或者維護。想問一下在前端開發比較有經驗的大牛，在使用jQuery的時候，怎麼寫JS，來保證方便管理和維護，以及更好的組織代碼？

比如通常寫的jQuery會這樣寫：

$(function(){
$("#id").click(function(){});
})


然後剛剛搜索了一些資料，模塊化的一種方式，比如：

var App = {
init:function(){
$("#id").click(function(){});
}
}
$(function(){
App.init();
})


想問一下前端開發比較有經驗的人，在對於使用jQuery的前端中，如何組織代碼，更方便管理和維護呢？

---

這個問題問的有點喧賓奪主了，這其實和jq無關，是js的代碼組織問題，加上jq其實沒有任何影響

---

一位前輩教的，可以參考下：

(function() {
var modules = {};

modules.bootstrapFileInput = function() {
};

modules.inputCheck = function() {
};

modules.imagePreview = function() {
};

modules.jQueryFormData = function() {
};

$(function() {
modules.bootstrapFileInput();
modules.inputCheck();
modules.imagePreview();
modules.jQueryFormData();
});

}).call(this);


---

不是大牛，但我的方法很簡單，拿到什麼框架，看看框架自己的源代碼，看看第三方擴展的源代碼，然後遵循他們的標準來，即可。所有語言，通用。

---

用requirejs，可以享受ood模式寫js

---

前面幾樓說這問題和jq無關，確實沒錯，但不可否認，題主所述的亂多見於以jq和jq插件搭建的前端。可能因為jq太強大了，一個鏈式調用把很多事情都做完了，就不願意去分開寫，去組織了。

不管什麼新需求，往

$(document).ready(function(){})


裡面扔一行代碼就搞定了。

我覺得如果自己有能力和意識，或者同事們之間有統一的模塊化方法的，可以按樓上一些做法自己模塊化，覺得自己搞難度大又有代碼潔癖就用backbone吧。

---

這關jquery 啥事？

---

我來拋磚引玉

file: base.app.js
var app = {
init:function(){
this.binds();
},
binds:function(){
},
clickDemo:function(jo){
// jo..
},
parse:function(){
// come on.
},
}

file: project/appc.js
var appc = $.extend({},app,{
binds:function(){
var that=this;
$("#demo").click(function(){that.clickDemo($(this))});
}
});
$(function(){
appc.init();
appc.parse();
})


或許還可以再揉一揉。

反正我們的前端代碼已經不那麼好看了。嗯。

---

(function () {
var app = {
foo1: 1,
foo2: 2,
changeFoo1: function () {
this.foo1 = 3;
this.changeFoo2();
},
changeFoo2: function () {
this.foo2 = 4;
}
};
$(function() {
app.changeFoo1();
console.log(app.foo1,app.foo2);
})
})();


1：一個全局變數都沒有暴露；

2：用類似 面向對象 的方式寫代碼；

---

後面那種。

---

推薦閱讀：