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

Question

Я работаю над приложением 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
            });
        });
    });

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

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

Answer 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 The Good Parts by Crockford.

Answer 2

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

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

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

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

Answer 3

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

var current_month;
var current_year;

$(document).ready(function () {

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

    ...etc...

});

Answer 4

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

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

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

Answer 5

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

// 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
        });
    });
});