Masalah

Jawaban ini telah dijawab sebelumnya tetapi lama dan tidak mutakhir. Saya memiliki lebih dari 2000 baris kode dalam satu file, dan seperti yang kita semua tahu ini adalah praktik yang buruk, terutama ketika saya melihat-lihat kode atau menambahkan fitur baru. Saya ingin mengatur kode saya dengan lebih baik, untuk saat ini dan untuk masa depan.

Saya harus menyebutkan bahwa saya sedang membangun alat (bukan situs web sederhana) dengan banyak tombol, elemen UI, seret, lepas, pendengar / penangan tindakan, dan fungsi dalam lingkup global di mana beberapa pendengar dapat menggunakan fungsi yang sama.

Kode contoh

$('#button1').on('click', function(e){
    // Determined action.
    update_html();
});

... // Around 75 more of this

function update_html(){ .... }

...

Lebih banyak kode contoh

Kesimpulan

Saya benar-benar perlu mengatur kode ini untuk penggunaan terbaik dan tidak mengulangi diri saya sendiri serta dapat menambahkan fitur baru dan memperbarui yang lama. Saya akan mengerjakan ini sendiri. Beberapa penyeleksi dapat terdiri dari 100 baris kode, yang lainnya adalah 1. Saya telah melihat sedikit require.jsdan menemukan itu agak berulang, dan sebenarnya menulis lebih banyak kode daripada yang dibutuhkan. Saya terbuka untuk solusi apa pun yang sesuai dengan kriteria ini dan tautan ke sumber daya / contoh selalu merupakan nilai tambah.

Terima kasih.

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!

Berikut adalah cara sederhana untuk membagi basis kode Anda saat ini menjadi beberapa file, menggunakan require.js. Saya akan menunjukkan cara membagi kode Anda menjadi dua file. Menambahkan lebih banyak file akan langsung dilakukan setelah itu.

Langkah 1) Di bagian atas kode Anda, buat objek Aplikasi (atau nama apa pun yang Anda inginkan, seperti MyGame):

var App = {}

Langkah 2) Konversikan semua variabel dan fungsi tingkat atas Anda menjadi milik objek Aplikasi.

Dari pada:

var selected_layer = "";

Kamu ingin:

App.selected_layer = "";

Dari pada:

function getModified(){
...
}

Kamu ingin:

App.getModified = function() {

}

Perhatikan bahwa pada tahap ini kode Anda tidak akan berfungsi sampai Anda menyelesaikan langkah berikutnya.

Langkah 3) Konversi semua variabel global dan referensi fungsi untuk melalui App.

Ubah hal-hal seperti:

selected_layer = "."+classes[1];

untuk:

App.selected_layer = "."+classes[1];

dan:

getModified()

untuk:

App.GetModified()

Langkah 4) Uji kode Anda pada tahap ini - semuanya harus berfungsi. Anda mungkin akan mendapatkan beberapa kesalahan pada awalnya karena Anda melewatkan sesuatu, jadi perbaiki kesalahan tersebut sebelum melanjutkan.

Langkah 5) Siapkan requirejs. Saya berasumsi Anda memiliki halaman web, disajikan dari server web, yang kodenya ada di:

www/page.html

dan jquery in

www/js/jquery.js

Jika jalur ini tidak persis seperti ini, di bawah ini tidak akan berfungsi dan Anda harus mengubah jalurnya.

Unduh requirejs dan letakkan require.js di www/jsdirektori Anda .

di Anda page.html, hapus semua tag skrip dan masukkan tag skrip seperti:

<script data-main="js/main" src="js/require.js"></script>

buat www/js/main.jsdengan konten:

require.config({
 "shim": {
   'jquery': { exports: '$' }
 }
})

require(['jquery', 'app']);

kemudian letakkan semua kode yang baru saja Anda perbaiki di Langkah 1-3 (yang hanya variabel globalnya adalah App) di:

www/js/app.js

Di bagian paling atas file itu, letakkan:

require(['jquery'], function($) {

Di bagian bawah:

})

Kemudian muat halaman.html di browser Anda. Aplikasi Anda harus berfungsi!

Langkah 6) Buat file lain

Di sinilah pekerjaan Anda membuahkan hasil, Anda dapat melakukan ini berulang kali.

Tarik beberapa kode dari www/js/app.jsreferensi $ dan Aplikasi itu.

misalnya

