Переход от простого шаблона модуля к требованию AMD

Question

Я использую шаблон модуля в своем приложении Javascript, и я хочу перейти на RequireJS и AMD.

Моя текущая реализация выглядит так:

// Module main : Module.js 
var myModule = (function(my, $, undefined) { 
    'use strict'; 

    var m_privateMembers; 
    var m_stuff = new my.Pear({color:"green"}); 

    //--------------------------------------- 

    function privateFunctions(args) { 
    } 

    //----------------------------------- 

    my.publicFunctions = function(args) { 
    }; 

    return my; 
})(myModule || {}, jQuery); 



// Module class Fruit : Module.Fruit.js 
var myModule = (function(my, $, undefined) { 
    'use strict'; 

    my.Fruit = Object.makeSubclass(); 

    my.Fruit.prototype._init = function() { 

    }; 

    my.Fruit.prototype.someClassFunction = function() { 
    }; 

    return my; 
})(myModule || {}, jQuery); 


// Module class Pear : Module.Pear.js 
var myModule = (function(my, $, undefined) { 
    'use strict'; 

    my.Pear = Fruit.makeSubclass(); 

    my.Pear.prototype._init = function(args) { 
     this.m_someClassMember = args; 
    }; 

    my.Pear.prototype.someClassFunction = function() { 
    }; 

    return my; 
})(myModule || {}, jQuery); 

В моей index.html я использую HTML-теги сценария включить мои различные модули файлов и все работает нормально.

Мой вопрос являются:

1/Почему система RequireJS лучше, чем это многократным системы тегов сценария?

С моей нынешней RequireJS подход:

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

    var myModule = (function(my, $, undefined) { 
     'use strict'; 

     var m_privateMembers; 
     var m_stuff = new my.Pear({color:"green"}); 

     //--------------------------------------- 

     function privateFunctions(args) { 
     } 

     //----------------------------------- 

     my.publicFunctions = function(args) { 
     }; 

     return my; 
    })(myModule || {}, $); 

    return myModule; 
}); 

2/Как я мог мигрировать в RequireJS модулей и сохранить одноплодной подобный шаблон, что мои фактические модули обеспечивают встроенные классы суб?

очевидно, есть несколько проблем:

2,1/* m_stuff не может создать экземпляр my.Pear, и я не знаю, как разделить модули в нескольких файлах с требуют *

2,2/? Если у меня есть два других модуля, которые оба зависят от myModule, будет ли myModule var одним и тем же экземпляром в этом модуле (поскольку myModule больше не находится в глобальной области)?

редактировать: это быстро схемы иллюстрируют то, что мне нужно сделать, в гораздо более сложной структурой:

schema

Answer 1

Почему система RequireJS лучше, чем это многократным системы тегов сценария?

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

Вы можете прочитать больше

• Почему веб-модули - http://requirejs.org/docs/why.html
• Можете ли вы помочь мне понять преимущество require.js? - https://gist.github.com/desandro/4686136

Как я мог мигрировать в RequireJS модули и держать одноплодной-как шаблон, что мои фактические модули обеспечивают встроенные классы суб?

Давайте посмотрим на это, принимая фрукты и груши в качестве примеров

При использовании require или define вы уже создает замыкание, которое будет инкапсулировать всю логику, так что нет никакой необходимости, чтобы создать еще один внутри. Будь проще.

// Fruit.js 
define(['jquery'], function($) { 
    'use strict'; 

    var Fruit = Object.makeSubclass(); 

    Fruit.prototype._init = function() { 

    }; 

    Fruit.prototype.someClassFunction = function() { 

    }; 

    return Fruit; 
}); 

// Pear.js 
define(['jquery', 'path/to/Fruit'], function($, Fruit) { 
    'use strict'; 

    var Pear = Fruit.makeSubclass(); 

    Pear.prototype._init = function(args) { 
     this.m_someClassMember = args; 
    }; 

    Pear.prototype.someClassFunction = function() { 

    }; 

    return Pear; 
}); 

Я не знаю, как разделить модули в нескольких файлах с требуется?

По существу просто разбивайте свои «классы» или модули на отдельные модули AMD и явно определяйте зависимости там, где это необходимо. Вы можете видеть из приведенного выше примера, как Pear будет использовать модуль Fruit.

Если у меня есть два модуля, что оба зависит от MyModule, будет MyModule вар будет тем же экземпляр в этом модуле (с MyModule не в глобальном масштабе больше)?

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