0

Привет, есть несколько базовых вопросов о js. Буду рад тем, кто поможет разобраться:

1) Структура "фронт-энд" файла:

var initMaps= function(){ ... },
    initTabs= function(){ ... },
    someFucntion = function(){ ... };

$(document).ready(function(){
    initSliders();              // sliders init
    initMaps();                 // maps and markers initialising
    initTabs();                 // init tabs
});
  • С вашей точки зрения, верная ли структура, есть ли минусы?
  • Функции в document.ready запускаются последовательно или параллельно?

2) Есть потребность "селектировать браузеры", а точнее: ie8, ie9, Opera Presto:

Хочу ввести "глобальную" переменную ("без var") в самом начале файла, и задавать ей индексы что то типа:

0(false) - бразуер не требует коррекции (webkit и все современные)
1 - ie8
2 - ie9
3 - Opera Presto
4 - No `FormData` Browsers (ie8,ie9,Opera12)

Как "селектировать" я знаю, но все советуют не плодить глоб. переменных а замутить функцию типа: badBrowser() которая возвращала нужное значение.

  • но для чего вычислять браузер каждый раз когда нужно, не проще просто "сравнить" переменную?
  • по вашему мнению глобальные переменные (даже если она одна) в данном случае тоже плохая практика?

Спасибо откликнувшимся.

4 ответа 4

3

С вашей точки зрения, верная ли структура, есть ли минусы?

Обычно советуют не загрязнять глобальную область видимости и использовать свой контейнер. Причем в него надо помещать не только переменные, но все функции:

var MyApp;
myApp.InitMap = function () { .... };
myApp.InitTabs = function () { .... };
myApp.someFunction = function () { .... };

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

var newMyApp = MyApp;
MyApp = код другой библиотеки;

Функции в document.ready запускаются последовательно или параллельно?

Весь код в JavaScript запускается последовательно, поэтому и функции выполняться будут последовательно. Исключение составляет ожидание реакции на событие, так как этим управляет браузер. Например в таком случае неизвестно, что выполнится первее:

$(document).ready(function(){
    initMaps(); //ожидание реакции перед запуском                 
});
initTabs();

но для чего вычислять браузер каждый раз когда нужно, не проще просто "сравнить" переменную?

Между одной переменной или одной функцией никакой разницы, другое дело, если бы было дело в количестве. Если брать еще и вышесказанное, создается переменная в контейнере.

MyApp.currentBrowser = (function(){
    var webkit = 0,
        ie = 1,
        opera = 2;
    //вычисление версии браузера
    return version;
})();
  • Чем больше обособленного и независимого друг от друга кода, тем лучше.
  • Чем меньше "выпирающих" наружу переменных, тем лучше, отсюда используется один контейнер в глобальной областе.
  • Весь код выполняется последовательно, за исключением начала выполнения отложенного до реакции событий(но если уже начал выполняться, то последовательно).
1
  • Спасибо за более чем развернутый ответ!
    – ferrari
    21 фев 2014 в 7:58
1

1) document.ready это просто обработчик события ready в данном случае для элемента document. Функции не могут запускаться параллельно, так как js однопоточен. Есть асинхронные вызовы, но это совсем другое (кстати вызов функции в document.ready как раз и является асинхронным вызовом) В первом случае минус в глобальных переменных. Можно обернуть всё это в объект и функции сделать его методами. Либо сами функции объявлять в document.ready. Например так:

MyApp = {
  initMaps: function() {},
  initTabs: function() {},
  someFunction: function() {}
}
$(document).ready(function(){
  var app = MyApp;
  app.initMaps();
  app.initTabs();
  app.someFunction();
}

2) Вы видимо не совсем понимаете что такое глобальная переменная. Появление глобальной переменной без объявления ("без var") это скорее побочное действие, так делать не рекомендуется, может привести к непредсказуемым последствиям. Глобальная переменная должна объявляться в глобальной области видимости. Глобальная переменная в идеале должна быть одна. Опять же создайте её в объекте MyApp в виде свойства и потом уже вызывайте.

1

По второму пункту: определить браузер можно один раз, в начале выполнения скрипта, значение поместить в локальное хранилище, и дальше сравнивать со значением из него. Никаких глобальных переменных, но доступно в любом месте скрипта. Отсутствие поддержки хранилища браузером -- тоже показатель его версии)

Второй вариант, не такой удобный, но простой, как топор -- просто передавать локальную переменную с версией браузера в те функции, в которых она нужна.

Глобальные переменные, во всех языках, обычно используются для хранения данных конфига, или классов. Пользовательские данные всегда лучше хранить у пользователя.

1

1) Я просто приведу пример, как я это делаю я:

window.app = {
    temp: {},
    progressbar: {
        self: $('#rootwizard'),
        current: 0,
        increment: function(){
            if(this.current < 10){
                this.current++;
            }
            var total = 10,
                percent = (this.current / total) * 100;
            this.self.find('.bar').css({
                width: percent + '%'
            });
        }
    },
    map: {
        instance: null,
        redraw: function(){
            var map = this.instance,
            zoom = map.getZoom(),
            center = map.getCenter();
            google.maps.event.trigger(map, 'resize');
            map.setZoom(zoom);
            map.setCenter(center);
        }
    },
    rect: {
        instance: null,
        bounds: null,
        area: null
    },
    drawingManager: null,
    forms: {
        timeFrame: $(document.forms['timeframe']),
        imagesQty: $(document.forms['images']),
        contactForm: $(document.forms['contact'])
    },
    data: {
        startdate: '',
        enddate: '',
        frequency: 1,
        name: '',
        company: '',
        email: '',
        recipient: 1
    },
    modal: {
        self: $('#modal'),
        show: function () {
            this.self.modal('show');
        },
        setTitle: function(text){
            this.self.find('.modal-title').html(text);
        },
        setBody: function (text) {
            this.self.find('.modal-body').html(text);
        }
    }
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.