Преобразование большого файла javascript в несколько файлов

Question

Мой вопрос: Как можно лучше всего разбить большой монолитный объект буква javascript на несколько дискретных файлов?

У меня есть один файл javascript, который состоит из объектного литерала со многими приложенными к нему способами. Это становится довольно длинным, и я хочу разбить его на более мелкие части, которым легче управлять.

Я слышал, что я могу использовать AMD или CommonJS для организации вещей, я слышал, что должен использовать RequireJS, чтобы я использовал Webpack или Browserify, чтобы я использовал любое количество других инструментов/методов. Посмотрев на эти вещи, я смущен тем, что лучший подход.

Как вы это сделаете? Как бы вы взяли единственный литерал объекта, состоящий из нескольких тысяч строк javascript (состоящий из таких функций, как «поиск» и «логин» и «пользователь»), и реорганизовать его в несколько файлов, с которыми легче справиться группа Разработчики? Единственное, гигантское файловое дело просто доходит до громоздкости, и варианты, кажется, разнообразны и неясны. Это довольно простое приложение, которое использует vanilla JS, немного jQuery и сидит поверх бэкэнда Grails.

Я думаю, что вопрос довольно ясно, но если вам действительно нужны коды, чтобы посмотреть на вот пример подобного объекта буквальный я говорю:

var myObj = { 

    foo: "one", 
    bar: "two", 
    baz: false, 
    deez: -1, 

    login: function() { 
     // lots and lots of code 
    }, 

    user: function() { 
     // lots and lots of code 
    }, 

    beers: function() { 
     // lots and lots of code 
    }, 

    varieties: function() { 
     // lots and lots of code 
    } 

    init: function() { 
     myObj.login.init(); 
     myObj.user.init(); 
     // lots of jQuery document.ready stuff 
    } 
} 

myObj.init(); 

Answer 1

Вот модель я использую:

• Когда это возможно, сломать концепции в свой собственный подъобект
• Независимо от подобъектов или нет, объявить какой-либо не изрезанный р сначала создайте, затем добавьте к нему по необходимости
• Если файлы находятся на нескольких файлах, и вы не хотите использовать под-объекты для каждого файла, используйте временный объект для хранения дополнительных свойств, а затем расширьте оригинал.

Пример:

var myObj = { 
    foo: "one", 
    bar: "two", 
    baz: false, 
    deez: -1 
} 

myObj.login = function() { 
    // lots and lots of code 
}; 

myObj.user = function() { 
    // lots and lots of code 
}; 

myObj.drinks = { 
    beer: function() {}, 
    wine: function() {}, 
    sunnyDelight: { 
    drinkIt: function() {}, 
    burp: function() {} 
    } 
}; 

myObj.init = function() { 
    myObj.login.init(); 
    myObj.user.init(); 
    // lots of jQuery document.ready stuff 
} 

myObj.init(); 

Обратите внимание, что "напитки" это понятие к себе, содержащий множество свойств и методов. Ваши концепции могут быть чем-то вроде «ui», «utils», «data» или какой бы то ни было ролью содержащихся свойств.

Для точки расширения я сделал, там не много коды там нужен либо

// "utilities.js" 
var myObj = { 
    // a bunch of properties and/or methods 
}; 

myObj.moreStuff = "more stuff!"; 

, а затем в другом файл у вас есть два варианта. Либо добавить к объекту, не переписывая его (вам понадобится точка-нотацию, чтобы сделать это):

// "ui.js" 
var myObj = myObj || {}; 

// adds the render object to the existing myObj 
myObj.render = { 
    header: function() {}, 
    dialogBox: function() {} 
} 

Вышеприведенные особенно хорошо работает, если вы подразделить свои концепции ... потому что вы все еще можете иметь достаточно монолитна объекты, которые не будут попирать остальную часть myObj. Но, может быть, вы хотите добавить непосредственно к myObj без вытаптывания и без расчленения проблем:

// "ui.js" 
var myObj = myObj || {}; 

// ultimately, the CONTENTS of this object get merged into the existing myObj 
var myObjSupplement = { 
    header: function() {}, 
    dialogBox: function() {}, 
    heroBiscuit: "A yummy biscuit made from heroes!" 
} 

// using jQuery here, but it's not the only way to extend an object 
$.extend(myObj, myObjSupplement) 

Я не вижу слишком много возможностей для использования выше, поскольку myObjSupplement теперь в глобальном пространстве имен и поражение цели ограничения дополнения к глобальному пространству имен, но он есть, если вам это нужно.

[редактировать добавить:]

Он не может идти «не говоря» я thought--, но разделение на множество различных файлов, вероятно, работает лучше всего, если у вас есть процесс сборки в месте, которое может объединить их в одну файл, подходящий для минимизации. Вы не хотите иметь 100 или даже 6 отдельных файлов, каждый из которых требует синхронного HTTP-вызова для извлечения.

Есть более современные и, возможно, «лучшие» подходы к таким технологиям, как AMD/RequireJS ... но если вопрос заключается в том, «как разделить объектный литерал на несколько файлов», приведенный выше ответ это я могу стоять позади.

Answer 2

Хотя существует автоматизированные способы сделать это Я уверен, и я также заинтересован в том, чтобы получить ответы на этот вопрос, я бы рекомендовал просто входить и перемещать определения методов в разные файлы и обычно вызывать функции method(param); и связывать файлы со своей html-страницей.

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

Извините, я не могу помочь, не увидев файл JavaScript.

Вы можете указать this stack overflow example, если вам нужно больше рекомендаций для достижения этого.

Вы не должны иметь все методы, определенные в ваших объектах или классах, то лучше модуляризует эти методы в разные файлы и использовать <script src="path/to/your/script.js"> </script> тегов, чтобы включить их все с вашей страницей/PHP HTML

Answer 3

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

Мой подход будет заключаться в использовании ES6 и его встроенной поддержки модуля.

Для этого я всегда использую свой собственные шаблонное имя fabric, который использует Webpack для компиляции модулей Browsersync, чтобы помочь вам в вашем развитии, лентах для модульного тестирования, SASS для вашего CSS предобработки и Babel скомпилировать совместимый ES5, который вы можете легко использовать в своем приложении.

Теперь, как использовать модули ES6 нечто подобное с назвал экспорт:

//------ lib.js ------ 
export const sqrt = Math.sqrt; 
export function square(x) { 
    return x * x; 
} 
export function diag(x, y) { 
    return sqrt(square(x) + square(y)); 
} 

//------ main.js ------ 
import { square, diag } from 'lib'; 
console.log(square(11)); // 121 
console.log(diag(4, 3)); // 5 

Или с помощью экспорта по умолчанию:

//------ myFunc.js ------ 
export default function() { ... }; 

//------ main1.js ------ 
import myFunc from 'myFunc'; 
myFunc(); 

Вы можете узнать больше о ES6 модули на 2ality