Оптимизация кода для jQueryMobile: проблемы с выборочным включением внешних файлов JS, только когда они необходимы

Question

Я использую jQueryMobile для мобильного приложения.Очевидно, я хочу, чтобы пользовательский интерфейс загружался очень быстро, но в приложении имеется более одного инструмента, поэтому я хочу загружать соответствующие внешние библиотеки JS для «страниц» только при переходе к ним.Для основного приложения (90% страниц) я просто хочу файлы ядра jQueryMobile (то есть самое последнее ядро ​​jquery из библиотек Google AJAX и jQueryMobile JS & CSS).Однако для оставшихся 10% мне нужны Google Maps v3 с включенной геолокацией (так что внешняя библиотека Google Gears) и библиотека MarkerClusterer (у меня есть> 400 маркеров, которые я хочу нанести на график только при необходимости).

Как я понимаю, как работает jQueryMobile (все через внутренние запросы AJAX), вы должны иметь все библиотеки для загрузки всего приложения при инициализации приложения.Это делает мое приложение действительно тяжелым, когда пользователь впервые запрашивает мобильный сайт (все основные файлы, а также все кластерные файлы карт / геолокации / маркеров).Я хочу избежать этого, так как это отпугнет многих потенциальных пользователей (особенно, когда только часть моих пользователей хочет, чтобы геолокация была полезна).

Я попытался загрузить только компоненты Google Maps в концена соответствующей странице (до div нижнего колонтитула), а также попытался поместить их в тег на соответствующей странице.Однако оба они не могут быть инициализированы (проверено с выходом console.log (), прикрепленным к функциям).

И да, перед тем, как вы спросите, я использую функцию "pagecreate" live () и обращаюсь к правильномуdiv (если я помещу все, что связано с Google Maps, в тег заголовка корневой страницы, то все будет работать нормально, как и должно)

Мне кажется, что это довольно распространенный вопрос: выборочная загрузка компонентов страницы с помощью jQueryMobile.Я не смог ничего найти в Интернете через Google - большинство уроков jQueryMobile - это общий сад «Hello World!»разнообразие, так что если у вас есть, что предложить, я все уши!Также приветствуются ссылки на учебники по выборочной загрузке!

Заранее спасибо!

Answer 1

все эти страницы инициализируют все необходимые библиотеки на каждой странице.

Да, это стандартный способ сделать это, так что какая бы страница / подстраница ни вызывалась пользователем в первую очередь - все работает. Все библиотеки работают нормально и загружаются только один раз. Но это вы, наверное, знаете.

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

Это может быть достигнуто несколькими различными способами:

1. Самый простой: положить его в голову, если это была первая открываемая страница, и поставить rel="external" во всех ссылках на эту подстраницу. Это, очевидно, перезагрузит страницу и лишит вас некоторых преимуществ страниц кэширования JQM, но загрузка библиотек во времени может стоить
2. Рекомендуемое: JQM должен загружать и запускать JS, когда он помещен в page div. Причина, по которой он не сработал для вас, вероятно, заключается в том, что библиотека зависит от события domready, и вам, возможно, придется запустить его для библиотеки. Но если вы просто запустите событие, оно заставит все (включая JQM) его обработать. Вы должны заставить его запускать только библиотеку. Для этого вам необходимо:
   • отредактируйте код и найдите функцию обработки событий
   • изменить код, чтобы у функции было глобально доступное имя
   • вызов функции в pagesomething обработчике

Также: если у вас есть проблемы со страницами, попробуйте связать pageshow вместо pagecreate, чтобы увидеть, требует ли что-то, чтобы элементы были видны первыми.

Answer 2

Хороший вопрос!Я не видел этого в документах jQuery Mobile.После naugtur я бы сказал что-то вроде этого на вашей странице div

<script>
if(typeof MyFunction == "undefined") {
    $.getScript('myfunction.js', function() {
        // initialize if necessary
    });
}
</script>

Если вы загружаете вещи, которые обслуживает Google, особенно если есть несколько файлов, jsload хороший вариант.

Answer 3

вопрос, вы пытались использовать head.js подход к проблеме? они устанавливают js-файлы для загрузки как разблокированный запрос, как способ загрузки изображений в браузерах, а не как браузер по умолчанию, способ загрузки одного js-файла за раз и блокировки других js-загрузок