$('a').click(function() { App.foo() }

Masukkan www/js/foo.js

Di bagian paling atas file itu, letakkan:

require(['jquery', 'app'], function($, App) {

Di bagian bawah:

})

Kemudian ubah baris terakhir www / js / main.js menjadi:

require(['jquery', 'app', 'foo']);

Itu dia! Lakukan ini setiap kali Anda ingin memasukkan kode ke dalam filenya sendiri!

Untuk pertanyaan dan komentar Anda, saya akan berasumsi bahwa Anda tidak ingin mem-port kode Anda ke kerangka kerja seperti Backbone, atau menggunakan pustaka pemuat seperti Require. Anda hanya ingin cara yang lebih baik untuk mengatur ulang kode yang sudah Anda miliki, dengan cara yang sesederhana mungkin.

Saya mengerti bahwa menjengkelkan menelusuri 2000+ baris kode untuk menemukan bagian yang ingin Anda kerjakan. Solusinya adalah membagi kode Anda dalam file yang berbeda, satu untuk setiap fungsionalitas. Misalnya sidebar.js, canvas.jsdll. Kemudian Anda dapat menggabungkan mereka bersama untuk produksi menggunakan Grunt, bersama dengan Usemin Anda dapat memiliki sesuatu seperti ini:

Di html Anda:

<!-- build:js scripts/app.js -->
<script src="scripts/sidebar.js"></script>
<script src="scripts/canvas.js"></script>
<!-- endbuild -->

Di Gruntfile Anda:

useminPrepare: {
  html: 'app/index.html',
  options: {
    dest: 'dist'
  }
},
usemin: {
  html: ['dist/{,*/}*.html'],
  css: ['dist/styles/{,*/}*.css'],
  options: {
    dirs: ['dist']
  }
}

Jika Anda ingin menggunakan Yeoman, itu akan memberi Anda kode boilerplate untuk semua ini.

Kemudian untuk setiap file itu sendiri, Anda perlu memastikan bahwa Anda mengikuti praktik terbaik dan bahwa semua kode dan variabel ada di file itu, dan tidak bergantung pada file lain. Ini tidak berarti Anda tidak dapat memanggil fungsi satu file dari file lain, intinya adalah memiliki variabel dan fungsi yang dienkapsulasi. Sesuatu yang mirip dengan namespacing. Saya akan berasumsi Anda tidak ingin mem-port semua kode Anda menjadi Berorientasi Objek, tetapi jika Anda tidak keberatan refactoring sedikit, saya sarankan untuk menambahkan sesuatu yang setara dengan apa yang disebut pola Modul. Ini terlihat seperti ini:

sidebar.js

var Sidebar = (function(){
// functions and vars here are private
var init = function(){
  $("#sidebar #sortable").sortable({
            forceHelperSize: true,
            forcePlaceholderSize: true,
            revert: true,
            revert: 150,
            placeholder: "highlight panel",
            axis: "y",
            tolerance: "pointer",
            cancel: ".content"
       }).disableSelection();
  } 
  return {
   // here your can put your "public" functions
   init : init
  }
})();

Kemudian Anda dapat memuat sedikit kode ini seperti ini:

$(document).ready(function(){
   Sidebar.init();
   ...

Ini akan memungkinkan Anda memiliki kode yang lebih mudah dipelihara tanpa harus menulis ulang kode Anda terlalu banyak.

Gunakan javascript MVC Framework untuk mengatur kode javascript dengan cara standar.

Kerangka kerja MVC JavaScript terbaik yang tersedia adalah:

• Tulang punggung
• Angular
• CanJS
• Bara
• ReactJS

Memilih kerangka MVC JavaScript membutuhkan begitu banyak faktor untuk dipertimbangkan. Baca artikel perbandingan berikut yang akan membantu Anda memilih kerangka kerja terbaik berdasarkan faktor-faktor penting untuk proyek Anda: http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

Anda juga dapat menggunakan RequireJS dengan kerangka kerja untuk mendukung pemuatan modul & file js Asynchrounous.
Lihat di bawah ini untuk memulai pemuatan Modul JS:
http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Kategorikan kode Anda. Metode ini sangat membantu saya dan berfungsi dengan framework js apa pun:

(function(){//HEADER: menu
    //your code for your header
})();
(function(){//HEADER: location bar
    //your code for your location
})();
(function(){//FOOTER
    //your code for your footer
})();
(function(){//PANEL: interactive links. e.g:
    var crr = null;
    $('::section.panel a').addEvent('click', function(E){
        if ( crr) {
            crr.hide();
        }
        crr = this.show();
    });
})();

Di editor pilihan Anda (yang terbaik adalah Komodo Edit) Anda dapat melipat dengan menutup semua entri dan Anda hanya akan melihat judulnya:

(function(){//HEADER: menu_____________________________________
(function(){//HEADER: location bar_____________________________
(function(){//FOOTER___________________________________________
(function(){//PANEL: interactive links. e.g:___________________

Saya akan menyarankan:

1. pola penerbit / pelanggan untuk manajemen acara.
2. orientasi objek
3. namespacing

Dalam kasus Anda Jessica, bagi antarmuka menjadi beberapa halaman atau layar. Halaman atau layar dapat menjadi objek dan diperluas dari beberapa kelas induk. Kelola interaksi antara halaman dengan kelas PageManager.

Saya menyarankan Anda menggunakan sesuatu seperti Backbone. Backbone adalah pustaka javascript yang didukung RESTFUL. Ik membuat kode Anda lebih bersih dan lebih mudah dibaca dan kuat saat digunakan bersama dengan requirejs.

http://backbonejs.org/

http://requirejs.org/

Backbone bukanlah perpustakaan yang sebenarnya. Ini dimaksudkan untuk memberi struktur pada kode javascript Anda. Ia dapat menyertakan pustaka lain seperti jquery, jquery-ui, google-maps, dll. Backbone menurut saya adalah pendekatan javascript terdekat dengan struktur Berorientasi Objek dan Model View Controller.

Juga mengenai alur kerja Anda .. Jika Anda membangun aplikasi Anda dalam PHP gunakan pustaka Laravel. Ini akan bekerja dengan sempurna dengan Backbone saat digunakan dengan prinsip RESTfull. Di bawah tautan ke Laravel Framework dan tutorial tentang membangun RESTfull API:

http://maxoffsky.com/code-blog/building-restful-api-in-laravel-start-here/

http://laravel.com/

Di bawah ini adalah tutorial dari nettuts. Nettuts memiliki banyak tutorial Kualitas Tinggi:

http://net.tutsplus.com/tutorials/javascript-ajax/understanding-backbone-js-and-the-server/

Mungkin sudah waktunya bagi Anda untuk mulai menerapkan alur kerja pengembangan secara keseluruhan menggunakan alat seperti yeoman http://yeoman.io/ . Ini akan membantu mengontrol semua dependensi Anda, proses pembuatan dan jika Anda mau, pengujian otomatis. Ini banyak pekerjaan untuk memulai tetapi setelah diterapkan akan membuat perubahan masa depan jauh lebih mudah.