我将介绍一些简单的事情,可能有用,也可能没有用。有些可能很明显,有些可能非常深奥。
步骤1:将代码分隔成模块
将代码分隔成多个模块化单元是非常好的第一步。将能够“一起”工作的内容放在它们自己的封装单元中。现在不用担心格式,保持内联即可。结构是稍后的重点。
所以,假设你有一个页面像这样:
![enter image description here](https://istack.dev59.com/YaaJ6.webp)
将所有与页眉相关的事件处理程序/绑定器放在其中是有意义的,以便于维护(而不必浏览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