jquery slim что это | Все о Windows 10
На чтение 5 мин. Просмотров 40 Опубликовано
На CDNJS размещен пакет jquery.slim. Он имеет меньший размер. Каковы основные отличия от оригинала? Беглый взгляд на код не дал ответа, и на jquery.com я не нашел никаких ссылок о slim упаковке.
Итак, каковы различия между jquery.js и jquery.slim.js?
6 ответов
Глядя на код, я обнаружил следующие различия между jquery.js и jquery.slim.js:
В jquery.slim.js удалены следующие функции кода:
- jQuery.fn.extend
- jquery.fn.load
- jquery.each // Прикрепите набор функций для обработки общих событий AJAX
- jQuery.expr.filters.animated
- настройки ajax, такие как jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, jQuery.ajaxTransport, jQuery.ajaxSetup
- XML-разбор, как jQuery.parseXML,
- анимационные эффекты, такие как jQuery.easing, jQuery.Animation, jQuery.speed
Наряду с обычной версией jQuery, которая включает в себя модули Ajax и эффектов, мы выпускаем «тонкую» версию, которая исключает эти модули. В общем, это исключает ajax, эффекты и устаревший код.
Размер файла (gzipped) примерно на 6 КБ меньше, 23,6 КБ против 30 КБ.
В настоящее время наиболее авторитетным ответом, по-видимому, является этот вопрос , в котором говорится, что «это пользовательская сборка jQuery, исключающая эффекты, ajax и устаревший код». Подробности будут объявлены в jQuery 3.0.
Я подозреваю, что обоснование исключения этих компонентов из библиотеки jQuery заключается в признании все более распространенного сценария использования jQuery в сочетании с другой средой JS, такой как Angular или React. В этих случаях использование jQuery в первую очередь предназначено для обхода и манипулирования DOM, поэтому исключение тех компонентов, которые либо устарели, либо предоставлены платформой, позволяет уменьшить размер файла примерно на 20%.
Стройное телосложение
Иногда вам не нужен ajax, или вы предпочитаете использовать одну из многих автономных библиотек, которые фокусируются на запросах ajax. И часто проще использовать комбинацию CSS и манипуляции с классами для всех ваших веб-анимаций. Наряду с обычной версией jQuery, которая включает в себя модули Ajax и Effects, мы выпустили «тонкую» версию, которая исключает эти модули. В общем, это исключает ajax, эффекты и устаревший код. В настоящее время размер jQuery очень редко влияет на производительность при загрузке, но тонкая сборка примерно на 6 тыс. Байт сжата по сравнению с обычной версией — 23,6 тыс. Против 30 тыс. Байт.
At CDNJS jquery.slim package is placed. It has a smaller size. What are the major differences from an original? A quick look at the code didn’t bring the answer, and at the jquery.com I’ve not found any reference about slim package.
So, what are the differences between jquery.js and jquery.slim.js ?
6 Answers 6
Looking at the code I found the following differences between jquery.js and jquery.slim.js:
In the jquery.slim.js, the following features are removed:
- jQuery.fn.extend
- jquery.fn.load
- jquery.each // Attach a bunch of functions for handling common AJAX events
- jQuery.expr.filters.animated
- ajax settings like jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, jQuery.ajaxTransport, jQuery.ajaxSetup
- xml parsing like jQuery.parseXML,
- animation effects like jQuery.easing, jQuery.Animation, jQuery.speed
Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code.
The file size (gzipped) is about 6k smaller, 23.6k vs 30k.
At this time, the most authoritative answer appears to be in this issue, which states «it is a custom build of jQuery that excludes effects, ajax, and deprecated code.» Details will be announced with jQuery 3.0.
I suspect that the rationale for excluding these components of the jQuery library is in recognition of the increasingly common scenario of jQuery being used in conjunction with another JS framework like Angular or React. In these cases, the usage of jQuery is primarily for DOM traversal and manipulation, so leaving out those components that are either obsolete or are provided by the framework gains about a 20% reduction in file size.
Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k.
I could see $.ajax is removed from jQuery slim 3.2.1
Below is the comment from the slim version with the features removed
Собственно не понятно, что происходит: window.jQuery || document.write(‘
Как это работает? и зачем?
- Вопрос задан более года назад
- 415 просмотров
Это fallback на случай, если из CDN jquery не загрузится.
javascript — В чем разница между jquery min js и slim js
Версия Slim легче, чем версия min. Я пробовал оба, но не нашел никакой разницы. Это такие же?
1
Ariful Islam 19 Ноя 2020 в 04:32
2 ответа
Лучший ответ
jQuery slim, в отличие от полной библиотеки jQuery:
исключает модули ajax и эффектов
Это существует как в минифицированной, так и в неминифицированной форме:
https://code.jquery.com/jquery-3.5.1.slim.min.js
https://code.jquery.com/jquery-3.5.1.slim.js
JQuery в целом может обслуживаться как минифицированным, так и не минифицированным. Он также может использоваться как тонкая версия или как полная версия.
Минификация — это процесс, с помощью которого символы в скрипте сжимаются , сохраняя при этом функциональность. Например,
var someLongVariableName можно преобразовать с помощью минификации в var c.Таким образом, тонкая сборка и минифицированная сборка — это не одно и то же, хотя у них схожие цели — уменьшить количество кода, который необходимо отправить по сети.
Если вам не нужны модули jQuery ajax и эффекты, используйте для производства тонкую, миниатюрную версию. Если вам нужны модули ajax или эффектов, не используйте тонкую версию; используйте уменьшенную полную версию для производства. Для разработки используйте унифицированную версию, чтобы ошибки внутри jQuery были понятны.
1
CertainPerformance 19 Ноя 2020 в 01:35
Тонкая сборка, исключающая модули ajax и эффектов, небольшие различия между min и slim.min:
Jquery.slim.min.js (сжатая / производственная сборка)
Jquery.slim.js (несжатая / разработка)
0
Wasif Hasan 19 Ноя 2020 в 01:35
Использование интерфейса командной строки LibMan с ASP.NET Core
- Чтение занимает 6 мин
В этой статье
Автор: Скотт Адди (Scott Addie)By Scott Addie
Интерфейс командной строки LibMan (LibMan CLI) — это кроссплатформенная программа, которая поддерживается везде, где поддерживается .NET Core.The LibMan CLI is a cross-platform tool that’s supported everywhere .NET Core is supported.
Предварительные требованияPrerequisites
УстановкаInstallation
Чтобы установить LibMan CLI, выполните следующую команду:To install the LibMan CLI:
dotnet tool install -g Microsoft.Web.LibraryManager.Cli
Глобальное средство .NET Core устанавливается из пакета NuGet Microsoft.Web.LibraryManager.Cli.A .NET Core Global Tool is installed from the Microsoft.Web.LibraryManager.Cli NuGet package.
Чтобы установить LibMan CLI из определенного источника пакета NuGet, выполните следующую команду:To install the LibMan CLI from a specific NuGet package source:
dotnet tool install -g Microsoft.Web.LibraryManager.Cli --version 1.0.94-g606058a278 --add-source C:\Temp\
В предыдущем примере глобальное средство .NET Core устанавливается из файла C:\Temp\Microsoft.Web.LibraryManager.Cli.1.0.94-g606058a278.nupkg на локальном компьютере Windows.In the preceding example, a .NET Core Global Tool is installed from the local Windows machine’s
ИспользованиеUsage
После успешной установки CLI можно использовать следующую команду:After successful installation of the CLI, the following command can be used:
libman
Чтобы узнать установленную версию CLI, выполните следующую команду:To view the installed CLI version:
libman --version
Чтобы просмотреть доступные команды CLI, выполните следующую команду:To view the available CLI commands:
libman --help
Приведенная выше команда выводит результат наподобие следующего:The preceding command displays output similar to the following:
1.0.163+g45474d37ed
Usage: libman [options] [command]
Options:
--help|-h Show help information
--version Show version information
Commands:
cache List or clean libman cache contents
clean Deletes all library files defined in libman.json from the project
init Create a new libman.json
install Add a library definition to the libman.json file, and download the
library to the specified location
restore Downloads all files from provider and saves them to specified
destination
uninstall Deletes all files for the specified library from their specified
destination, then removes the specified library definition from
libman.json
update Updates the specified library
Use "libman [command] --help" for more information about a command.
Доступные команды CLI описываются в следующих разделах.The following sections outline the available CLI commands.
Инициализация LibMan в проектеInitialize LibMan in the project
Команда libman init создает файл libman.json, если он еще не существует.The libman init command creates a libman.json file if one doesn’t exist. Файл создается с содержимым шаблона по умолчанию.The file is created with the default item template content.
Краткий обзорSynopsis
libman init [-d|--default-destination] [-p|--default-provider] [--verbosity]
libman init [-h|--help]
ПараметрыOptions
Для команды libman init доступны следующие параметры:The following options are available for the libman init command:
-d|--default-destination <PATH>Путь относительно текущей папки.A path relative to the current folder. Файлы библиотеки устанавливаются в этом расположении, если в файле libman.json свойство
destinationдля библиотеки не задано.Library files are installed in this location if nodestinationproperty is defined for a library in libman.json. Значение<PATH>записывается в свойствоdefaultDestinationв файле libman.json.The<PATH>value is written to thedefaultDestinationproperty of libman.json.-p|--default-provider <PROVIDER>Поставщик, который будет использоваться, если поставщик для данной библиотеки не указан.The provider to use if no provider is defined for a given library. Значение
<PROVIDER>записывается в свойствоdefaultProviderв файле libman.json.The<PROVIDER>value is written to thedefaultProviderproperty of libman.json. Замените<PROVIDER>одним из следующих значений:Replace<PROVIDER>with one of the following values:cdnjsfilesystemjsdelivrunpkg
-h|--helpОтображение справочных сведений.Show help information.
--verbosity <LEVEL>Задание уровня детализации результатов.Set the verbosity of the output. Замените
<LEVEL>одним из следующих значений:Replace<LEVEL>with one of the following values:
ПримерыExamples
Чтобы создать файл libman.json в проекте ASP.NET Core, выполните указанные ниже действия.To create a libman.json file in an ASP.NET Core project:
Перейдите в корневой каталог проекта.Navigate to the project root.
Выполните следующую команду:Run the following command:
libman initВведите имя поставщика по умолчанию или нажмите клавишу
Enter, чтобы использовать поставщик CDNJS по умолчанию.Type the name of the default provider, or pressEnterto use the default CDNJS provider. Допустимы следующие значения:Valid values include:cdnjsfilesystemjsdelivrunpkg
В корневой каталог проекта добавляется файл libman.json со следующим содержимым:A libman.json file is added to the project root with the following content:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": []
}
Добавление файлов библиотекиAdd library files
Команда libman install скачивает и устанавливает файлы библиотеки в проект.The libman install command downloads and installs library files into the project. Если файл libman.json еще не существует, он создается.A libman.json file is added if one doesn’t exist. В файле libman.json сохраняются данные конфигурации для файлов библиотеки.The libman.json file is modified to store configuration details for the library files.
Краткий обзорSynopsis
libman install <LIBRARY> [-d|--destination] [--files] [-p|--provider] [--verbosity]
libman install [-h|--help]
АргументыArguments
LIBRARY
Имя устанавливаемой библиотеки.The name of the library to install. В имени может использоваться нотация номера версии (например, @1.2.0).This name may include version number notation (for example, @1.2.0).
ПараметрыOptions
Для команды libman install доступны следующие параметры:The following options are available for the libman install command:
-d|--destination <PATH>Расположение для установки библиотеки.The location to install the library. Если не указано, используется расположение по умолчанию.If not specified, the default location is used. Если в файле libman.json свойство
defaultDestinationне указано, этот параметр является обязательным.If nodefaultDestinationproperty is specified in libman.json, this option is required.--files <FILE>Укажите имя файла, который необходимо установить из библиотеки.Specify the name of the file to install from the library. Если не указано, устанавливаются все файлы из библиотеки.If not specified, all files from the library are installed. Для каждого устанавливаемого файла необходимо задать один параметр
--files.Provide one--filesoption per file to be installed. Также поддерживаются относительные пути.Relative paths are supported too. Например,--files dist/browser/signalr.js.For example:--files dist/browser/signalr.js.-p|--provider <PROVIDER>Имя поставщика, используемого для получения библиотеки.The name of the provider to use for the library acquisition. Замените
<PROVIDER>одним из следующих значений:Replace<PROVIDER>with one of the following values:cdnjsfilesystemjsdelivrunpkg
Если значение не указано, используется свойство
defaultProviderиз файла libman.json.If not specified, thedefaultProviderproperty in libman.json is used. Если в файле libman.json свойствоdefaultProviderне указано, этот параметр является обязательным.If nodefaultProviderproperty is specified in libman.json, this option is required.
-h|--helpОтображение справочных сведений.Show help information.
--verbosity <LEVEL>Задание уровня детализации результатов.Set the verbosity of the output. Замените
<LEVEL>одним из следующих значений:Replace<LEVEL>with one of the following values:
ПримерыExamples
Рассмотрим следующий файл libman.json:Consider the following libman.json file:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": []
}
Чтобы установить файл jquery.min.js jQuery версии 3.2.1 в папку wwwroot/scripts/jquery с использованием поставщика CDNJS, выполните следующую команду:To install the jQuery version 3.2.1 jquery.min.js file to the wwwroot/scripts/jquery folder using the CDNJS provider:
libman install jquery@3.2.1 --provider cdnjs --destination wwwroot/scripts/jquery --files jquery.min.js
Содержимое файла libman.json выглядит примерно так:The libman.json file resembles the following:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.2.1",
"destination": "wwwroot/scripts/jquery",
"files": [
"jquery.min.js"
]
}
]
}
Чтобы установить файлы calendar.js и calendar.css из папки C:\temp\contosoCalendar\ с использованием поставщика файловой системы, выполните следующую команду:To install the calendar.js and calendar.css files from C:\temp\contosoCalendar\ using the file system provider:
libman install C:\temp\contosoCalendar\ --provider filesystem --files calendar.js --files calendar.css
Приведенный ниже запрос появляется по двум причинам:The following prompt appears for two reasons:
- В файле libman.json нет свойства
defaultDestination.The libman.json file doesn’t contain adefaultDestinationproperty. - Команда
libman installне содержит параметра-d|--destination.Thelibman installcommand doesn’t contain the-d|--destinationoption.
После принятия назначения по умолчанию содержимое файла libman.json будет выглядеть примерно так:After accepting the default destination, the libman.json file resembles the following:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.2.1",
"destination": "wwwroot/scripts/jquery",
"files": [
"jquery.min.js"
]
},
{
"library": "C:\\temp\\contosoCalendar\\",
"provider": "filesystem",
"destination": "wwwroot/lib/contosoCalendar",
"files": [
"calendar.js",
"calendar.css"
]
}
]
}
Восстановление файлов библиотекRestore library files
Команда libman restore устанавливает файлы библиотеки, определенные в файле libman.json.The libman restore command installs library files defined in libman.json. Действуют следующие правила.The following rules apply:
- Если файла libman.json нет в корневом каталоге проекта, возвращается ошибка.If no libman.json file exists in the project root, an error is returned.
- Если для библиотеки указан поставщик, свойство
defaultProviderв файле libman.json игнорируется.If a library specifies a provider, thedefaultProviderproperty in libman.json is ignored. - Если для библиотеки указано назначение, свойство
defaultDestinationв файле libman.json игнорируется.If a library specifies a destination, thedefaultDestinationproperty in libman.json is ignored.
Краткий обзорSynopsis
libman restore [--verbosity]
libman restore [-h|--help]
ПараметрыOptions
Для команды libman restore доступны следующие параметры:The following options are available for the libman restore command:
-h|--helpОтображение справочных сведений.Show help information.
--verbosity <LEVEL>Задание уровня детализации результатов.Set the verbosity of the output. Замените
<LEVEL>одним из следующих значений:Replace<LEVEL>with one of the following values:
ПримерыExamples
Чтобы восстановить файлы библиотеки, определенные в файле libman.json, выполните следующую команду:To restore the library files defined in libman.json:
libman restore
Удаление файлов библиотекDelete library files
Команда libman clean удаляет файлы библиотек, восстановленные ранее с помощью LibMan.The libman clean command deletes library files previously restored via LibMan. Папки, которые становятся пустыми после выполнения этой операции, удаляются.Folders that become empty after this operation are deleted. Конфигурации, связанные с файлами библиотек, в свойстве libraries файла libman.json не удаляются.The library files’ associated configurations in the libraries property of libman.json aren’t removed.
Краткий обзорSynopsis
libman clean [--verbosity]
libman clean [-h|--help]
ПараметрыOptions
Для команды libman clean доступны следующие параметры:The following options are available for the libman clean command:
-h|--helpОтображение справочных сведений.Show help information.
--verbosity <LEVEL>Задание уровня детализации результатов.Set the verbosity of the output. Замените
<LEVEL>одним из следующих значений:Replace<LEVEL>with one of the following values:
ПримерыExamples
Чтобы удалить файлы библиотек, установленные с помощью LibMan, выполните следующую команду:To delete library files installed via LibMan:
libman clean
Удаление файлов библиотекUninstall library files
Команда libman uninstall делает следующее:The libman uninstall command:
- удаляет все файлы, связанные с указанной библиотекой, из назначения в файле libman.json;Deletes all files associated with the specified library from the destination in libman.json.
- удаляет связанную конфигурацию библиотеки из файла libman.json.Removes the associated library configuration from libman.json.
В следующих случаях возникает ошибка:An error occurs when:
- файла libman.json нет в корневом каталоге проекта;No libman.json file exists in the project root.
- указанная библиотека не существует.The specified library doesn’t exist.
Если установлено несколько библиотек с одним и тем же именем, вам будет предложено выбрать одну из них.If more than one library with the same name is installed, you’re prompted to choose one.
Краткий обзорSynopsis
libman uninstall <LIBRARY> [--verbosity]
libman uninstall [-h|--help]
АргументыArguments
LIBRARY
Имя удаляемой библиотеки.The name of the library to uninstall. В имени может использоваться нотация номера версии (например, @1.2.0).This name may include version number notation (for example, @1.2.0).
ПараметрыOptions
Для команды libman uninstall доступны следующие параметры:The following options are available for the libman uninstall command:
-h|--helpОтображение справочных сведений.Show help information.
--verbosity <LEVEL>Задание уровня детализации результатов.Set the verbosity of the output. Замените
<LEVEL>одним из следующих значений:Replace<LEVEL>with one of the following values:
ПримерыExamples
Рассмотрим следующий файл libman.json:Consider the following libman.json file:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.3.1",
"files": [
"jquery.min.js",
"jquery.js",
"jquery.min.map"
],
"destination": "wwwroot/lib/jquery/"
},
{
"provider": "unpkg",
"library": "bootstrap@4.1.3",
"destination": "wwwroot/lib/bootstrap/"
},
{
"provider": "filesystem",
"library": "C:\\temp\\lodash\\",
"files": [
"lodash.js",
"lodash.min.js"
],
"destination": "wwwroot/lib/lodash/"
}
]
}
Для удаления jQuery можно выполнить любую из следующих команд:To uninstall jQuery, either of the following commands succeed:
libman uninstall jquerylibman uninstall jquery@3.3.1Чтобы удалить файлы Lodash, установленные с помощью поставщика
filesystem, выполните следующую команду:To uninstall the Lodash files installed via thefilesystemprovider:libman uninstall C:\temp\lodash\
Обновление версии библиотекиUpdate library version
Команда libman update обновляет библиотеку, установленную с помощью LibMan, до указанной версии.The libman update command updates a library installed via LibMan to the specified version.
В следующих случаях возникает ошибка:An error occurs when:
- файла libman.json нет в корневом каталоге проекта;No libman.json file exists in the project root.
- указанная библиотека не существует.The specified library doesn’t exist.
Если установлено несколько библиотек с одним и тем же именем, вам будет предложено выбрать одну из них.If more than one library with the same name is installed, you’re prompted to choose one.
Краткий обзорSynopsis
libman update <LIBRARY> [-pre] [--to] [--verbosity]
libman update [-h|--help]
АргументыArguments
LIBRARY
Имя обновляемой библиотеки.The name of the library to update.
ПараметрыOptions
Для команды libman update доступны следующие параметры:The following options are available for the libman update command:
-preПолучение последней предварительной версии библиотеки.Obtain the latest prerelease version of the library.
--to <VERSION>Получение определенной версии библиотеки.Obtain a specific version of the library.
-h|--helpОтображение справочных сведений.Show help information.
--verbosity <LEVEL>Задание уровня детализации результатов.Set the verbosity of the output. Замените
<LEVEL>одним из следующих значений:Replace<LEVEL>with one of the following values:
ПримерыExamples
Чтобы обновить jQuery до последней версии, выполните следующую команду:To update jQuery to the latest version:
libman update jqueryЧтобы обновить jQuery до версии 3.3.1, выполните следующую команду:To update jQuery to version 3.3.1:
libman update jquery --to 3.3.1Чтобы обновить jQuery до последней предварительной версии, выполните следующую команду:To update jQuery to the latest prerelease version:
libman update jquery -pre
Управление кэшем библиотекManage library cache
Команда libman cache управляет кэшем библиотек LibMan.The libman cache command manages the LibMan library cache. Поставщик filesystem не использует кэш библиотек.The filesystem provider doesn’t use the library cache.
Краткий обзорSynopsis
libman cache clean [<PROVIDER>] [--verbosity]
libman cache list [--files] [--libraries] [--verbosity]
libman cache [-h|--help]
АргументыArguments
PROVIDER
Используется только с командой clean.Only used with the clean command. Указывает кэш поставщика, который нужно очистить.Specifies the provider cache to clean. Допустимы следующие значения:Valid values include:
cdnjsfilesystemjsdelivrunpkg
ПараметрыOptions
Для команды libman cache доступны следующие параметры:The following options are available for the libman cache command:
-h|--helpОтображение справочных сведений.Show help information.
--verbosity <LEVEL>Задание уровня детализации результатов.Set the verbosity of the output. Замените
<LEVEL>одним из следующих значений:Replace<LEVEL>with one of the following values:
ПримерыExamples
Чтобы просмотреть имена кэшируемых библиотек для каждого поставщика, выполните одну из следующих команд:To view the names of cached libraries per provider, use one of the following commands:
libman cache listlibman cache list --librariesВыходные данные должны выглядеть примерно так:Output similar to the following is displayed:
Cache contents: --------------- unpkg: knockout react vue cdnjs: font-awesome jquery knockout lodash.js reactЧтобы просмотреть имена кэшируемых файлов библиотек для каждого поставщика, выполните следующую команду:To view the names of cached library files per provider:
libman cache list --filesВыходные данные должны выглядеть примерно так:Output similar to the following is displayed:
Cache contents: --------------- unpkg: knockout: <list omitted for brevity> react: <list omitted for brevity> vue: <list omitted for brevity> cdnjs: font-awesome metadata.json jquery metadata.json 3.2.1\core.js 3.2.1\jquery.js 3.2.1\jquery.min.js 3.2.1\jquery.min.map 3.2.1\jquery.slim.js 3.2.1\jquery.slim.min.js 3.2.1\jquery.slim.min.map 3.3.1\core.js 3.3.1\jquery.js 3.3.1\jquery.min.js 3.3.1\jquery.min.map 3.3.1\jquery.slim.js 3.3.1\jquery.slim.min.js 3.3.1\jquery.slim.min.map knockout metadata.json 3.4.2\knockout-debug.js 3.4.2\knockout-min.js lodash.js metadata.json 4.17.10\lodash.js 4.17.10\lodash.min.js react metadata.jsonОбратите внимание, что в представленных выше выходных данных показано, что для поставщика CDNJS кэшируются версии jQuery 3.2.1 и 3.3.1.Notice the preceding output shows that jQuery versions 3.2.1 and 3.3.1 are cached under the CDNJS provider.
Чтобы очистить кэш библиотек для поставщика CDNJS, выполните следующую команду:To empty the library cache for the CDNJS provider:
libman cache clean cdnjsПосле очистки кэша поставщика CDNJS команда
libman cache listвыводит следующее:After emptying the CDNJS provider cache, thelibman cache listcommand displays the following:Cache contents: --------------- unpkg: knockout react vue cdnjs: (empty)Чтобы очистить кэш для всех поддерживаемых поставщиков, выполните следующую команду:To empty the cache for all supported providers:
libman cache cleanПосле очистки кэша всех поставщиков команда
libman cache listвыводит следующее:After emptying all provider caches, thelibman cache listcommand displays the following:Cache contents: --------------- unpkg: (empty) cdnjs: (empty)
Дополнительные ресурсыAdditional resources
Микрофреймворк Slim PHP
Практически любой веб-разработчик, даже начинающий, скорее всего, слышал или знаком с понятием фреймворк. Напомню, что фреймворк – это набор библиотек (функций и методов), или если сказать несколько иначе это каркас, будущего приложения, то есть веб-проекта, сайта или скрипта. При этом, фреймворк предлагает определенные методы, которые избавляют программиста от стандартной рутинной работы, к примеру создание точки входа на сайт, создание ЧПУ, организация работы с базой данных и т.д. Таким образом, фреймворк позволяет создавать приложения быстрее, эффективнее и безопаснее. И, как правило, все фреймворки обладают огромнейшим функционалом и возможностями. Но очень часто при разработке небольших проектов, весь функционал фреймворка попросту не нужен, вполне достаточно только неких базовых возможностей. В этом случае на помощь приходят микрофреймворки.
Микрофреймворк – это тот же каркас будущего веб-приложения, но значительно упрощенный. То есть простой и быстрый в работе. Который, состоит только из определенного программного ядра будущего сайта, скрипта или веб-проекта. Главная задача микрофреймворков – это простое расширяемое ядро. В них нет абстрактного уровня базы данных, нет валидации форм или всего того, что уже реализовано в различных сторонних библиотеках, к которым можно обращаться. Микрофреймворк всегда можно расширить самостоятельно и добавить необходимую функциональность. При этом, так как микрофреймворк предлагает только базовый функционал – он очень прост в работе и изучении.
Поэтому в данном курсе мы с Вами научимся работать с одним из наиболее популярных микрофреймвоков – Slim. Курс будет разбит на два раздела. Первый – это теоретический, в котором, мы изучим основы работы с данным фреймворком, познакомимся с маршрутизаторами и узнаем, как формировать страницы и отображать данные на экране. Второй – это практический раздел, в котором мы создадим несложную систему управления контентом, используя инструменты данного фреймворка, и соответственно закрепим полученные знания.
Все уроки курса:
Количество уроков: 18
Продолжительность курса: 13:21:48
Автор: Виктор Гавриленко
Меня зовут Виктор Гавриленко. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении многих лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием.
Описание курса: В данном курсе мы с Вами научимся работать с одним из наиболее популярных микрофреймвоков – Slim. Курс будет разбит на два раздела. Первый – это теоретический, в котором мы изучим основы работы с данным фреймворком, познакомимся с маршрутизаторами и узнаем, как формировать страницы и отображать данные на экране. Второй – это практический раздел, в котором мы создадим несложную систему управления контентом, используя инструменты данного фреймворка, и соответственно закрепим полученные знания
Категории премиум
8.8. Работа с javascript/jQuery в Drupal 8. Что такое behaviors?
Для начала давайте вернемся к тому как подключать кастомные javascript файлы к нашей теме. В файле .libraries.yml нужно подключить js:
global-styling:version: 1.x
css:
theme:
css/style.css: {}
css/print.css: { media: print }
js:
js/custom.js: {}
dependencies:
— core/jquery
— core/jquery.once
Важно соблюдать отступы, чтобы он был в два пробела. Итак, мы подключили файл js/custom.js. Но этого не достаточно чтобы у нас работал jQuery. Дело в том что ядро друпала не требует jQuery и jQuery не подключается. Его нужно подключать отдельно:
dependencies:
— core/jquery
Также мы будем использовать jQuery.once(), это отдельный плагин для jQuery, для того чтобы навешивать события и методы на селектор только однажды.
dependencies:
— core/jquery
— core/jquery.once
Дело в том, что мы будем писать код javascript, который будет вызывать друпалом несколько раз по разным событиям. Поэтому нам будет нужен этот метод .once().
Теперь давайте добавим немного кода в файл custom.js:
(function ($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
$(context).find(‘.click-me’).once(‘myCustomBehavior’).click(function () {
alert(‘Hello, World!’);
});
}
};
})(jQuery);
Давайте разберем по порядку, что это все значит.
(function ($) {
})(jQuery);
Мы оборачиваем код jQuery в такую конструкцию, потому что jQuery в друпале запускается в режиме .noConflict(). Это нужно для того чтобы использовать знак доллара $, и это не конфликтовало с другими javascript фреймворками Prototype, MooTools. Вряд ли вам придется встретиться с этими фреймворками, jQuery плотно занял лидирующие позиции. Но в эту конструкцию вам придется оборачивать весь jQuery-код.
(function ($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
}
};
})(jQuery);
Вот мы и подошли к behavior’ам. Если вы пишите jQuery код в друпале, вам нужно его во-первых обернуть в function($), а во-вторых в behavior. Имя behavior’а должно быть уникальным, у нас в примере myModuleBehavior, но вам нужно для каждого behavior писать свое имя:
(function ($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
}
};
Drupal.behaviors.productPageBehavior = {
attach: function (context, settings) {
}
};
})(jQuery);
Используйте camelCase для наименования behavior’ов. Behavior вызывается при загрузке страницы, на каждый AJAX-запрос. Таким образом, когда на сайт подгружается новый контент и встраивается в структуру существующего сайта, то вызывается код из behavior, каждый раз. Это значительно отличается от конструкции:
$(document).ready(function () {
// Do some fancy stuff.
// Не используйте такой код в Drupal 8 (да и в Drupal 7 тоже).
});
которая вызывается только один раз при загрузке странице.
Если вы начали использовать behavior’ы и заметили, что у вас происходят странные события с сайтом, например через jQuery блок добавляется несколько раз:
(function ($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
// Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
$(‘.inner’).append(‘<p>Test</p>’);
}
};
})(jQuery);
При каждом ajax-запросе у вас будет добавлять еще один параграф Test. Поэтому нужно добавить функцию .once():
(function ($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
// Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
$(‘.inner’).once(‘add-paragraph’).append(‘<p>Test</p>’);
}
};
})(jQuery);
Еще одна фича behavior это переменная context. Каждый раз когда на сайт добавляется новый контент при загрузке страницы или через ajax, то весь новый контент находится в переменной context. Таким образом нам не нужно проходить все DOM дерево, после каждого ajax запроса, чтобы навесить событие на селектор. Достаточно пройтись только по context’у:
(function ($) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
// Behavior вызывается несколько раз на странице, не забывайте использовать функцию .once().
$(context).find(‘.inner’).once(‘add-paragraph’).append(‘<p>Test</p>’);
}
};
})(jQuery);
Теперь добавление параграфа написано в правильном друпал стиле. Конечно, вы можете использовать старую запись с document.ready(), но тогда это будет работать только один раз и медленнее чем через behavior’ы.
Если у вас возникнут вопросы по jQuery/javascript или предложения по дополнительным темам пишите в комментариях.
Краткое введение в Bootstrap
Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
Цель этого руководства — показать, как настроить систему для правильного использования JS- и CSS-компонентов Bootstrap.
Прим. перев. В статье не рассматривается целесообразность использования или не использования данного фреймворка. Как и любое другое решение, Bootstrap обладает своими преимуществами и недостатками.
Официальный сайт предлагает несколько способов подключения фреймворка к своему проекту:
- Скачать скомпилированные файлы JS и CSS. Скачав файлы на локальную машину, вы можете выбрать, какую версию включить в свой проект — минифицированную или стандартную. Этот вариант подходит при работе со своим проектом локально и не требует от проекта доступа в Интернет.
- Скачать исходники файлов. Этот вариант подойдёт, если вы знакомы с работой менеджеров задач и сборщиками (Gulp, Grunt, webpack) и уже создали собственную конфигурацию. В таком случае вы вряд ли захотите копировать исходники Bootstrap в свой проект.
- Включить в проект файлы через CDN. Похоже на первый вариант, но не придётся скачивать никаких файлов. Это самый быстрый способ использовать Bootstrap в своей разработке, но требует постоянного доступа к Интернету.
- Подключить через npm. Вероятно, самый оптимальный вариант, особенно, если вы собираетесь создать полноценное приложение, а не просто опытный образец.
- Варианты с использованием RubyGems, Composer и NuGet.
Стоит отметить, что Bootstrap предоставляет три готовых к использованию файла и может быть использован для:
- Создания прототипов или приложений.
- Реализации Reset (альтернативы Normalize.css).
- Вёрстки с помощью Grid.
При этом для использования двух последних опций нет необходимости включать в проект весь фреймворк целиком. Для этого есть отдельные файлы.
Практика
Предполагается, что вы знакомы с Sass и каким-либо сборщиком. Кроме того, вам потребуется npm.
Смотрите также: Развёрнутое руководство по Sass/SCSS
Сначала нужно добавить в проект необходимые зависимости:
npm init -y && npm i bootstrap jquery-slim popper.jsТиповая структура проекта выглядит так:
. ├── src │ ├── scripts │ │ ├── app │ │ │ └── .gitkeep │ │ ├── vendor │ │ │ ├── bootstrap.js │ │ │ └── jquery.js │ │ ├── app.js │ │ └── vendor.js │ ├── styles │ │ ├── app │ │ │ ├── _base.scss │ │ │ └── _variables.scss │ │ ├── vendor │ │ │ └── bootstrap │ │ │ ├── _core.scss │ │ │ ├── _main.scss │ │ │ └── _variables.scss │ │ ├── app.scss │ │ └── vendor.scss │ └── index.html ├── package.json └── webpack.config.js
Стоит пояснить, какие преимущества предоставляет такая структура. Сначала рассмотрим папку styles, а затем перейдём к scripts.
Styles
Эта папка содержит две вложенные директории app и vendor, а также два файла с теми же именами.
- Папка
appбудет содержать все компоненты вашего приложения, переменные, настраиваемые стили и так далее. - Папка
vendorиспользуется для зависимостей. В данном случае это только Bootstrap, расположенный в соответствующей директории. Для каждой зависимости выделяется отдельная вложенная папка.
Необходимо подключить Bootstrap и код нашего приложения в файле app.scss. Это делается следующим образом:
@import 'vendor/bootstrap/core';
@import 'app/variables';
@import 'app/base';Теперь обратите внимание на папку styles/app. Там всего два файла:
- В файле
_baseописываются стили. Может расширяться с помощьюNormalize.css. - В
_variablesразмещаются переменные приложения.
В vendor.scss импортируются зависимости. Сейчас единственная наша зависимость — Bootstrap, поэтому этот файл содержит только одну строку.
@import 'vendor/bootstrap/main';Рассмотрим файлы в папке styles/vendor/bootstrap.
- В
_coreимпортируются наши переменные и три основных файла Bootstrap, без которых фреймворк не сможет работать:
@import 'variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins'; _mainимпортирует файл_core.scssвашего проекта в самом верху, а также все необходимые файлы Bootstrap SASS из папкиnode_modules:
@import 'core';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';
В Webpack (автор использует этот сборщик) знак тильды (~) указывает, что файлы нужно искать в папке node_modules. Если вы используете, например, Grunt, то нужно установить grunt-sass-tilde-importer. Если какие-то из представленных компонентов не использованы в проекте, ни в коем случае не надо удалять сами файлы, нужно лишь закомментировать их импорт.
_variablesизначально пуст. В нём переопределяют переменные Bootstrap под конкретный проект.
В каждой переменной Bootstrap установлен флаг !default. Таким образом, если проект содержит заранее определённые переменные, то они будут использованы вместо дефолтных.
Scripts
Чтобы сделать скрипты модульными, нужно включить в проект только необходимые компоненты. Однако в Bootstrap это не такая простая задача. Подробно этот процесс описан в документации к фреймворку.
Начать следует с файла scripts/vendor.js, который просто импортирует файлы из папки vendor:
import './vendor/jquery'
import './vendor/bootstrap' Смотрите также: Как отказаться от jQuery в современном фронтенде
Необходимо инициализировать jQuery в объекте window, в противном случае Bootstrap не сможет скомпилироваться. Кроме того, это всё равно придётся сделать, если вы планируете использовать jQuery в приложении. Импорт jQuery в файле scripts/vendor/jquery.js:
import jQuery from 'jquery'
window.$ = window.jQuery = jQueryКак и в файле vendor, придётся импортировать каждый модуль отдельно. Вы также можете закомментировать неиспользуемые компоненты, чтобы исключить их из проекта. Содержимое файла scripts/vendor/jquery.js:
// Core
import Util from 'bootstrap/js/src/util'
// Components
import Alert from 'bootstrap/js/src/alert'
import Button from 'bootstrap/js/src/button'
import Carousel from 'bootstrap/js/src/carousel'
import Collapse from 'bootstrap/js/src/collapse'
import Dropdown from 'bootstrap/js/src/dropdown'
import Modal from 'bootstrap/js/src/modal'
import Popover from 'bootstrap/js/src/popover'
import Scrollspy from 'bootstrap/js/src/scrollspy'
import Tab from 'bootstrap/js/src/tab'
import Tooltip from 'bootstrap/js/src/tooltip' Следует отметить, что модуль Util используется везде, кроме компонентов Button и Popover.
Таким образом, скомпилировав Bootstrap в отдельный файл, можно применять функции и переменные ядра фреймворка в любом месте в проекте. Кроме того, благодаря реализации модульного принципа, ненужные компоненты легко отключить.
Примеры использования
SCSS
Миксины Bootstrap можно использовать в приложении глобально:
//styles/app/_base.scss
:root {
font-size: 14px;
@include media-breakpoint-up('md.) {
font-size: 16px;
}
}Можно использовать дефолтные значения переменных и переопределять их:
// styles/app/_variables.scss
$font-family: 'Roboto Condensed', $font-family-sans-serif;
// styles/app/_base.scss
body {
font-family: $font-family;
} JavaScript
Можно создавать экземпляры любых компонентов Bootstrap в файле scripts/app.js:
$(function () {
$('#dummy-modal').modal('show')
}) Чтобы лучше разобраться, вы можете изучить полностью настроенный и функционирующий проект Webpack v4 Configuration, в котором реализована описанная логика. Это хороший пример того, как можно настроить Bootstrap под себя.
Также рекомендуем обратить внимание на видеокурс «Bootstrap для начинающих».
Перевод статьи Bootstrap Framework — Best Practices
⚙PLAYSTATION 4 SLIM — ДОСУГ ЦИФРОВОЙ
Сентябрь также принес с новостями в играх, если мы видели несколько месяцев назад, когда Xbox пытался заново изобрести свою концепцию консоли с Xbox One S, PlayStation не хотела быть меньше и также делает ставку на Рождество. Сектор видеоигр находится на подъеме, и компании хотят воспользоваться этой возможностью, чтобы соблазнить публику.
Хотя в телефонии обычно существуют дифференцированные полосы, к которым пользователи стремятся по-разному, в видео консолях это еще более заметно. Игроки обычно являются последователями консольного бренда, которые стремятся следовать с этого момента и редко переключаются на соревнование.
Поклонники PlayStation ожидали новостей в формате PS4 и вот они. Слухи о том, что ждет будущего PS4 Neo, компания решает обновить свой корпус, сделав его тоньше и эффективнее . Я бы дополнил серию более мощной и толстой Pro-версией. Slim кажется преемником обычной тонкой модели приставок PS.
Игроки уже с нетерпением ждут возможности разместить свой новый PS4 Slim, который теперь будет куда проще, но
Что еще возвращает?
дизайн
Дизайн PS4 Slim — это то, что привлекает наибольшее внимание с первого взгляда и, следовательно, его имя. Его шасси по-прежнему выполнено из тех же пластиковых материалов с той же отделкой, но с уменьшенной толщиной в пределах 265 × 39 × 288 мм, его вес составляет около 2, 1 кг по сравнению с предыдущими 2, 8 кг. Размер уменьшается на 30% и на 16% легче, что позволяет легко размещать его где угодно и не беспокоиться о весе.
Дизайн сверху меняется, чтобы быть полностью отполированным с логотипом PlayStation в середине. Мы видим гораздо более закругленные края в отличие от углов, отмеченных в оригинальной модели.
Детали кажутся практически такими же, как и в предыдущей модели. В нижней части мы обнаруживаем новизну с деталями дизайна, заключающиеся в том, что различные характерные символы (треугольник, круг, квадратная рамка) вокруг символа PlayStation напечатаны на нижней опоре.
В передней части кнопки питания и извлечения меняются местами, и мы больше не находим ее справа в центральной передней части, а слева направо в выделении, которое имеет более традиционный характер. Прекратите быть настолько тонко тактильным и станьте более практичным с ясными эмблемами показа. Правда в том, что теперь при большем перемещении мешает, так как до минимального контакта кнопки были активированы. Это также означает отсутствие функционального индикатора, который предупреждал о состоянии консоли.
В конце мы видим различные порты, Ethernet, USB и сетевой вход в дополнение к разделу для извлечения жесткого диска.
Элемент управления DualShock 4 практически не изменяется, хотя мы находим небольшие различия, такие как цвет клавиш со стрелками, но вес, размер и функции практически одинаковы. Новинкой стало то, что, подключив пульт дистанционного управления к консоли с помощью кабеля, вы можете выбрать, как это сделать — через Bluetooth или USB. Кроме того, он также имеет новую световую панель на сенсорной панели, которая показывает состояние. Он обещает быть более эргономичным и адаптируемым к руке.
Еще одной новинкой являются услуги, которые включают или будут включать, например, опыт работы с очками VR, что будет доступно в ближайшие недели.
производительность
Производительность этой новой PS4 Slim улучшена благодаря специальному процессору с 8-ядерным чипом AMD Jaguar x86-64 . Он имеет память 8 ГБ GDDR5 для анимации самых мощных игр. Визуальная анимация взята из руки графического движка TFLOPS AMD 1, 84 на базе Radeon. Он совместим с HDR, так что у вас будет больше опыта в ваших любимых играх, как и в последнем обновлении прошивки из предыдущего. По производительности следует отметить, что он такой же, как и в традиционной PS4.
Несмотря на включение формата HDR, правда заключается в том, что в этом варианте контента недостаточно для игр, таких как Amazon или Netflix, которые, как поставщики, признают, что им нечего предложить в этом формате, а только то, что совместно использует 4K с HDR. На данный момент это вариант, который можно эксплуатировать мало.
Одна из вещей, которые обещают с этим новым PS4 Slim, — это большая эффективность и меньший нагрев в сочетании с шумоподавлением, что весьма заметно в предыдущей модели.
хранение
Как и в традиционной модели, мы находим две доступные версии, которые будут влиять на окончательную цену: 500 ГБ или 1 ТБ. Помните, что он поставляется с возможностью замены жесткого диска.
связь
В связи мы находим эти характеристики.
- 2 высокоскоростных порта USB ( USB 3.1 Gen1 )
- 1 порт AUX
- 1 порт Ethernet (10BASE-T, 100BASE-TX, 1000BASE-T)
- Wi-Fi IEEE 802.11 a / b / g / n / ac
- Bluetooth® 4.0 (улучшение по сравнению с предыдущим поколением 2.1)
- Выход HDMI совместим с выходом HDR
цена
Цена нового PS4 Slim составляет 299 евро и уже продается в отличие от Pro, который выйдет в ноябре и будет стоить на 100 евро дороже. Когда оставшийся запас будет закончен, этот Slim станет основной моделью PS4.
заключение
Новый PS4 slim отличается странным отличием от традиционного PS4: он на 30% компактнее и на 16% легче, поэтому его удобнее брать с собой в путешествие или куда-либо размещать. Дизайн заново изобретен с более округлыми концами и более функциональными кнопками, такими как передние кнопки.
Внутри он обещает меньше шума и большую эффективность, хотя ядро в основном то же самое. С совместимой системой HDR обещаны большие впечатления, но правда в том, что адаптированный к ней контент весьма скуден и вряд ли может быть использован в качестве преимущества, так как нет названий, которые поставляются с этой опцией, а поставщики включают материалы только с HDR и 4K.
Добрые намерения с моделью Slim, которую компания уже принимала в других случаях и которая стоит в цене. Мы советуем вам купить его, если у вас нет PS4, или если вам необходимо пространство, и вам нужна меньшая консоль.
В остальном вопросы о вкусах и деталях дизайна. Еще предстоит увидеть модель, которая делает большой скачок в качестве графики, да, рынок также должен адаптироваться к новым требованиям к контенту, иначе любой прогресс в консолях будет сорван.
Часто задаваемые вопросы о jQuery
Часто задаваемые вопросы о веб-технологиях, связанных с jQuery и jQuery.
Что такое jQuery?
jQuery — это библиотека JavaScript (НЕ РАМКА), созданная для более быстрого, простого и кроссбраузерного веб-дизайна.
jQuery — это элегантная, многофункциональная библиотека JavaScript, которая упрощает веб-анимацию, манипуляции с DOM, обработку событий и т. Д.
Что такое последняя версия jQuery?
Последняя версия jQuery — jQuery 3.4.1.
Кто использует jQuery?
Исследование показывает, что jQuery используется 74,1% всех веб-сайтов (июль 2019 г.).
JQuery мертв / устарел?
Я думаю, что jQuery никогда не умрет, пока существует DOM.
В связи с рождением и развитием различных фреймворков JavaScript (React, Angular, Vue) в последние годы jQuery стал менее популярным, чем в предыдущие годы.
Наша статистика показывает, что загрузка плагинов jQuery в последние годы была стабильной без значительного снижения (1 августа 2019 г.).
Куда поставить библиотеку jQuery и скрипт jQuery?
Я настоятельно рекомендую вам поместить библиотеку jQuery и скрипт jQuery в конец документа (но перед закрывающим тегом тела) для повышения производительности страницы.
Если вы используете плагин jQuery, не забудьте поместить плагин jQuery после jQuery и вызвать функцию в готовом документе.
Какую версию jQuery мне использовать?
Ваши клиенты все еще используют устаревшие браузеры (Internet Explorer 7/8/9)?
- Да -> jQuer 1.х
- Нет -> jQuery 3.x, 4.x
Используете ли вы в своем проекте анимацию и технологию AJAX?
- Да -> Обычная версия
- Нет -> Тонкая сборка
Что такое jQuery Slim Build?
Тонкая сборка jQuery представлена в финальном выпуске jQuery 3.0, который создан для уменьшения размера jQuery и повышения скорости загрузки страницы.
Slim build примерно на 6кбайт в сжатом виде меньше, чем обычная версия — 23.6к против 30к. Он исключает ajax, эффекты и устаревший код.
Как использовать плагины jQuery в WordPress?
БиблиотекаjQuery теперь по умолчанию интегрирована в ядро Wordpress.
Чтобы использовать плагин jQuery в своем плагине WordPress, просто загрузите скрипт и загрузите его в WordPress, а затем вызовите плагин в режиме совместимости с , чтобы избежать конфликтов (замените $ на jQuery) .
// обычный
$ (селектор) .plugin ({
// параметры, обратные вызовы и т. д.
})
// Режим совместимости
jQuery (селектор).плагин ({
// параметры, обратные вызовы и т. д.
})
Учитывает ли регистр в селекторах jQuery?
Да. JavaScript — это язык с учетом регистра.
Можно ли использовать jQuery с Javascript?
Конечно. Сам jQuery — это библиотека JavaScript. Он отлично работает с любым проектом JavaScript.
Можно ли использовать jQuery с React / Angular / Vue?
Да, но не рекомендуется.
Подготовка HTML для jQuery
В этой статье предполагается, что вы имеете базовое представление о HTML и CSS.Если HTML или CSS для вас новичок, мы рекомендуем вам изучить основы HTML и CSS, прежде чем пытаться использовать jQuery. См. Руководства по HTML от w3schools или их руководства по CSS, чтобы получить полезные советы по началу изучения HTML или CSS.
jQuery — это библиотека Javascript, которая упрощает использование Javascript. Это похоже на сокращенную форму Javascript. Вместо написания Javascript вы можете использовать короткое действие jQuery.
Подготовка HTML для jQuery
jQuery был создан специально для выбора элементов HTML и применения к ним действий.Эти действия могут быть любыми: от скрытия элементов до вызова действия при щелчке по элементу.
Чтобы сообщить HTML-документу, что вы используете jQuery, вам необходимо вызвать библиотеку jQuery. Вы можете сделать это двумя разными способами.
Ссылка на эту библиотеку должна быть , а затем для любого кода jQuery.
Добавить библиотеку jQuery CDN
Это более простой вариант. Все, что вам нужно сделать, это указать вашему HTML-документу, чтобы он извлекал библиотеку из ссылки на CDN библиотеки jQuery.
Существует много разных версий и CDN. Вы можете перейти на jQuery CDN — Последние стабильные версии, чтобы увидеть jQuery CDN. Для реализации просто найдите версию, которую вы хотите использовать, и выберите наиболее желаемый вариант: несжатая, уменьшенная, уменьшенная или уменьшенная. Это даст вам ссылку, которую вам нужно добавить в свой HTML-документ, чтобы вызвать библиотеку jQuery.
Вы также можете посетить статью Другие CDN для jQuery CDN от Google, Microsoft и т. Д. Они также дадут вам ссылку, которую вы можете использовать.
Добавьте выбранную ссылку прямо перед закрывающим элементом .
Пример
Атрибуты целостности и перекрестного происхождения подтверждают, что сторонние серверы не подвергались изменениям или манипуляциям.
Рекомендуется не ссылаться на библиотеку jQuery выше в коде, поскольку это может помешать загрузке документа HTML.
Скачать библиотеку jQuery
Загрузить библиотеку jQuery сложнее. Перейдите на веб-сайт jQuery, выберите метод загрузки и следуйте инструкциям по загрузке библиотеки jQuery на свой сервер. После того, как вы загрузили и настроили свою библиотеку jQuery, обязательно укажите на нее ссылку перед закрывающим элементом в своем HTML-документе.
Пример
Рекомендуется не ссылаться на библиотеку jQuery выше, поскольку это может помешать загрузке документа HTML.
jQuery — это программное обеспечение с открытым исходным кодом, разрешенное по лицензии MIT. jQuery не является продуктом Pair Networks, Inc., и Pair Networks не предоставляет никаких гарантий на jQuery. Обратите внимание, что доступно много уровней библиотек javascript. Проконсультируйтесь со своим ИТ-специалистом за советом и указаниями по подходящей библиотеке. Этот конкретный продукт может соответствовать вашим потребностям, а может и не соответствовать. Компания Pair Networks, Inc. предоставляет поддержку этого руководства для вашего удобства и не несет ответственности за производительность jQuery.Пожалуйста, внимательно прочтите условия и объем услуг для любой онлайн-услуги или продукта, которые вы собираетесь приобрести или использовать.
Как добавить jQuery из CDN? Список CDN jQuery для Google, Microsoft, Cloudflare — POFTUT
jQuery — популярный фреймворк и библиотека JavaScript, которая используется для обработки событий, анимации CSS и Ajax. jQuery — это библиотека с открытым исходным кодом, которая сделала ее очень популярной.CDN — это сеть доставки контента или сеть распространения контента, которая используется для распространения файлов, изображений, CSS, Javascript и HTML-контента по всему миру на разные серверы и предоставления клиенту ближайшего из них. Это сделает загрузку веб-страницы вневременной из-за физической близости.
Преимущества jQuery CDN
Как популярный фреймворк и библиотека JavaScript, jQuery предоставляется через CDN по всему миру. Это даст следующие преимущества, если CDN используется для jQuery.
- Может быть достигнуто более быстрое время загрузки веб-страницы или приложения.
- Более быстрое время загрузки приведет к лучшему SEO с улучшенной поисковой выдачей
- CDN более надежны, чем отдельные серверы, где время безотказной работы будет лучше.
- Уменьшите нагрузку на веб-сервер, перенеся jQuery в CDN.
Версии jQuery
jQuery предоставляется с разными версиями для меньшего размера или меньшей функциональности. Эти версии названы и названы ниже.
jquery.js — это обычный файл jQuery, который не является уменьшенным или уменьшенным. Эта версия на размер больше, чем другие.
jquery.min.js — это уменьшенная версия jQuery, в которой для уменьшения размера удалены пробелы и ненужные символы.
jquery.slim.js — это менее функциональная версия, в которой удалены некоторые менее используемые функции.
jquery.slim.min.js — это наименьшая версия, в которой удалены пробелы, ненужные символы и некоторые функции.
Локальный сервер jQuery
Начнем с локально обслуживаемого jQuery, что означает, что файл jQuery расположен на веб-сервере. Мы просто предоставим путь к jQuery для нашего веб-сервера.
<скрипт src = "jquery / 3.5.1 / jquery.slim.js ">
Добавить jQuery через Google CDN
Google обеспечивает поддержку CDN для jQuery через домен googleapis.com. Google CDN для jQuery можно использовать, как показано ниже, для нормальной, тонкой, минимальной и тонкой + минимальной версий.
Добавить jQuery через Microsoft CDN
Microsoft — еще одна компания, которая предоставляет CDN для библиотеки jQuery.Microsoft CDN для jQuery можно использовать, как показано ниже, для нормальной, тонкой, минимальной и тонкой + минимальной версий.
Добавить jQuery через CloudFlare CDN
Cloudflare — самый популярный сервис DDOS и CDN в сети. Cloudflare CDN для jQuery можно использовать, как показано ниже, для нормальной, тонкой, минимальной и тонкой + минимальной версий.
Размер файла jQuery
14 9025 байтов ) Δ +231 байт 19011 байт (18,57 КБ) Δ +2 258 байт 9025 байтов КБ) Δ +159 байтов КБ) Δ +4 862 байта байта байтов КБ) Δ +349 байтов КБ) Δ -14 267 байт байтов ) Δ +796 байтов КБ) Δ +794 байта| 1,2 | 79259 байтов (77,40 КБ) | 45707 байтов (44,64 КБ) | 24687 байтов (24,11 КБ) | 23515 байтов (22,96 КБ) | 13,956 байт (13,63 КБ) | ||
|---|---|---|---|---|---|---|---|
| 1.2.1 | 80,469 байт (78,58 КБ) Δ +1 210 байт | 46 437 байт (45,35 КБ) Δ +730 байт | 24,984 байта (24,984 байта)40 КБ) Δ +297 байтов | 23786 байтов (23,23 КБ) Δ +271 байтов | 14625 байтов (14,28 КБ) Δ +153 байта | 14099 байтов (13.77 КБ14 + байтов) | |
| 1.2.2 | 95 285 байтов (93.05 КБ) Δ +14 816 байтов | 52 656 байтов (51.42 КБ) Δ +6 219 байтов | 28 641 байтов (27.97 Δ27 КБ) | 27,207 байт (26,57 КБ) Δ +3,421 байт | 15,664 байта (15.30 КБ) Δ +1,039 байта | 15084 байта (14,73 КБ) Δ +985 байта | |
| 1.2.3 | 96 763 байта (94,50 КБ) Δ +1 478 байтов | КБ) Δ +1419 байтов | 28891 байт (28,21 КБ) Δ +250 байтов | 27,475 байтов (26,83 КБ) Δ +268 байтов | 15894 байта (15.52 КБ2) Δ + | 15 307 байтов (14,95 КБ) Δ +223 байта | |
| 1.2,4 | 97 623 байта (95,33 КБ) Δ +860 байтов | 54 620 байтов (53,34 КБ) Δ +545 байтов | 29 149 байтов (28,47 КБ) Δ +258 байтов | 16069 байт (15,69 КБ) Δ +175 байт | 15 458 байт (15,10 КБ) Δ +151 байт | ||
| 1,2,5 | 99,997 байт Δ +2 374 байта | 55 715 байтов (54.41 КБ) Δ +1,095 байта | 30274 байта (29,56 КБ) Δ +1,125 байта | 28,791 байт (28,12 КБ) Δ +1,085 байта | 16,725 байта (16,33 КБΔ) байт | 16108 байтов (15,73 КБ) Δ +650 байтов | |
| 1,2,6 | 100196 байтов (97,85 КБ) Δ +199 байтов | 55774 байтов (54,47 Δ2 9027 байтов) 9027 байтов | 30 345 байт (29,63 КБ) Δ +71 байт | 28 855 байт (28.18 КБ) Δ +64 байта | 16753 байта (16,36 КБ) Δ +28 байтов | 16131 байт (15,75 КБ) Δ +23 байта | |
| 1,3 | .20 (116,942) байта Δ +16,746 байтов | 55026 байтов (53,74 КБ) Δ -748 байтов | 34,446 байтов (33,64 КБ) Δ +4,101 байтов | 32,744 байтов (31,98 КБ +38255 | |||
| 18 409 байт (17.98 КБ) Δ +2 278 байтов | |||||||
| 1.3.1 | 117 446 байтов (114,69 КБ) Δ +504 байта | 55 272 байта (53.98 КБ) Δ +246 байтов | 32 912 байтов (32,14 КБ) Δ +168 байтов | 19 118 байтов (18,67 КБ) Δ +107 байтов | 18 523 байта (18,09 КБ) Δ +11 | ||
| 1.3.2 | 120 763 байта (117.93 КБ) Δ +3 317 байтов | 57 254 байта (55.91 КБ) Δ +1 982 байта | 35 354 байта (34.53 КБ) Δ +749 байтов | 33 597 байтов (32.81 КБΔ + байтов) | 19709 байт (19,25 КБ) Δ +591 байт | 19075 байт (18,63 КБ) Δ +552 байта | |
| 1,4 | 158,407 байт (154,69 Δ | 25627 байтов 69 838 байт (68,20 КБ) Δ +12 584 байта | 44 810 байт (43.76 КБ) Δ +9 456 байт | 42 503 байта (41,51 КБ) Δ +8 906 байтов | 23 673 байта (23,12 КБ) Δ +3 964 байта | 22 934 байта (22,40 Δ КБ) 9027 9027 | |
| 1.4.1 | 160 712 байт (156,95 КБ) Δ +2 305 байт | 70 843 байт (69,18 КБ) Δ +1 005 байт | 45 311 байт (44,25 Δ27 50 КБ) | 43079 байтов (42,07 КБ) Δ +576 байтов | 23996 байтов (23.43 КБ) Δ +323 байта | 23 246 байтов (22,70 КБ) Δ +312 байтов | |
| 1.4.2 | 163855 байтов (160,01 КБ) Δ +3 143 байта | 72,174 72,174 байта КБ) Δ +1 331 байт | 45 987 байт (44,91 КБ) Δ +676 байт | 43 670 байт (42,65 КБ) Δ +591 байт | 24 558 байт (23,98 КБΔ2 275 байт) | 23,793 байта (23,24 КБ) Δ +547 байтов | |
| 1.4.3 | 180 459 байтов (176,23 КБ) Δ +16 604 байта | 77 746 байтов (75,92 КБ) Δ +5 572 байта | 51 026 байтов (49,83 КБ) Δ +5 039 байтов | 48465 | 48465 КБ ) Δ +4,776 байта | 26,742 байта (26,12 КБ) Δ +2,184 байта | 25,872 байта (25,27 КБ) Δ +2079 байтов |
| 1,4,4 | байта (183,184 байта) Δ + 2725 байт | 78 601 байт (76.76 КБ) Δ +855 байтов | 51 690 байтов (50,48 КБ) Δ +664 байта | 49 041 байт (47,89 КБ) Δ +595 байтов | 27 073 байта (26,44 КБ Δ 33 + байта) | 26 194 байта (25,58 КБ) Δ +322 байта | |
| 1,5 | 211 978 байтов (207,01 КБ) Δ +28 794 байта | 84 362 байта (82,38 Δ254 902,38 275 902 75 275 60 671 байт (59,25 КБ) Δ +8 981 байт | 57 547 байт (56.20 КБ) Δ +8 506 байтов | 29 368 байтов (28,68 КБ) Δ +2 295 байтов | 28 272 байтов (27,61 КБ) Δ +2078 байтов | ||
| 1,5 | 85 260 байтов (83,26 КБ) Δ +898 байтов | 62 287 байтов (60,83 КБ) Δ +1616 байтов | 59 081 байт +1 (57,70 КБ 2 5271 байта) | 29 690 байт (28,99 КБ) Δ +322 байта | 28 590 байт (27.92 КБ) Δ +318 байт | ||
| 1.5.2 | 219 227 байт (214,09 КБ) Δ +2 387 байт | 85 925 байт (83,91 КБ) Δ +665 байт 63,1465 9025 байт КБ) Δ +859 байт | 59886 байт (58,48 КБ) Δ +805 байт | 29,921 байт (29,22 КБ) Δ +231 байт | 28821 байт (28,15 КБ) байт Δ + | ||
| 1,6 | 232 651 байт (227.20 КБ) Δ +13,424 байта | 90,518 байта (88,40 КБ) Δ +4,593 байта | 66,775 байта (65,21 КБ) Δ +3,629 байта | 63,343 байта (61,86 Δ КБ) 9027 | 31 607 байт (30,87 КБ) Δ +1 686 байт | 30 458 байт (29,74 КБ) Δ +1 637 байт | |
| 1,6.1 | 234 995 байтов (229,49 Δ 90) | 91 342 байта (89,20 КБ) Δ +824 байта | 67 432 байта (65.85 КБ) Δ +657 байтов | 63 937 байтов (62,44 КБ) Δ +594 байта | 31 952 байта (31.20 КБ) Δ +345 байтов | 30 813 байтов (30.09 КБ) байтов Δ | |
| 1.6.2 | 236202 байта (230,67 КБ) Δ +1207 байтов | байтов (89,41 КБ) Δ +214 байтов | 67775 байтов (66.19 Δ273 + КБ) | 64 271 байт (62,76 КБ) Δ +334 байта | 32 065 байт (31.31 КБ) Δ +113 байта | 30 916 байтов (30,19 КБ) Δ +103 байта | |
| 1.6.3 | 238009 байтов (232,43 КБ) Δ +1 807 байтов | КБ) Δ +70 байтов | 68 519 байтов (66,91 КБ) Δ +744 байта | 64 960 байтов (63,44 КБ) Δ +689 байтов | 32 070 байтов (31.32 КБ) 9027Δ +5 байтов | 30898 байт (30,17 КБ) Δ -18 байт | |
| 1.6,4 | 238 159 байтов (232,58 КБ) Δ +150 байтов | 91 669 байтов (89,52 КБ) Δ +43 байта | 68 572 байта (66,96 КБ) Δ +53 байта | байта ) Δ +15 байтов | 32 075 байтов (31,32 КБ) Δ +5 байтов | 30 911 байтов (30,19 КБ) Δ +13 байтов | |
| 1,7 | 249,159 Δ 9027 байтов (243,159 КБ) +11000 байт | 94020 байт (91.82 КБ) Δ +2,351 байт | 72,705 байт (71,00 КБ) Δ +4,133 байта | 68,886 байт (67,27 КБ) Δ +3,911 байт | 33,285 +1 байт (32,50Δ КБ) байт | 32 096 байтов (31,34 КБ) Δ +1 185 байтов | |
| 1,7.1 | 248 235 байтов (242,42 КБ) Δ -924 байта | 93 868 байтов (91,67 Δ ,67 КБ) | 72 382 байта (70,69 КБ) Δ -323 байта | 68 573 байта (66.97 КБ) Δ -313 байтов | 33156 байтов (32,38 КБ) Δ -129 байтов | 31,975 байтов (31,23 КБ) Δ -121 байтов | |
| 1.7.2 9025,85 | (25 КБ) Δ +4 646 байтов | 94840 байтов (92,62 КБ) Δ +972 байта | 73 768 байтов (72,04 КБ) Δ +1 386 байтов | 69 927 байтов (68.29 КБ) | 33 647 байт (32,86 КБ) Δ +491 байт | 32 469 байт (31.71 КБ) Δ +494 байта | |
| 1.8.0 | 258 377 байтов (252,32 КБ) Δ +5 496 байтов | 92555 байтов (90,39 КБ) Δ -2 285 байтов 76,14 9255 9025 КБ) Δ +3,176 байта | 72999 байтов (71,29 КБ) Δ +3,072 байта | 33089 байтов (32,31 КБ) Δ -558 байтов | 31957 байтов (31,21 КБ) Δ -5 | ||
| 1.8.1 | 261 525 байт (255.40 КБ) Δ +3 148 байтов | 92793 байта (90,62 КБ) Δ +238 байтов | 77 626 байтов (75,81 КБ) Δ +682 байта | 73 635 байтов (71.91 КБ) | 33 204 байта (32,43 КБ) Δ +115 байтов | 32 076 байтов (31,32 КБ) Δ +119 байтов | |
| 1.8.2 | 266882 байта (260,63 Δ 275 КБ) 9027 | 93436 байтов (91,25 КБ) Δ +643 байта | 79116 байтов (77.26 КБ) Δ +1490 байт | 75,121 байт (73,36 КБ) Δ +1,486 байт | 33,423 байта (32,64 КБ) Δ + 219 байтов | 32280 байт (31,52Δ Δ204 байта) байт | |
| 1,8,3 | 267 739 байт (261,46 КБ) Δ +857 байт | 93 637 байт (91,44 КБ) Δ +201 байт | 79,442 байта (77,58 Δ32 байт) | 75 426 байт (73,66 КБ) Δ +305 байт | 33 456 байт (32.67 КБ) Δ +33 байта | 32 275 байтов (31,52 КБ) Δ -5 байтов | |
| 1,9.0 | 267320 байтов (261,05 КБ) Δ -419 байтов | КБ) Δ -569 байтов | 79279 байтов (77,42 КБ) Δ -163 байта | 75 261 байт (73,50 КБ) Δ -165 байтов | 32 962 байта (32,19 КБ) Δ -49 | 31 803 байта (31,06 КБ) Δ -472 байта | |
| 1.10,0 | 273 810 байтов (267,39 КБ) Δ +6 490 байтов | 93026 байтов (90,85 КБ) Δ -42 байта | 81235 байтов (79,33 КБ) Δ +1 956 байтов | 7743 КБ ) Δ +1,882 байта | 32,786 байта (32,02 КБ) Δ -176 байтов | 31,688 байта (30,95 КБ) Δ -115 байтов | |
| 1.10,1 | 274 байта Δ +270 байтов | 93064 байта (90.88 КБ) Δ +38 байтов | 81 345 байтов (79,44 КБ) Δ +110 байтов | 77 204 байта (75,39 КБ) Δ +61 байт | 32 805 байтов (32,04 КБ) Δ +19 байтов | 31712 байтов (30,97 КБ) Δ +24 байта | |
| 1.10.2 | 273199 байтов (266,80 КБ) Δ -881 байт | 93107 байтов (90.92 Δ243 КБ) | 80969 байт (79,07 КБ) Δ -376 байт | 76890 байт (75.09 КБ) Δ -314 байтов | 32768 байтов (32,00 КБ) Δ -37 байтов | 31669 байтов (30,93 КБ) Δ -43 байта | |
| 1.11.0 | (272.944 байта) КБ) Δ +9,745 байта | 96,381 байта (94,12 КБ) Δ +3,274 байта | 83,915 байта (81,95 КБ) Δ +2,946 байта | 79,584 байта (77,72Δ 902 Δ | байта) | 33 417 байтов (32,63 КБ) Δ +649 байтов | 32 243 байта (31.49 КБ) Δ +574 байта |
| 1.11.1 | 282766 байтов (276,14 КБ) Δ -178 байтов | 95786 байтов (93,54 КБ) Δ -595 байтов 84,2964 | 79,820 байтов (77,95 КБ) Δ +236 байтов | 33 266 байтов (32,49 КБ) Δ -151 байт | 32 099 байтов (31,35 КБΔ-142 байтов) Δ | ||
| 1.11.2 | 284 184 байта (277.52 КБ) Δ +1418 байтов | 95931 байтов (93,68 КБ) Δ +145 байтов | 84818 байтов (82,83 КБ) Δ +554 байтов | 80338 байтов (78,46 КБ Δ + байтов) | 33 321 байт (32,54 КБ) Δ +55 байтов | 32 169 байт (31,42 КБ) Δ +70 байт | |
| 1.11.3 | 284 394 байта (277,73 Δ27 2 КБ) | 95 957 байтов (93,71 КБ) Δ +26 байтов | 84934 байта (82.94 КБ) Δ +116 байтов | 80447 байтов (78,56 КБ) Δ +109 байтов | 33 318 байтов (32,54 КБ) Δ -3 байта | 32 173 байта (31,42 КБ) байта | |
| 1.12.0 | 294 161 байт (287,27 КБ) Δ +9 767 байт | 97 362 байта (95,08 КБ) Δ +1 405 байт | 87 906 байтов 9027 Δ 858 Δ | 83 203 байта (81,25 КБ) Δ +2 756 байтов | 33 878 байтов (33.08 КБ) Δ +560 байтов | 32 657 байтов (31,89 КБ) Δ +484 байта | |
| 2.0.0 | 240196 байтов (234,57 КБ) Δ -53,965 байтов | 83,095 | 71 101 байт (69,43 КБ) Δ -16 805 байт | 67 379 байт (65,80 КБ) Δ -15 824 байта | 29 002 байта (28,32 Δ 274 КБ) 9027 | 28 070 байт (27,41 КБ) Δ -4 587 байт | |
| 2.0,1 | 242 727 байтов (237,04 КБ) Δ +2,531 байта | 83519 байтов (81,56 КБ) Δ +424 байта | 71919 байтов (70,23 КБ) Δ +818 байтов | 68,125 | 29237 байтов (28,55 КБ) Δ +235 байтов | 28279 байтов (27,62 КБ) Δ +209 байтов | |
| 2.0.2 | байтов (242,92 КБ) Δ +188 байт | 83 501 байт (81.54 КБ) Δ -18 байтов | 72 015 байтов (70,33 КБ) Δ +96 байтов | 68 268 байтов (66,67 КБ) Δ +93 байта | 29 250 байтов (28,56 КБ) Δ +13 байтов | 28 291 байт (27,63 КБ) Δ +12 байтов | |
| 2.0.3 | 242 142 байта (236,47 КБ) Δ -773 байта | 83 612 байтов (81,61 Δ5 27 КБ) | 71726 байтов (70,04 КБ) Δ -289 байтов | 68020 байтов (66.43 КБ) Δ -248 байтов | 29 246 байтов (28,56 КБ) Δ -4 байта | 28 275 байтов (27,61 КБ) Δ -16 байтов | |
| 2,1,0 | 244 КБ) Δ +2 821 байт | 83 615 байтов (81,66 КБ) Δ +3 байта | 72 509 байтов (70,81 КБ) Δ +783 байта | 68 589 байтов (66.98 КБ) Δ + | 29 344 байта (28,66 КБ) Δ +98 байтов | 28 307 байтов (27.64 КБ) Δ +32 байта | |
| 2.1.1 | 247 351 байт (241,55 КБ) Δ +2 388 байтов | 84 245 байтов (82,27 КБ) Δ +6 3030 байтов 71,58 | 69 315 байтов (67,69 КБ) Δ +726 байтов | 29 538 байтов (28,85 КБ) Δ +194 байта | 28 487 байтов (27,82 КБ) Δ280 байтов Δ | ||
| 2.1.2 | 247380 байт (241.58 КБ) Δ +29 байтов | 84 318 байтов (82,34 КБ) Δ +73 байта | 73 398 байтов (71,68 КБ) Δ +95 байтов | 69 456 байтов (67,83 КБ14) Δ + | 29 561 байт (28,87 КБ) Δ +23 байта | 28 514 байтов (27,85 КБ) Δ +27 байтов | |
| 2,1.3 | 247 387 байтов (241,59 Δ 9027 байтов | 84320 байтов (82,34 КБ) Δ +2 байта | 73,399 байтов (71.68 КБ) Δ +1 байт | 69 455 байтов (67,83 КБ) Δ -1 байт | 29 562 байта (28,87 КБ) Δ +1 байт | 28 520 байтов (27,85 КБ) Δ +6 байтов | |
| 3.0.0-alpha1 | 255,567 байтов (249,58 КБ) Δ +8,180 байтов | 84,522 байта (82,54 КБ) Δ +202 байта | 75,598Δ2 ,8 байтов | 71 603 байта (69,92 КБ) Δ +2 148 байтов | 29 475 байтов (28.78 КБ) Δ -87 байтов | 28 437 байтов (27,77 КБ) Δ -83 байта |
Следует ли вам использовать JQuery 3.4?
jQuery 3.4 теперь общедоступен. Имея множество вариантов для разработчиков JavaScript, мы спрашиваем, есть ли еще место для оригинальной суперзвезды JavaScript или же Интернет продолжает развиваться.
Еще в апреле jQuery 3.4 был выпущен с помпой и церемонией британского монарха 4 июля (поздравляю всех наших американских читателей с Днем независимости).С тех пор было выпущено множество второстепенных выпусков, текущая версия - 3.4.1.
У нас было несколько недель на то, чтобы разобраться с новыми функциями и, что более важно, функциями, которые теперь не рекомендуются. Мы обнаружили современную библиотеку, которая превзошла некоторые наши ожидания.
Не вздутие
Существует немало мифов о jQuery, не в последнюю очередь о том, что он раздутый и медленный. В этом есть некоторый смысл, поскольку он содержит код, который вам, вероятно, не понадобится.Однако это верно для всех библиотек, фреймворков и сторонних скриптов; если вы не используете что-то настолько нишевое, чтобы в коде не было ничего лишнего, то всегда будут несколько байтов, которые не требуются.
бросьте jpg, и у вас, вероятно, будет место, чтобы сэкономить
Но давайте сохраним пропорции: исходная, уменьшенная, рабочая версия jQuery составляет 88 КБ, если вы выберете тонкую версию без Ajax и эффектов, то это будет всего 71 КБ.
Если вы работаете с жесткой квотой по размеру, относительно просто выжать 71 КБ из нескольких изображений.А еще лучше, бросьте jpg, и у вас, вероятно, будет свободное место.
Это (вероятно) не кэшируется
Одним из самых больших преимуществ jQuery примерно в 2014 году было то, что он был практически повсеместным. Почти каждый сайт воспользовался этим преимуществом, связавшись напрямую с jQuery CDN, что означает, что чаще всего он кэшировался в браузере пользователя - вы могли, по сути, использовать его с нулевой стоимостью.
Использование jQueryв последние годы снизилось, отчасти благодаря конкурирующим библиотекам, а отчасти благодаря убеждению в превосходстве ванильного JavaScript.Меньшее количество сайтов ссылается на CDN, меньше браузеров хранят файл в кэше, поэтому его, вероятно, потребуется загрузить, прежде чем он станет доступным.
Проблема усугубляется выпуском версии 3.4, потому что, хотя многие устаревшие сайты все еще загружают jQuery из CDN, по своей природе они не связаны с текущей версией. Команда jQuery сделала все возможное, чтобы помочь вам выполнить обновление, но циклы проектов и внедрение кода означают, что до полного охвата jQuery 3.4, вероятно, еще несколько лет.
Вам не нужно знать ванильный JavaScript
Один из наиболее часто повторяемых мифов - или, возможно, в данном случае я должен сказать «неправда» - это то, что вам следует изучить ванильный JavaScript, прежде чем вы сможете хорошо использовать jQuery.
Просмотр jQuery как набора обучающих колес
Я ненавижу эту точку зрения. Я понимаю логику; если вы изучите основную логику языка, вы поймете, что происходит за кулисами, и получите тонкое понимание своего кода.Люди, которые придерживаются этой точки зрения, забыли, каково это - рыться в Stack Overflow в три часа ночи, изо всех сил пытаясь понять, почему document.getElementsByClassName нуждается в [0] в конце.
Да, вам нужно понимать основы языка, такие как переменные, циклы, условные выражения, операторы и так далее; вам нужно будет знать те, у кого есть jQuery или нет. Рассматривайте jQuery как набор обучающих колес, он делает тяжелые вещи за вас, поэтому простые вещи могут стать вашей второй натурой.
Я бы сказал, что если вы хотите изучить JavaScript, вы должны сначала изучить jQuery. Он поможет вам справиться с более сложными задачами (например, с Ajax), пока вы отрабатываете свои основы. И я говорю это как человек, который тратит много времени на кодирование ванильного JavaScript.
Богатой экосистемы больше не будет
Было время, когда разработчики jQuery выстраивались в очередь, чтобы предоставить экономящие время, расширяющие возможности, дополнения. Это уже не так.
Интернет развивается, и разработчики, работающие по найму, ищут более прибыльные рынки, такие как Shopify или WordPress. Устаревшие плагины jQuery (должны) по-прежнему работать, а в случае с плагинами версии 2.n - благодаря приверженности команды jQuery обеспечению обратной совместимости - (вероятно) не сломаются при использовании 3.4. (Обязательно протестируйте с помощью разрабатываемой версии jQuery и проверьте свою консоль, если вы идете по этому пути.)
Несомненно, будет какой-то рынок для jQuery 3.4, и те разработчики, которые считают обновление своего кода финансово выгодным, сделают это. Таким образом, для плагинов выпуск jQuery 3.4 может фактически вызвать давно назревшую отбраковку.
Стоит ли использовать jQuery 3.4?
Для многих из нас jQuery - это инструмент, который мы использовали много лет назад и с тех пор пошли дальше. Есть лучшие инструменты для работы с Ajax; jQuery по-прежнему плохо работает с SVG, что делает его использование для манипуляций с DOM все более ограниченным; есть библиотеки-подражатели, которые имитируют лучшие аспекты jQuery, такие как селекторы, без упаковки всего остального.
jQuery не бросит вызов Vue.js или AngularJS. jQuery больше не является обязательным для дружбы большим ребенком в блоке. Что делает jQuery, так это упрощает многословие JavaScript и позволяет неопытным кодировщикам JavaScript максимально использовать язык.
Если вы новичок в JavaScript или возились с ним раньше, но никогда не могли сделать что-нибудь действительно классное, то jQuery по-прежнему то, что вам нужно.
Изображение добавлено частично через Unsplash.
bootstrap-jquery-slim 4.1.1 на npm - Libraries.io
Бутстрап
Элегантная, интуитивно понятная и мощная интерфейсная среда для более быстрой и простой веб-разработки.
Изучить документацию Bootstrap »
Сообщить об ошибке · Функция запроса · Темы · Блог
Содержание
Быстрый старт
Доступно несколько вариантов быстрого запуска:
- Загрузите последний выпуск.
- Клонировать репо:
git clone https://github.com/twbs/bootstrap.git - Установить с помощью npm:
npm install bootstrap - Установить с пряжей:
пряжа добавить bootstrap@4.3.1 - Установить с помощью Composer:
композитору требуется twbs / bootstrap: 4.3.1 - Установить с помощью NuGet: CSS:
Загрузочный пакет установочного пакетаSass:Установочный пакет bootstrap.sass
Прочтите страницу «Приступая к работе», чтобы получить информацию о содержимом платформы, шаблонах, примерах и многом другом.
Статус
Что включено
В загрузке вы найдете следующие каталоги и файлы, логически сгруппированные по общим ресурсам и предоставляющие как скомпилированные, так и минифицированные варианты. Вы увидите что-то вроде этого:
бутстрап /
└── dist /
├── css /
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js /
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── бутстрап.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
Мы предоставляем скомпилированные CSS и JS ( bootstrap. * ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min. * ). исходные карты ( bootstrap. *. map ) доступны для использования с некоторыми инструментами разработчика браузеров.Связанные файлы JS ( bootstrap.bundle.js и минифицированные bootstrap.bundle.min.js ) включают Popper.
Ошибки и запросы функций
Есть ошибка или запрос функции? Пожалуйста, сначала прочтите руководство по проблеме и найдите существующие и закрытые проблемы. Если ваша проблема или идея еще не решена, откройте новый выпуск.
Документация
ДокументацияBootstrap, включенная в этот репо в корневом каталоге, создана с помощью Hugo и размещена на страницах GitHub по адресу https: // getbootstrap.com /. Документы также можно запускать локально.
Поиск по документации осуществляется с помощью DocSearch от Algolia. Работаете над поиском? Обязательно установите debug: true в файле site / static / docs / 4.3 / assets / js / src / search.js .
Локальная работа с документацией
- Запустите
npm install, чтобы установить зависимости Node.js, включая Hugo (конструктор сайтов). - Запустите
npm run test(или конкретный сценарий npm), чтобы восстановить распределенные файлы CSS и JavaScript, а также ресурсы нашей документации. - Из корневого каталога
/ bootstrapзапуститеnpm run docs-serveв командной строке. - Откройте
http: // localhost: 9001/в своем браузере и вуаля.
Узнайте больше об использовании Hugo, прочитав его документацию.
Документация к предыдущим выпускам
Вы можете найти все наши документы по предыдущим выпускам на https://getbootstrap.com/docs/versions/.
Предыдущие выпуски и документация к ним также доступны для загрузки.
Вклад
Пожалуйста, прочтите наши правила участия. Включены инструкции по открытию вопросов, стандарты кодирования и примечания по разработке.
Более того, если ваш запрос на вытягивание содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Весь HTML и CSS должны соответствовать Руководству по кодам, которое ведет Марк Отто.
Настройки редакторадоступны в конфигурации редактора для удобного использования в обычных текстовых редакторах. Узнайте больше и загрузите плагины по адресу https: // editorconfig.org /.
Сообщество
Получайте обновления о разработке Bootstrap и общайтесь с разработчиками проекта и членами сообщества.
- Подпишитесь на @getbootstrap в Twitter.
- Прочтите официальный блог Bootstrap и подпишитесь на него.
- Присоединяйтесь к официальной комнате Slack.
- Общайтесь с другими Bootstrappers в IRC. На сервере
irc.freenode.netв канале## bootstrap. - Справку по реализации можно найти на сайте Stack Overflow (с тегом
bootstrap-4). - Разработчикам следует использовать ключевое слово
bootstrapв пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.
Управление версиями
Для прозрачности нашего цикла выпуска и для обеспечения обратной совместимости Bootstrap поддерживается в соответствии с рекомендациями по семантическому управлению версиями. Иногда мы ошибаемся, но по возможности придерживаемся этих правил.
См. Раздел «Релизы» нашего проекта GitHub для просмотра журналов изменений для каждой версии выпуска Bootstrap. Сообщения с объявлениями о выпуске в официальном блоге Bootstrap содержат сводку наиболее примечательных изменений, внесенных в каждый выпуск.