Das Problem

Diese Antwort wurde bereits beantwortet, ist jedoch alt und nicht aktuell. Ich habe über 2000 Codezeilen in einer einzigen Datei, und wie wir alle wissen, ist dies eine schlechte Praxis, insbesondere wenn ich Code durchschaue oder neue Funktionen hinzufüge. Ich möchte meinen Code jetzt und für die Zukunft besser organisieren.

Ich sollte erwähnen, dass ich ein Tool (keine einfache Website) mit vielen Schaltflächen, UI-Elementen, Drag & Drop, Aktionslistenern / -handlern und Funktionen im globalen Bereich erstelle, in dem mehrere Listener möglicherweise dieselbe Funktion verwenden.

Beispielcode

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

... // Around 75 more of this

function update_html(){ .... }

...

Mehr Beispielcode

Fazit

Ich muss diesen Code wirklich für die beste Verwendung organisieren und mich nicht wiederholen und in der Lage sein, neue Funktionen hinzuzufügen und alte zu aktualisieren. Ich werde alleine daran arbeiten. Einige Selektoren können 100 Codezeilen sein, andere sind 1. Ich habe ein bisschen require.jsnachgesehen und festgestellt, dass es sich irgendwie wiederholt und tatsächlich mehr Code als nötig schreibt. Ich bin offen für jede mögliche Lösung, die diesen Kriterien entspricht, und Links zu Ressourcen / Beispielen sind immer von Vorteil.

Vielen Dank.

Ich werde einige einfache Dinge durchgehen, die Ihnen vielleicht helfen oder auch nicht. Einige könnten offensichtlich sein, andere könnten extrem arkan sein.

Schritt 1: Unterteilen Sie Ihren Code

Die Aufteilung Ihres Codes in mehrere modulare Einheiten ist ein sehr guter erster Schritt. Runden Sie ab, was "zusammen" funktioniert, und legen Sie sie in eine eigene kleine Einheit. Mach dir vorerst keine Sorgen um das Format, halte es inline. Die Struktur ist ein späterer Punkt.

Angenommen, Sie haben eine Seite wie diese:

Es wäre sinnvoll, eine Unterteilung vorzunehmen, damit alle Header-bezogenen Ereignishandler / -binder vorhanden sind, um die Wartung zu vereinfachen (und nicht 1000 Zeilen durchsuchen zu müssen).

Sie können dann ein Tool wie Grunt verwenden, um Ihr JS wieder zu einer einzigen Einheit zusammenzusetzen.

Schritt 1a: Abhängigkeitsmanagement

Verwenden Sie eine Bibliothek wie RequireJS oder CommonJS, um etwas namens AMD zu implementieren . Durch das Laden des asynchronen Moduls können Sie explizit angeben, wovon Ihr Code abhängt, und dann den Bibliotheksaufruf in den Code auslagern. Sie können einfach wörtlich "Dies benötigt jQuery" sagen und der AMD lädt es und führt Ihren Code aus, wenn jQuery verfügbar ist .

Dies hat auch ein verstecktes Juwel: Das Laden der Bibliothek erfolgt in der Sekunde, in der das DOM bereit ist, nicht vorher. Dadurch wird das Laden Ihrer Seite nicht mehr angehalten!

Schritt 2: Modularisieren

Sehen Sie das Drahtmodell? Ich habe zwei Anzeigenblöcke. Sie werden höchstwahrscheinlich gemeinsame Ereignis-Listener haben.

Ihre Aufgabe in diesem Schritt ist es, die Wiederholungspunkte in Ihrem Code zu identifizieren und zu versuchen, all dies zu Modulen zusammenzufassen . Module werden im Moment alles umfassen. Wir werden Sachen aufteilen, wenn wir weitergehen.

Die ganze Idee dieses Schritts besteht darin, von Schritt 1 aus alle Kopiernudeln zu löschen, um sie durch lose gekoppelte Einheiten zu ersetzen. Also, anstatt zu haben:

ad_unit1.js

 $("#au1").click(function() { ... });

ad_unit2.js

 $("#au2").click(function() { ... });

Ich werde haben:

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();

Dies ermöglicht es Ihnen, zwischen Ihren Ereignissen und Ihrem Markup zu unterteilen und Wiederholungen zu vermeiden. Dies ist ein ziemlich anständiger Schritt und wir werden ihn später weiter ausbauen.

Schritt 3: Wählen Sie ein Framework!

Wenn Sie Wiederholungen noch weiter modularisieren und reduzieren möchten, gibt es eine Reihe großartiger Frameworks, die MVC-Ansätze (Model - View - Controller) implementieren. Mein Favorit ist Backbone / Spine, aber es gibt auch Angular, Yii, ... Die Liste geht weiter.

Ein Modell repräsentiert Ihre Daten.

Eine Ansicht repräsentiert Ihr Markup und alle damit verbundenen Ereignisse

Ein Controller repräsentiert Ihre Geschäftslogik. Mit anderen Worten, der Controller teilt der Seite mit, welche Ansichten geladen und welche Modelle verwendet werden sollen.

