我将介绍一些简单的事情，可能有用，也可能没有用。有些可能很明显，有些可能非常深奥。
步骤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() { ... });
我将会有：
< p >
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（Model-View-Controller）方法的框架可供选择。我最喜欢的是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() {
var newLayer = new Layer();
newLayer
.setName(name)
.bindToGroup(parent);
}
});
});
在你的代码中早些时候：
window.Layer = function() {
this.instance = $("<div>");
};
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"));
如果您有非标准的事件或创建事件，那么这是一种非常有效的注册规则的方法。当与发布/订阅通知系统结合使用，并绑定到创建元素时触发的事件时，这也非常强大。轻松实现模块化事件绑定！
jQuery，例如你会发现jQuery.events，它将每个事件相关的方法和对象等进行了分组... - TecHunter