requireJS метод вызова в определении

Question

Мне нужно знать 2 сомнения в использовании requireJS.

Мой код:

1. Index.html

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

2.main.js

require(['../page1', '../global'], function(View,global){  
var v = new View(); 
v.init(); 

var g = new global(); 
g.getlanguage(); 
}); 

3.page1.js

define([], function (require) { 
var view1 = function(){ 
    this.init = function(){ 
    $('.page__submit').on('click', function(e) { 
      view1.new_submit(); 
      e.preventDefault(); 
     }); 
    }, 
    this.new_submit = function(){ 
    alert("new submit in.."); 
    } 
}; 
return view1; 
}); 

Вопрос 1: В page1.js OnClick view1.new_submit(); не работает. как вызвать метод? Вопрос 2: Я инициализируется **global** в **main.js**, но я не мог получить доступ к глобальным внутри page1.js. Пожалуйста, помогите.

Answer 1

Для Вопрос 1, вам просто нужно решить, как вы обращаетесь к this, поэтому я сделал ссылку, используя self, которая должна позволить вам вызывать на себя в приведенном ниже примере кода.

Для Вопроса 2, вы должны требовать global модуля в вашем page1 модуля, так что вы можете использовать его, поэтому я добавил зависимость. Обратите внимание, что вам может потребоваться изменить путь ../global в соответствии с вашей относительной структурой. См. Править для альтернативного подхода к этому вопросу.

define(['../global'], function (g) { 

    var view1 = function() { 
     var self = this; 

     self.init = function() { 
      console.log(g.getLanguage()); 

      $('.page__submit').on('click', function(e) { 
       self.new_submit(); 
       e.preventDefault(); 
      }); 
     }, 

     self.new_submit = function() { 
      alert("new submit in.."); 
     } 
    }; 

    return view1; 
}); 

EDIT или в качестве альтернативы для Вопрос 2, вы могли бы добавить global в качестве аргумента init в View, но это зависит от того, как вы действительно хотите использовать модуль. Это будет выглядеть следующим образом: -

Внутри main.js

var g = new global(); 
g.getlanguage(); 

var v = new View(); 
v.init(g); 

Внутри page1.js

self.init = function (g) { // g is the module reference 
    console.log(g.getLanguage()); 

    $('.page__submit').on('click', function(e) { 
     self.new_submit(); 
     e.preventDefault(); 
    }); 
}, 

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

В качестве альтернативы вы можете быть уверены, что действительно сделаете это глобальным по какой-то причине.В этом случае просто прикрепите его к объекту окна, присвоив его в main.js, который будет выглядеть как window.global = g;, а просто введите g.getLanguage();. Это может быть мудрым, чтобы сделать global некоторые определенный объект до Требовать JS инициализации в своем собственном файле сценария, например, определяя ее как глобальную переменную перед требуют тега сценария: -

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

и настройки вашего глобального модуля чтобы убедиться, что он является общим (и, следовательно, ясно вы намерены это не быть AMD): -

var global = { 
    property: 'value', 
    myFunction: function() { 
     // etc.. Don't know what format you want or what is in global. 
    } 
}; 

window.global = global; 

PS если вы делаете global глобальной переменной, а затем рассмотреть вопрос разделяет пространства имен его, чтобы избежать столкновения с другим кодом, например, myAppNameGlobalModule вместо global.