Dies wird ein bedeutender Lernschritt sein, aber der Preis ist es wert: Er bevorzugt sauberen, modularen Code gegenüber Spaghetti.

Es gibt viele andere Dinge, die Sie tun können, das sind nur Richtlinien und Ideen.

Code-spezifische Änderungen

Hier sind einige spezifische Verbesserungen an Ihrem Code:

 $('.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);

            }

        }

    });
 });

Dies ist besser geschrieben als:

$("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);
          }
     });
});

Früher in Ihrem Code:

window.Layer = function() {
    this.instance = $("<div>");
    // Markup generated here
};
window.Layer.prototype = {
   setName: function(newName) {
   },
   bindToGroup: function(parentNode) {
   }
}

Plötzlich haben Sie die Möglichkeit, von überall in Ihrem Code eine Standardebene zu erstellen, ohne sie einzufügen. Du machst das an fünf verschiedenen Orten. Ich habe dir gerade fünf Kopierpasten gespeichert.

Einer noch:

// Regelsatz-Wrapper für Aktionen

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);

Dies ist eine sehr wirksame Methode, um Regeln zu registrieren, wenn Sie Ereignisse haben, die nicht Standard sind, oder Erstellungsereignisse. Dies ist auch in Kombination mit einem Pub / Sub-Benachrichtigungssystem und wenn es an ein Ereignis gebunden ist, das Sie auslösen, wenn Sie Elemente erstellen, ein echter Kick-Ass. Fire'n'forget modulare Ereignisbindung!

Hier ist eine einfache Möglichkeit, Ihre aktuelle Codebasis mithilfe von require.js in mehrere Dateien aufzuteilen. Ich werde Ihnen zeigen, wie Sie Ihren Code in zwei Dateien aufteilen. Das Hinzufügen weiterer Dateien ist danach unkompliziert.

Schritt 1) Erstellen Sie oben in Ihrem Code ein App-Objekt (oder einen beliebigen Namen wie MyGame):

var App = {}

Schritt 2) Konvertieren Sie alle Variablen und Funktionen der obersten Ebene so, dass sie zum App-Objekt gehören.

Anstatt:

var selected_layer = "";

Sie wollen:

App.selected_layer = "";

Anstatt:

function getModified(){
...
}

Sie wollen:

App.getModified = function() {

}

Beachten Sie, dass Ihr Code zu diesem Zeitpunkt erst funktioniert, wenn Sie den nächsten Schritt abgeschlossen haben.

Schritt 3) Konvertieren Sie alle globalen Variablen- und Funktionsreferenzen, um die App zu durchlaufen.

Ändere Sachen wie:

selected_layer = "."+classes[1];

zu:

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

und:

getModified()

zu:

App.GetModified()

Schritt 4) Testen Sie Ihren Code zu diesem Zeitpunkt - alles sollte funktionieren. Sie werden wahrscheinlich zuerst ein paar Fehler bekommen, weil Sie etwas verpasst haben, also beheben Sie diese, bevor Sie fortfahren.

Schritt 5) Richten Sie requirejs ein. Ich gehe davon aus, dass Sie eine Webseite haben, die von einem Webserver bereitgestellt wird, dessen Code sich in:

www/page.html

und jquery in

www/js/jquery.js

Wenn diese Pfade nicht genau so sind , funktioniert das Folgende nicht und Sie müssen die Pfade ändern.

Laden Sie requirejs herunter und legen Sie require.js in Ihrem www/jsVerzeichnis ab.

page.htmlLöschen Sie in Ihrem Skript alle Skript-Tags und fügen Sie ein Skript-Tag wie folgt ein:

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

www/js/main.jsMit Inhalten erstellen :

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

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

Fügen Sie dann den gesamten Code, den Sie gerade in den Schritten 1 bis 3 repariert haben (dessen einzige globale Variable App sein sollte) in Folgendes ein:

www/js/app.js

Fügen Sie ganz oben in dieser Datei Folgendes ein:

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

Unten setzen:

})

Laden Sie dann page.html in Ihren Browser. Ihre App sollte funktionieren!

Schritt 6) Erstellen Sie eine weitere Datei

Hier zahlt sich Ihre Arbeit aus, das können Sie immer wieder tun.

Ziehen Sie einen Code aus www/js/app.jsden Referenzen $ und App heraus.

z.B

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

Steck es rein www/js/foo.js

Fügen Sie ganz oben in dieser Datei Folgendes ein:

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

Unten setzen:

})

Ändern Sie dann die letzte Zeile von www / js / main.js in:

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

Das ist es! Tun Sie dies jedes Mal, wenn Sie Code in eine eigene Datei einfügen möchten!

Bei Ihren Fragen und Kommentaren gehe ich davon aus, dass Sie nicht bereit sind, Ihren Code auf ein Framework wie Backbone zu portieren oder eine Loader-Bibliothek wie Require zu verwenden. Sie möchten nur einen besseren Weg finden, um den Code, den Sie bereits haben, auf einfachste Weise zu organisieren.

