Совместное использование переменных JS в нескольких блоках <script>

Я работаю над приложением CodeIgniter.

У меня есть представление, позвольте ему назвать Calendar, в котором есть блок JS/jQuery <script>. Выглядит так:

    $(document).ready(function()    {

        $("#day_list").fadeIn(600);

        // init
        var current_month = <?= $init['current_month']; ?>;
        var current_year = <?= $init['current_year'] ?>;

        // previous, next month ajax call
        $(".previous, .next").click(function(event) {
            // do stuff to these variables, then ajax call.
            $.ajax({
                // ajax
            });
        });
    });

В другом представлении, мой нижний колонтитул, у меня есть еще один блок script, который должен использовать те же переменные (current_month и current_year). Однако он не знает об их существовании. Каким будет самый быстрый и простой способ передать эти переменные из первого блока <script> в другой? Я не могу сместить два блока из-за способа создания моего приложения. Должен ли я просто написать функцию для нее, которая получает и возвращает эти значения (и как мне это сделать? Я такой новичок), или есть более простой способ?

Спасибо большое!

Ответ 1

Очень важно научиться пространству имен переменных в JavaScript. Сфера имеет значение, и это имеет большое значение. Прямо сейчас, потому что вы используете ключевое слово "var", ваши материалы будут находиться в локальной области.

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

Работа с именами работает следующим образом:

var foo = foo || {} //Use existing foo or create an empty object.
foo.bar = foo.bar || {}
foo.bar.baz = foo.bar.baz || {}

и т.д.. и др.

Это может показаться намного более трудным, но оно также ЗАЩИЩАЕТ ВАШИ ПЕРЕМЕННЫЕ.

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

Поместите это в начало своего приложения, и вы можете использовать пространство имен с $.namespace( "myapp.mydata" ), а затем сказать myapp.mydata.currentYear =...

$.namespace = function() {
    var a=arguments, o=null, i, j, d;
    for (i=0; i<a.length; i=i+1) {
        d=a[i].split(".");
        o=window;
        for (j=0; j<d.length; j=j+1) {
            o[d[j]]=o[d[j]] || {};
            o=o[d[j]];
        }
    }
    return o;
};

Кроме того, если вы новичок или хотите получить хардкор, я рекомендую прочитать JavaScript Good Parts by Crockford.

Ответ 2

Объявить переменные глобальными. Просто переместите их за пределы функции готовности документа.

var current_month = <?= $init['current_month']; ?>;
var current_year = <?= $init['current_year'] ?>;

$(document).ready(function() {
....
});

current_month и current_year теперь можно получить доступ из любого блока script.

Ответ 3

Если вы объявляете свои переменные за пределами любого функционального блока, они будут глобальными переменными, доступными для любого script на странице.

var current_month;
var current_year;

$(document).ready(function () {

    // init
    current_month = <?= $init['current_month']; ?>;
    current_year = <?= $init['current_year'] ?>;

    ...etc...

});

Ответ 4

Объявление "var" инициализирует обе переменные (current_month, current_year) в области готовности, поэтому они недоступны в другом месте. Вы можете объявить их глобально:

var current_month;
var current_year;
$(document).ready(function()    {
    ...
    current_month = ...
}

Таким образом, вы можете использовать их в нижней части script.

Ответ 5

Так как вы var объявили эти переменные внутри функции, они имеют локальную область. Переместите их снаружи, чтобы сделать их глобальными:

// init
var current_month = <?= $init['current_month']; ?>;
var current_year = <?= $init['current_year'] ?>;

$(document).ready(function()    {

    $("#day_list").fadeIn(600);

    // previous, next month ajax call
    $(".previous, .next").click(function(event) {
        // do stuff to these variables, then ajax call.
        $.ajax({
            // ajax
        });
    });
});

Лучшее решение, чем глобальные переменные, состоит в том, чтобы хранить их семантически в вашем HTML, а затем извлекать их через jQuery:

<body data-month="<?= $init['current_month']; ?>" data-year="<?= $init['current_year'] ?>">

$(document).ready(function()    {
    $("#day_list").fadeIn(600);

    var current_month = $("body").data("month");
    var current_year = $("body").data("year");

    // previous, next month ajax call
    $(".previous, .next").click(function(event) {
        // do stuff to these variables, then ajax call.
        $.ajax({
            // ajax
        });
    });
});