вот простой способ разделить текущую кодовую базу на несколько файлов, используя require.js. Я покажу вам, как разделить ваш код на два файла. После этого добавление дополнительных файлов будет простым.

Шаг 1) в верхней части кода создайте объект приложения (или любое другое имя, например MyGame):

var App = {}

Шаг 2) конвертировать все ваши переменные и функции верхнего уровня, чтобы принадлежать к приложению объект.

вместо:

var selected_layer = "";

вы хотите:

App.selected_layer = "";

вместо:

function getModified(){
...
}

вы хотите:

App.getModified = function() {

}

обратите внимание, что в этот момент ваш код не работает пока вы не закончите следующий шаг.

Шаг 3) преобразование всех глобальных переменных и ссылок на функции, чтобы пройти через приложение.

изменить вещи например:

selected_layer = "."+classes[1];

to:

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

и:

getModified()

to:

App.GetModified()

Шаг 4) проверьте свой код на этом этапе-все должно работать. Вы, вероятно, получите несколько ошибок сначала, потому что вы что-то пропустили, так что исправить их, прежде чем двигаться дальше.

Шаг 5) настройка requirejs. Я предполагаю, что у вас есть веб-страница, обслуживаемая с веб-сервера, чей код находится в:

www/page.html

и jquery в

www/js/jquery.js

если эти пути не ровно как это ниже, не будет работать и вам придется изменять пути.

скачать requirejs и поставить требуют.js в вашем

для вашего вопроса и комментариев я предполагаю, что вы не хотите переносить свой код в фреймворк, такой как Backbone, или использовать библиотеку загрузчика, такую как Require. Вы просто хотите лучше организовать код, который у вас уже есть, самым простым способом.

Я понимаю, что это раздражает, чтобы прокрутить 2000+ строк кода, чтобы найти раздел, в котором вы хотите работать. Решение разделить ваш код в разных файлах, по одному для каждой функции. Например sidebar.js, canvas.js etc. Затем вы можете объединить их вместе для производства с помощью Grunt, вместе с Usemin вы можете иметь что-то вроде этого:

в вашем html:

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

в Gruntfile:

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

если вы хотите использовать Yeoman это даст вам шаблонный код для всего этого.

затем для каждого файла вам нужно убедиться, что вы следуете рекомендациям и что все коды и переменные находятся в этом файле и не зависят от других файлов. Этот это не значит, что вы не можете вызывать функции одного файла из другого, дело в том, чтобы иметь переменные и функции инкапсулированы. Что-то похожее на пространство имен. Я предполагаю, что вы не хотите переносить весь свой код на объектно-ориентированный, но если вы не против немного рефакторинга, я бы рекомендовал добавить что-то эквивалентное тому, что называется шаблоном модуля. Это выглядит примерно так:

боковая панель.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
  }
})();

затем вы можете загрузить этот кусок кода как это:

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

это позволит вам иметь гораздо больше кода без необходимости переписывать слишком много кода.

используйте JavaScript MVC Framework для того, чтобы организовать код javascript стандартным способом.

лучшие JavaScript MVC фреймворки доступны:

• основой
• Угловое
• CanJS
• Эмбер
• ReactJS

выбор JavaScript MVC framework требует так много факторов для рассмотрения. Прочитать следующее сравнительная статья, которая поможет вам выбрать лучший фреймворк на основе факторов, важных для вашего проекта: http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

вы также можете использовать RequireJS с фреймворком для поддержки загрузки Asynchrounous JS file & module.
Посмотрите ниже, чтобы начать работу с модулем JS loading:
http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/

классифицировать код. Этот метод помогает мне много и работает с любой 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();
    });
})();

в вашем предпочтительном редакторе (лучший-Komodo Edit) вы можете сложить, свернув все записи, и вы увидите только заголовки:

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

Я предлагаю:

1. шаблон издателя/подписчика для управления событиями.
2. ориентация объекта
3. пространства имен

в вашем случае Джессика, разделите интерфейс на страницы или экраны. Страницы или экраны могут быть объектами и расширяться из некоторых родительских классов. Управление взаимодействиями между страницами с помощью класса PageManager.

Я предлагаю вам использовать что-то вроде позвоночника. Backbone-это спокойная поддерживаемая библиотека javascript. Ik делает ваш код более чистым и читаемым и является мощным при использовании вместе с requirejs.

http://backbonejs.org/

http://requirejs.org/

Backbone-это не настоящая библиотека. Он предназначен для придания структуры вашему коду javascript. Он может включать в себя другие библиотеки, такие как jquery, jquery-ui, google-maps и т. д. Backbone - это, на мой взгляд, самый близкий подход javascript к объектно-ориентированным и модельным структурам контроллера вида.

также относительно вашего рабочего процесса.. Если вы создаете свои приложения на PHP, используйте библиотеку Laravel. Он будет работать безупречно с позвоночником при использовании с принципом RESTfull. Ниже ссылка на Laravel Framework и учебник о создании RESTfull APIs:

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

http://laravel.com/

Ниже приведен учебник от nettuts. Nettuts имеет много высококачественных учебников:

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

может быть, пришло время для вас начать реализацию целого рабочего процесса разработки с использованием таких инструментов, как yeoman http://yeoman.io/. это поможет контролировать все ваши зависимости, построить процесс и, если вы хотите, автоматизированное тестирование. Его много работы, чтобы начать, но после реализации сделает будущие изменения намного проще.