Ich verstehe, dass es ärgerlich ist, durch mehr als 2000 Codezeilen zu scrollen, um den Abschnitt zu finden, an dem Sie arbeiten möchten. Die Lösung besteht darin, Ihren Code in verschiedene Dateien aufzuteilen, eine für jede Funktionalität. Zum Beispiel sidebar.js, canvas.jsusw. Dann können Sie sie zusammen für die Produktion mit Grunt verbinden, zusammen mit Usemin Sie etwas davon haben können:

In Ihrem HTML:

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

In deinem Gruntfile:

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

Wenn Sie Yeoman verwenden möchten, erhalten Sie einen Boilerplate-Code für all dies.

Dann müssen Sie für jede Datei selbst sicherstellen, dass Sie die Best Practices befolgen und dass sich der gesamte Code und die Variablen in dieser Datei befinden und nicht von anderen Dateien abhängen. Dies bedeutet nicht, dass Sie keine Funktionen einer Datei aus einer anderen aufrufen können. Es geht darum, Variablen und Funktionen zu kapseln. Ähnlich wie beim Namespace. Ich gehe davon aus, dass Sie nicht Ihren gesamten Code objektorientiert portieren möchten, aber wenn es Ihnen nichts ausmacht, ein wenig umzugestalten, würde ich empfehlen, etwas hinzuzufügen, das dem sogenannten Modulmuster entspricht. Es sieht ungefähr so ​​aus:

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
  }
})();

Dann können Sie diesen Code wie folgt laden:

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

Auf diese Weise können Sie einen viel besser wartbaren Code erhalten, ohne Ihren Code zu viel umschreiben zu müssen.

Verwenden Sie Javascript MVC Framework, um den Javascript-Code auf standardmäßige Weise zu organisieren.

Die besten verfügbaren JavaScript MVC-Frameworks sind:

• Rückgrat
• Winkelig
• CanJS
• Glut
• ReactJS

Die Auswahl eines JavaScript-MVC-Frameworks erforderte so viele Faktoren, die berücksichtigt werden mussten. Lesen Sie den folgenden Vergleichsartikel, der Ihnen bei der Auswahl des besten Frameworks anhand der für Ihr Projekt wichtigen Faktoren hilft: http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

Sie können RequireJS auch mit dem Framework verwenden, um das Laden von asynchronen js-Dateien und -Modulen zu unterstützen.
Sehen Sie sich das Folgende an, um mit dem Laden des JS-Moduls zu beginnen:
http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

Kategorisieren Sie Ihren Code. Diese Methode hilft mir sehr und funktioniert mit jedem js-Framework:

(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();
    });
})();

In Ihrem bevorzugten Editor (der beste ist Komodo Edit) können Sie alle Einträge reduzieren, und Sie sehen nur die Titel:

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

Ich würde vorschlagen:

1. Publisher / Subscriber-Muster für das Event-Management.
2. Objektorientierung
3. Namespace

Teilen Sie in Ihrem Fall Jessica die Benutzeroberfläche in Seiten oder Bildschirme. Seiten oder Bildschirme können Objekte sein und von einigen übergeordneten Klassen erweitert werden. Verwalten Sie die Interaktionen zwischen Seiten mit einer PageManager-Klasse.

Ich schlage vor, dass Sie so etwas wie Backbone verwenden. Backbone ist eine von RESTFUL unterstützte Javascript-Bibliothek. Ik macht Ihren Code sauberer und lesbarer und ist leistungsstark, wenn es zusammen mit requirejs verwendet wird.

http://backbonejs.org/

http://requirejs.org/

Backbone ist keine echte Bibliothek. Es soll Ihrem Javascript-Code Struktur verleihen. Es ist in der Lage, andere Bibliotheken wie jquery, jquery-ui, google-maps usw. einzuschließen. Backbone ist meiner Meinung nach der nächstgelegene Javascript-Ansatz für objektorientierte und Model View Controller-Strukturen.

Auch in Bezug auf Ihren Workflow. Wenn Sie Ihre Anwendungen in PHP erstellen, verwenden Sie die Laravel-Bibliothek. Mit Backbone funktioniert es einwandfrei, wenn es mit dem RESTfull-Prinzip verwendet wird. Unter dem Link zu Laravel Framework und einem Tutorial zum Erstellen von RESTfull-APIs:

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

http://laravel.com/

Unten ist ein Tutorial von Nettuts. Nettuts hat viele hochwertige Tutorials:

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

Vielleicht ist es an der Zeit, einen vollständigen Entwicklungsworkflow mit Tools wie yeoman http://yeoman.io/ zu implementieren . Auf diese Weise können Sie alle Ihre Abhängigkeiten, den Erstellungsprozess und, falls gewünscht, automatisierte Tests steuern. Es ist zunächst viel Arbeit, aber sobald es implementiert ist, werden zukünftige Änderungen viel einfacher.