我将介绍一些可能会或可能不会对您有所帮助的简单事情。有些可能很明显，有些可能非常奥秘。
步骤1：对代码进行分区
将代码分成多个模块化单元是非常好的第一步。将“一起”工作的内容汇总起来，然后将它们放在自己的小包装单元中。暂时不用担心格式，保持内联。该结构是稍后的内容。
因此，假设您有一个这样的页面：
进行分区很有意义，以便所有与标头相关的事件处理程序/绑定程序都在其中，以便于维护（并且不必筛选1000行）。
然后，您可以使用Grunt之类的工具将JS重新构建回一个单元。
步骤1a：依赖性管理
使用RequireJS或CommonJS之类的库来实现称为AMD的东西。异步模块加载允许您明确声明代码所依赖的内容，然后可以将库调用卸载到代码中。您可以从字面上说“这需要jQuery”，AMD会加载它，并在jQuery可用时执行您的代码。
这也有一个隐藏的瑰宝：库加载将在DOM准备好后的第二秒而不是之前完成。这不再停止页面的加载！
步骤2：模块化
看到线框了吗？我有两个广告单元。他们很可能会共享事件监听器。
在此步骤中，您的任务是确定代码中的重复点，并尝试将所有这些点综合到模块中。目前，模块将涵盖所有内容。我们将继续进行拆分。
此步骤的整体思路是从步骤1开始，删除所有复制粘贴，然后将它们替换为松散耦合的单元。因此，与其具有：
ad_unit1.js
$("#au1").click(function() { ... });
ad_unit2.js
$("#au2").click(function() { ... });
我会有：
ad_unit.js：
var AdUnit = function(elem) {
this.element = elem || new jQuery();
}
AdUnit.prototype.bindEvents = function() {
... Events go here
}
page.js：
var AUs = new AdUnit($("#au1,#au2"));
AUs.bindEvents();
除了摆脱重复之外，它还使您可以在事件和标记之间进行划分。这是一个相当不错的步骤，我们将在以后进一步扩展。
第三步：选择一个框架！
如果您想进一步模块化和减少重复，那么周围有很多很棒的框架可以实现MVC（模型-视图-控制器）方法。我最喜欢的是Backbone / Spine，但是还有Angular，Yii等。
一个模型代表你的数据。
一个视图代表您的标记和与之相关联的所有事件
一个控制器代表了你的业务逻辑-换句话说，控制器告诉页用什么意见负载和什么型号。
这将是一个重要的学习步骤，但值得的是：它比起意大利面条更喜欢干净的模块化代码。
您还可以做很多其他事情，这些只是指南和想法。
特定于代码的更改
这是对代码的一些特定改进：
$('.new_layer').click(function(){
dialog("Create new layer","Enter your layer name","_input", {
'OK' : function(){
var reply = $('.dialog_input').val();
if( reply != null && reply != "" ){
var name = "ln_"+reply.split(' ').join('_');
var parent = "";
if(selected_folder != "" ){
parent = selected_folder+" .content";
}
$R.find(".layer").clone()
.addClass(name).html(reply)
.appendTo("#layer_groups "+parent);
$R.find(".layers_group").clone()
.addClass(name).appendTo('#canvas '+selected_folder);
}
}
});
});
最好这样写：
$("body").on("click",".new_layer", function() {
dialog("Create new layer", "Enter your layer name", "_input", {
OK: function() {
// There must be a way to get the input from here using this, if it is a standard library. If you wrote your own, make the value retrievable using something other than a class selector (horrible performance + scoping +multiple instance issues)
// This is where the view comes into play. Instead of cloning, bind the rendering into a JS prototype, and instantiate it. It means that you only have to modify stuff in one place, you don't risk cloning events with it, and you can test your Layer stand-alone
var newLayer = new Layer();
newLayer
.setName(name)
.bindToGroup(parent);
}
});
});
在您的代码前面：
window.Layer = function() {
this.instance = $("<div>");
// Markup generated here
};
window.Layer.prototype = {
setName: function(newName) {
},
bindToGroup: function(parentNode) {
}
}
突然之间，您就可以在代码中的任何位置创建标准图层，而无需复制粘贴。您正在五个不同的地方进行此操作。我刚刚为您保存了五个复制粘贴。
多一个：
//动作的规则集包装器
var PageElements = function(ruleSet) {
ruleSet = ruleSet || [];
this.rules = [];
for (var i = 0; i < ruleSet.length; i++) {
if (ruleSet[i].target && ruleSet[i].action) {
this.rules.push(ruleSet[i]);
}
}
}
PageElements.prototype.run = function(elem) {
for (var i = 0; i < this.rules.length; i++) {
this.rules[i].action.apply(elem.find(this.rules.target));
}
}
var GlobalRules = new PageElements([
{
"target": ".draggable",
"action": function() { this.draggable({
cancel: "div#scrolling, .content",
containment: "document"
});
}
},
{
"target" :".resizable",
"action": function() {
this.resizable({
handles: "all",
zIndex: 0,
containment: "document"
});
}
}
]);
GlobalRules.run($("body"));
// If you need to add elements later on, you can just call GlobalRules.run(yourNewElement);
如果您有非标准事件或创建事件，这是注册规则的一种非常有效的方法。当与发布/订阅通知系统结合使用时，当绑定到事件时，无论何时创建元素，都将触发此事件。忘了模块化事件绑定！