Как правильно избавляться от дублирования кода?

[rwr]

День добрый.
Есть 2 js файла, где инициализируется один тот же jquery плагин, с одинаковыми параметрами.

Выношу параметры в отдельный файл, пример:

var autocompleteOptions = {
        minChars: 1,
        delay: 600,
        dataType: 'json', 
        autoFill: true,
        extraParams: {
                country_id: $('#country_id').val()                       
        },
        width: 362,
        parse: function(data) {

        },
        formatItem: function(item) {
                                                 
 
        }
              
};

Подключаю этот файл, перед первыми двумя. И вот проблема, что получаю в качестве значения country_id: undefined.

Подскажите, пожалуйста, как правильно выносить конфиги в отдельные файлы. И вообще как в js бороться с таким дублированием.

[walik]

Предполагаю что вам следует дождаться загрузки DOM ?

$(function() {
   // Тут инициализация вашего плагина
});

[rwr]

walik, все верно. Но получается что область видимости переменных станет только как раз инициализация:

$(function() {
   
});

А мне же нужно, чтобы эти параметры были доступны из других файлов))

[walik]

Так объявляйте переменные как глобальные и все.

[Black_Prince]

var autocompleteOptions = null;

$(document).ready(function(){

    autocompleteOptions = {
        minChars: 1,
        delay: 600,
        dataType: 'json', 
        autoFill: true,
        extraParams: {
                country_id: $('#country_id').val()                       
        },
        width: 362,
        parse: function(data) {

        },
        formatItem: function(item) {
                                                 
 
        }
              
    };

});

[rwr]

Возможно неправильно выражаюсь. Попробую объяснить по другому. В шаблоне подключено 2 файла:

<script type="text/javascript" src="/js/autocomplete.js"></script>
<script type="text/javascript" src="/js/settings.js"></script>

Cодержимое autocomplete.js:

var autocompleteOptions = {
        minChars: 1,
        delay: 600,
        dataType: 'json', 
        autoFill: true,
        extraParams: {
                country_id: $('#country_id').val()                       
        },
        width: 362,
        parse: function(data) {

        },
        formatItem: function(item) {
                                                 
 
        }           
};

Cодержимое settings.js:

$(function(){
        console.log(autocompleteOptions);
})

И в консоли результат: country_id: undefined;

Если же перенести объявление autocompleteOptions в файл settings.js, то все нормально.
Как быть?

[walik]

Так вы же не ждете загрузки DOM. При вызове $('#country_id').val() элемента еще нет на странице.

$(function() {
    autocompleteOptions = {
        minChars: 1,
        delay: 600,
        dataType: 'json',
        autoFill: true,
        extraParams: {
                country_id: $('#country_id').val()                      
        },
        width: 362,
        parse: function(data) {
 
        },
        formatItem: function(item) {
                                                  
  
        }          
    };
});

[rwr]

walik, тогда получаю ошибку. Так как область действия autocompleteOptions, ограничена функцией, определенной в autocomplete.js

autocompleteOptions is not defined
[Прерывать на этой ошибке] console.log(autocompleteOptions);

[rwr]

Black_Prince, спасибо. Ваш вариант, сработал.

[walik]

К переменной обращаетесь тоже после загрузки DOM когда уже переменная объявлена ?

+ обратите внимание что в моем примере я объявил переменную без слова var что бы она была глобальная.