Разделение JS на несколько файлов

Question

В моем веб-проекте есть несколько страниц, работающих с точно такими же функциями JS. Я копировал и вставлял одинаковые функции во все файлы js всех страниц. Но недавно отдельные функции перешли в другой файл js с именем common_fns.js, для каждой страницы создается только селектор кэшированных переменных и размещается вверху каждой страницы по порядку some_page.js, common_fns.js, Что-то вроде того

some_page.js

$(function() {
    var closer=$("#nlfcClose"),
    NewFormContainer=$("#NewLessonFormContainer"),
    opener=$("#nlfcOpen"),
    NewForm=$("#NewLessonForm"),
    OpsForm=$("#LessonOps"),
    SelectBox=$( "#courses" ),
    SelectBoxOptions=$("#courses option"),
    jquiBtn=$(".jquiBtn"),
    AddOp="AddLesson",
    DelOp="DelLesson";
});

common_fns.js

$(function() {
    SelectBoxOptions.text(function(i, text) {
        return $.trim(text);
    });

    SelectBox.combobox();
    jquiBtn.button();

    closer.button({
        icons: {
            primary: "ui-icon-closethick"
        },
        text: false
    }).click(function(){
        NewFormContainer.slideUp("slow");
    });

    opener.click(function(){
        NewFormContainer.slideDown("slow");
    });

    NewForm.submit(function(){
        var querystring = $(this).serialize();
        ajaxSend(querystring, AddOp);
        return false;
    });


    OpsForm.submit(function(){
        var querystring = $(this).serialize();
        ajaxSend(querystring, DelOp);
        return false;
    });
});

Это работало, когда я копировал и вставлял общие функции в файл каждой страницы. Но теперь это не так: Firebug показывает сообщение об ошибке undefined SelectBoxOptions даже для первой функции. Что мне не хватает? Единственный способ скопировать и вставить те же функции в файл JS каждой страницы?

Answer 1

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

Объявите переменные вне функции:

var closer, NewFormContainer, opener, NewForm, OpsForm, SelectBox, SelectBoxOptions, jquiBtn, AddOp, DelOp;

$(function() {
    closer = $("#nlfcClose");
    NewFormContainer = $("#NewLessonFormContainer");
    opener = $("#nlfcOpen");
    NewForm = $("#NewLessonForm");
    OpsForm = $("#LessonOps");
    SelectBox = $( "#courses" );
    SelectBoxOptions = $("#courses option");
    jquiBtn = $(".jquiBtn");
    AddOp = "AddLesson";
    DelOp = "DelLesson";
});