Диапазон использования:
Для проектов по управлению информацией, таких как ОА, МИС, ERP и т. Д., Веб -сайт пока не рассматривается.
Проблемы столкнулись:
Чтобы завершить проект, вам часто нужно ссылаться на многие файлы JS, такие как jQuery.js, EasyUI и т. Д. Есть также несколько столбцов файлов JS, которые я сам написал, так как эти файлы можно удобно загружаться? Если файл меняется, как клиент может вовремя обновить кэш? Было бы еще лучше, если бы точечная эффективность работы могла быть улучшена.
Цель:
1. Он может легко ссылаться на файлы JS.
2. Попробуйте использовать различные кэши, чтобы избежать частого чтения файлов с сервера.
3. Если файл JS обновляется, добавляется или уменьшается, клиент должен иметь возможность обновлять автоматически и немедленно обновлять.
4. повторное использование файлов JS.
Структура страницы:
Как правило, такие проекты, как OA и MIS, в основном реализуются с использованием Frameset или iframe, которые приносят концепции страницы родителей и детской страницы. Мы можем использовать это, чтобы суетиться.
Веб -страницы можно разделить на три части: оболочка, домашняя страница, метка, список данных, форма (добавить, модифицировать). Поскольку метод загрузки JS здесь должен использовать эту структуру страницы, и именно по этой причине веб -сайт пока не поддерживается.
Это выглядит знакомо, чтобы увидеть эту картинку. Да, это структура.
текст
В настоящее время, когда дело доходит до приложений для веб-версий, он все чаще полагается на различные JS, такие как сторонние JQUERY, EasyUI, MY97 и т. Д., А также различные JS, написанные мной. Все больше и больше функций будут реализованы, необходимо использовать все больше и больше JS, и часто модифицируется больше файлов JS. Возникает так много проблем, таких как написание много <script src = ""> для каждой страницы. Это слишком хлопотно. Сколько страниц вам нужно изменить, чтобы добавить новый файл JS? Как сразу обновить файл JS? Как заставить клиента загружать JS быстрее. Некоторые файлы JS также имеют зависимости. Как обеспечить заказ загрузки? Эта статья о том, как поделиться моим решением.
Динамическая нагрузка
Очевидно, трудно использовать <script> загрузить JS на странице, так что мне делать? Подумав об этом, я все еще использую динамическую нагрузку, чтобы решить ее. Я также искал онлайн и обнаружил, что есть много методов, в том числе написанные самими собой, и те, которые организованы в рамки (такие как SeeJS). Иногда я все еще чувствую, что я более умел делать его, поэтому я планирую написать один сам.
Как загрузить динамически? Используя метод, предоставленный JQUERY? Это нормально, но страница должна относиться к JQUERY и JS, который я написал для загрузки файла JS. Другими словами, если вам нужно написать два <Script> S на странице, это будет хлопотно. Если вы можете написать один, вы не должны писать два. Хотя это всего лишь одно, очень трудно иметь еще один. Поэтому я решил самостоятельно написать небольшой метод динамической нагрузки.
Что мне делать, если я не могу написать? Тетя Байду приходит и помогает. После поиска всех видов вещей, я наконец нашел относительно идеальный метод, поэтому я использую это.
Кода -копия выглядит следующим образом:
/* Функции, которые реализуют динамическую загрузку JS, поступают из Интернета. После небольшой модификации он может быть совместимы с IE10 */
var LoadScript =
{
$$: function (id) {return document.getElementByid (id); },
Tag: function (element) {return document.getElementsbytagname (element); },
ce: function (element) {return document.createElement (element); },
JS: function (url, обратный вызов) {
var s = loadscript.ce ('script');
s.type = "text/javascript";
s.src = url;
if (document.documentmode == 10 || document.documentmode == 9) {
s.onerror = s.onload = загружен;
} еще {
s.onreadystatechange = ready;
s.onerror = s.onload = загружен;
}
loadscript.tag ('head') [0] .appendchild (s);
Функция ready () {/*ie7.0/ie10.0*/
if (s.readystate == 'загружено' || s.readystate == 'complete') {
перезвонить();
}
}
Функция загружена () {/*чром/ie10.0*/
перезвонить();
}
}
};
Заказ на загрузку
Новый код был завершен. Ниже приведено, как загрузить другие файлы JS. Поскольку есть много файлов и есть определенные зависимости, я подумаю об этом и сделаю словарь файлов JS, а затем сделаю заказ загрузки и загружаю его в этом порядке.
Чтобы быть более стабильным, я решил использовать метод загрузки одного за другим, то есть загружать один JS, а затем загрузить другой JS. Это обеспечивает зависимости. Конечно, недостаток в том, что скорость нагрузки будет медленнее. Как правило, веб -страницы могут быть загружены с несколькими файлами JS, что будет быстрее.
Используйте кэш
Как правило, браузеры будут иметь кэш для различных ресурсов (такие как веб -страницы, картинки, JS, CSS и т. Д.), И больше не будут загружать их на сервер, если у них их уже есть. Это кажется хорошим, но есть две проблемы:
A. Как браузер определяет, является ли кэшированный файл JS последним?
B. Файл JS был обновлен. Как заставить браузер обновлять?
Как браузер судит? Я не знаю много о конкретных шагах, но я знаю, что есть шаг, чтобы перейти на сервер, чтобы спросить, является ли файл JS, который я кэш, является последним, и тогда я могу определить, является ли локальный кэш последним. Если это последнее, я не буду беспокоиться. Если это не так, я скачаю последний. То есть, даже если у клиента уже есть кэш файлов JS, браузер должен подтвердить, является ли он последним и все равно перейдет на сервер, чтобы спросить. Это борьба. Конечно, в целом этот процесс будет очень быстрым, но иногда этот процесс будет очень медленным.
Таким образом, лучше попытаться избежать загрузки JS. Таким образом, введено «повторное использование файлов JS».
Обновите файл JS
Файл JS был обновлен, но браузер все еще использует предыдущий файл JS, потому что он кэширован, и он упрям, что кэшированный файл JS является последним. Что я должен делать?
Самый простой способ - загрузить JS с номером версии, за которым следует. Если есть обновление, номер версии будет +1. Например, xxx.js? V = 1. После обновления файла JS он xxx.js? V = 2. Таким образом, JS определенно будет обновлен.
Это кажется простым, но как добавить этот номер версии? Как обновить сам номер версии?
Повторное использование
Сначала нам нужно посмотреть на картинку выше, которая является структурой страницы, со страницей оболочки (или домашней страницей), которую мы называем родительской страницей. Есть несколько страниц, загруженных iFrames, и мы добавляем их в подпаги.
Общий подход состоит в том, чтобы загрузить jQuery.js на родительскую страницу, а затем jquery.js на страницу ребенка. Конечно, когда подпаница загружает jQuery.js, она напрямую извлекается из кэша и, как правило, больше не беспокоит сервер.
Однако, поскольку родительская страница была загружена, почему страница ребенка должна быть снова загружена? Можно ли напрямую загружать его на родительскую страницу? Я искал в Интернете, и никто этого не делал. Может быть, я слишком альтернатива, я просто хочу реализовать этот метод. Преимущество заключается в том, что все файлы JS загружаются на родительской странице, а на странице детей напрямую используется JS, загруженный на родительскую страницу, так что детской странице не нужно связываться с файлами JS. Это также может быть более эффективным. В конце концов, даже если вы используете кэш для загрузки, вам нужно вынести суждение. Затем, выполняя погрузочное действие, все равно будет немного потери. Чем больше файлов JS, тем более очевидным будет.
Так как реализовать это, кажется, просто подумать об этом.
Используйте jQuery на родительской странице
Var aa = $ ('div'); // Найти все divs на родительской странице
Возможно ли это на подпаке?
Var bb = top. $ ('Div'); // Div можно найти, но это не Div на детской странице, а DIV на родительской странице.
Что происходит? Причина - диапазон поиска. jQuery имеет три параметра. Мы обычно используем только первый, и последний игнорируется. Так что же является вторым параметром? Это диапазон поиска. Где будет поиск jQuery, когда нет указанного? Поиск на странице, которая загружает jQuery, вместо того, чтобы искать на странице, которая вызывает $.
Решение также очень простое, просто добавьте параметр
Var bb = top. $ ('Div', document); // Укажите диапазон поиска: документ под страницы
Подождите, это кажется очень раздражающим. При написании сценария мы должны также рассмотреть вопрос о том, выполняется ли этот скрипт на родительской странице или на детской странице?
Хорошо, сделайте простой пакет, чтобы избежать этой проблемы. Напишите функцию на подпадке
Кода -копия выглядит следующим образом:
функция $ (p1) {
вернуть топ. $ (P1, документ);
}
Хорошо, работа сделана? Конечно, нет! Чтобы предсказать, что произойдет дальше, прислушайтесь к следующему сбою.
PS: Предварительный просмотр следующего эпизода. Это конкретный код реализации, и есть некоторые идеи и идеи. Я не знаю, есть ли у вас что -то еще, чтобы знать. Если это так, пожалуйста, ответьте ниже. Сначала спасибо.