ฉันจะพูดถึงสิ่งง่ายๆที่อาจช่วยคุณหรือไม่ก็ได้ บางคนอาจจะเห็นได้ชัดบางคนอาจมีความลึกลับอย่างมาก
ขั้นตอนที่ 1: แบ่งรหัสของคุณ
การแยกโค้ดของคุณออกเป็นหลาย ๆ หน่วยแบบแยกส่วนเป็นขั้นตอนแรกที่ดีมาก ปัดเศษสิ่งที่ "ทำงานร่วมกัน" และวางไว้ในหน่วยห่อเล็ก ๆ ของพวกเขาเอง ไม่ต้องกังวลเกี่ยวกับรูปแบบในตอนนี้เก็บไว้ในบรรทัด โครงสร้างเป็นจุดต่อมา
สมมติว่าคุณมีหน้าดังนี้:
มันจะสมเหตุสมผลที่จะแบ่งส่วนเพื่อให้ตัวจัดการ / ตัวยึดเหตุการณ์ที่เกี่ยวข้องกับส่วนหัวทั้งหมดอยู่ในนั้นเพื่อความสะดวกในการบำรุงรักษา (และไม่ต้องร่อนถึง 1,000 บรรทัด)
จากนั้นคุณสามารถใช้เครื่องมือเช่น Grunt เพื่อสร้าง JS ของคุณใหม่กลับเป็นหน่วยเดียว
ขั้นตอนที่ 1a: การจัดการการพึ่งพา
ใช้ห้องสมุดเช่น RequireJS หรือ CommonJS ที่จะใช้สิ่งที่เรียกว่าเอเอ็มดี การโหลดโมดูลแบบอะซิงโครนัสช่วยให้คุณระบุได้อย่างชัดเจนว่าโค้ดของคุณขึ้นอยู่กับอะไรซึ่งจะช่วยให้คุณสามารถยกเลิกการเรียกไลบรารีไปยังรหัสได้ คุณสามารถเพียงแค่ตัวอักษรบอกว่า "นี้ต้อง jQuery" และเอเอ็มดีจะโหลดและรันโค้ดของคุณเมื่อ jQuery ใช้ได้
สิ่งนี้ยังมีอัญมณีที่ซ่อนอยู่: การโหลดไลบรารีจะเสร็จสิ้นในวินาทีที่ DOM พร้อมไม่ใช่ก่อนหน้านี้ สิ่งนี้จะไม่หยุดการโหลดหน้าเว็บของคุณอีกต่อไป!
ขั้นตอนที่ 2: Modularize
เห็นโครงร่างไหม ฉันมีหน่วยโฆษณาสองหน่วย พวกเขามักจะแบ่งปันผู้ฟังเหตุการณ์
งานของคุณในขั้นตอนนี้คือการระบุจุดซ้ำในรหัสของคุณและพยายามที่จะสังเคราะห์ทั้งหมดนี้ในโมดูล ตอนนี้โมดูลจะครอบคลุมทุกอย่าง เราจะแยกสิ่งต่างๆออกไป
แนวคิดทั้งหมดของขั้นตอนนี้คือเริ่มต้นจากขั้นตอนที่ 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();
ซึ่งช่วยให้คุณสามารถแบ่งส่วนระหว่างเหตุการณ์และมาร์กอัปของคุณได้นอกเหนือจากการกำจัดความซ้ำซากจำเจ นี่เป็นขั้นตอนที่ดีทีเดียวและเราจะขยายไปในภายหลัง
ขั้นตอนที่ 3: เลือกกรอบงาน!
หากคุณต้องการโมดูลาร์และลดการทำซ้ำให้ดียิ่งขึ้นมีกรอบงานที่ยอดเยี่ยมมากมายที่ใช้แนวทาง MVC (Model - View - Controller) สิ่งที่ฉันชอบคือกระดูกสันหลัง / กระดูกสันหลังอย่างไรก็ตามยังมี 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);
นี่เป็นวิธีที่มีประสิทธิภาพมากในการลงทะเบียนกฎหากคุณมีเหตุการณ์ที่ไม่ได้มาตรฐานหรือเหตุการณ์ที่สร้างขึ้น นอกจากนี้ยังเป็นการเตะตูดอย่างจริงจังเมื่อรวมกับระบบการแจ้งเตือนผับ / ย่อยและเมื่อเชื่อมโยงกับเหตุการณ์ที่คุณเริ่มทำงานเมื่อใดก็ตามที่คุณสร้างองค์ประกอบ การผูกเหตุการณ์แบบโมดูลาร์ Fire'n'forgettable!