Saya akan membahas beberapa hal sederhana yang mungkin, atau mungkin tidak, membantu Anda. Beberapa mungkin jelas, beberapa mungkin sangat misterius.
Langkah 1: Pisahkan kode Anda
Memisahkan kode Anda menjadi beberapa unit modular adalah langkah pertama yang sangat baik. Kumpulkan apa yang berhasil "bersama-sama" dan letakkan di unit kecil mereka yang terbungkus. jangan khawatir tentang formatnya untuk saat ini, pertahankan agar tetap sebaris. Strukturnya adalah poin selanjutnya.
Jadi, misalkan Anda memiliki halaman seperti ini:
Masuk akal untuk memilah-milah sehingga semua penangan / pengikat kejadian yang terkait dengan tajuk ada di sana, untuk kemudahan pemeliharaan (dan tidak harus menyaring 1000 baris).
Anda kemudian dapat menggunakan alat seperti Grunt untuk membangun kembali JS Anda kembali ke satu unit.
Langkah 1a: Manajemen ketergantungan
Gunakan pustaka seperti RequireJS atau CommonJS untuk mengimplementasikan sesuatu yang disebut AMD . Pemuatan Modul Asinkron memungkinkan Anda untuk secara eksplisit menyatakan pada apa kode Anda bergantung, yang kemudian memungkinkan Anda untuk memindahkan panggilan perpustakaan ke kode. Anda hanya dapat mengatakan "Ini membutuhkan jQuery" dan AMD akan memuatnya, dan mengeksekusi kode Anda ketika jQuery tersedia .
Ini juga memiliki permata tersembunyi: pemuatan perpustakaan akan dilakukan saat DOM siap, bukan sebelumnya. Ini tidak lagi menghentikan pemuatan halaman Anda!
Langkah 2: Memodularisasi
Lihat gambar rangka? Saya memiliki dua unit iklan. Mereka kemungkinan besar telah berbagi pendengar acara.
Tugas Anda dalam langkah ini adalah mengidentifikasi titik-titik pengulangan dalam kode Anda dan mencoba menggabungkan semua ini ke dalam modul . Modul, saat ini, akan mencakup segalanya. Kami akan membagi barang sambil jalan.
Ide keseluruhan dari langkah ini adalah pergi dari langkah 1 dan menghapus semua salinan-pasta, untuk menggantinya dengan unit yang digabungkan secara longgar. Jadi, alih-alih memiliki:
ad_unit1.js
$("#au1").click(function() { ... });
ad_unit2.js
$("#au2").click(function() { ... });
Saya akan memiliki:
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();
Yang memungkinkan Anda untuk membagi antara acara Anda dan markup Anda selain menghilangkan pengulangan. Ini adalah langkah yang cukup baik dan kami akan memperpanjangnya nanti.
Langkah 3: Pilih kerangka kerja!
Jika Anda ingin memodularisasi dan mengurangi pengulangan lebih jauh, ada banyak kerangka kerja mengagumkan yang menerapkan pendekatan MVC (Model - View - Controller). Favorit saya adalah Backbone / Spine, namun, ada juga Angular, Yii, ... Daftarnya terus berlanjut.
Sebuah Model merepresentasikan data Anda.
Sebuah Lihat mewakili mark-up Anda dan semua peristiwa yang terkait untuk itu
Sebuah controller mewakili logika bisnis Anda - dengan kata lain, controller memberitahu halaman apa pandangan untuk beban dan apa model untuk digunakan.
Ini akan menjadi langkah pembelajaran yang signifikan, tetapi hadiahnya sepadan: ini lebih menyukai kode modular yang bersih daripada spageti.
Ada banyak hal lain yang bisa Anda lakukan, itu hanya pedoman dan gagasan.
Perubahan khusus kode
Berikut beberapa peningkatan khusus pada kode Anda:
$('.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);
}
}
});
});
Ini lebih baik ditulis sebagai:
$("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);
}
});
});
Sebelumnya di kode Anda:
window.Layer = function() {
this.instance = $("<div>");
// Markup generated here
};
window.Layer.prototype = {
setName: function(newName) {
},
bindToGroup: function(parentNode) {
}
}
Tiba-tiba, Anda memiliki cara untuk membuat lapisan standar dari mana saja di kode Anda tanpa menyalin tempel. Anda melakukan ini di lima tempat berbeda. Saya baru saja menghemat lima copy-paste.
Satu lagi:
// Ruleset wrapper untuk tindakan
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);
Ini adalah cara yang sangat ampuh untuk mendaftarkan aturan jika Anda memiliki acara yang tidak standar, atau acara pembuatan. Ini juga sangat menarik ketika dikombinasikan dengan sistem notifikasi pub / sub dan ketika terikat ke acara yang Anda aktifkan setiap kali Anda membuat elemen. Fire'n'lupakan acara modular yang mengikat!