Разное

Jquery как использовать: Использование jQuery для улучшения внешнего вида и удобства использования веб-страницы

21.03.1970

Содержание

Когда и зачем использовать jQuery — Блог HTML Academy

Рассказывает Валерий Кондратьев — руководитель отдела разработки и тестирования интерфейсов из компании Selectel.

Раньше JavaScript использовали для небольших скриптов или несложных страниц, а теперь на нём делают вообще всё в интерфейсах сайтов.

Библиотека jQuery была популярна из-за существования IE6 и большого количества браузеров с разной поддержкой веб-стандартов. Программист не мог быть уверен, что его код запустится у всех пользователей. Проще было взять jQuery и написать скрипты, которые будут работать одинаково вне зависимости от браузера.

Также jQuery заметно облегчала работу с DOM, AJAX и анимациями.

Когда jQuery уместна?

Чтобы сделать простой сайт, который сами будете поддерживать (или не будете поддерживать вовсе — написали и забыли, так тоже бывает). Если сайт сложный, то чтобы работать над ним в большой команде, развивать и поддерживать, jQuery не подойдёт.

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

В полноценных фреймворках (например, Vue.js или Angular.js) возможности для нормальной работы уже идут «из коробки». Это, в первую очередь, компонентный подход к построению интерфейсов и абстрагирование от DOM. И любой человек, который придёт в команду со знанием фреймворка, сможет разобраться в коде — как минимум потому что есть общепринятые структуры проектов, документация, сообщество и StackOverflow. Конечно, в jQuery тоже большое сообщество и тоже есть документация, но мне кажется, там каждый пишет код под себя.

Но нужно ли?

Это вопрос о выборе удобного инструмента для конкретной задачи. Простую страничку с простой формой можно написать и на jQuery. Но если всё, что вы пишете, это простые странички с формами, то это не значит, что нужно перестать изучать новое и знакомиться с современными фреймворками. Большинство вещей, в которых была полезна jQuery, уже добавлены в «ванильный» Javascript и без всяких библиотек.

То есть обходные пути есть — главное их найти и разобраться.

Забудьте jQuery как страшный сон

На курсе «JavaScript. Профессиональная разработка веб-интерфейсов» дают такую базу, после которой jQuery вам не понадобится.

Записаться

Нажатие на кнопку — согласие на обработку персональных данных


Этот текст — часть большого интервью HTML Academy с разработчиками из Selectel. В гостях были руководитель отдела разработки и тестирования интерфейсов Валерий Кондратьев и младший фронтенд-разработчик Денис Соколинский.

Начало работы с jQuery

Существует несколько способов начать использовать jQuery на своем сайте:

  • Скачать библиотеку с официального сайта jQuery.com
  • Включить jQuery по CDN, вроде Google

Скачивание библиотеки jQuery

На официальном сайте jQuery для скачивания доступно две версии библиотеки:

  • Для готовых проектов (production) – эта версия предназначена для уже отлаженных и работающих сайтов. Она минифицирована и сжата, что позволяет ускорить ее загрузку.
  • Для разработки (development) – это для тестирования и разработки новых скриптов (код не сжат и содержит комментарии).

Обе версии библиотеки можно скачать на сайте jQuery.com.

Библиотека jQuery — это один файл JavaScript, который подключается в HTML теге <script> (обратите внимание, что тег <script> должен располагаться внутри тега <head>):


<head>
<script src="//msiter.ru/jquery-3.4.0.min.js"></script>
</head>

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

Удивляетесь, почему в теге <script>

мы не используем атрибут type=»text/javascript»? В HTML5 этого не требуется. JavaScript — скриптовый язык по умолчанию в HTML5 и во всех современных браузерах!

jQuery CDN

Если вы не хотите скачивать и размещать библиотеку jQuery на сервере своего сайта, то вы можете подключить ее с CDN (англ. Content Delivery Network – Сеть доставки содержимого).

Библиотеку jQuery можно подключить с сети Google и Microsoft.

Google CDN:


<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head> 

Microsoft CDN:


<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
</head> 

Преимущество использования jQuery из сети Google или Microsoft заключается в том, что многие пользователи, посещая другие сайты, уже скачали jQuery из этих CDN. В результате этого, посещая ваш сайт они будут подгружать библиотеку jQuery уже из своего локального кэша, что положительно сказывается на скорости загрузки страниц сайта. Кроме этого, большинство CDN следят, чтобы пользователь получал файлы с ближайшего к нему сервера, что также ускоряет загрузку страниц сайта.

Синтаксис jQuery Вверх Учебник jQuery для начинающих

Как отказаться от jQuery в современном фронтенде: опыт команды GitHub

Не так давно GitHub полностью перестал использовать jQuery в своём фронтенд-коде. Мы перевели пост, в котором разработчики рассказывают, с чего началась их работа с jQuery, как они поняли, что пора от него отказываться, и как они смогли сделать это без использования других библиотек или фреймворков.

Зачем jQuery был нужен раньше?

jQuery 1.2.1 вошёл в число зависимостей GitHub в конце 2007 года. Это произошло за год до того, как Google выпустил первую версию браузера Chrome. На тот момент не было общепринятого способа обращаться к элементам DOM с помощью CSS-селектора, не было стандартного способа добавить анимацию к стилю элемента, а интерфейс XMLHttpRequest, предложенный Internet Explorer, как и многие API, был плохо совместим с браузерами.

С jQuery стало гораздо проще управлять DOM, создавать анимации и делать AJAX-запросы. У веб-разработчиков появилась возможность создавать более современные, динамические сайты, которые выделялись среди остальных. Самое главное, все функции JavaScript, проверенные в одном браузере с помощью jQuery, как правило, работали и в других браузерах. На заре GitHub, когда большинство его функций только обретали форму, появление jQuery позволило небольшой команде разработчиков быстро создавать прототипы и представлять новые функции без необходимости подстраивать их отдельно под каждый браузер.

Простой интерфейс jQuery также послужил основой для создания библиотек, которые в будущем стали компонентами остальной части фронтенда GitHub.com: pjax и facebox.

Веб-стандарты в последующие годы

С течением времени GitHub превратился в компанию с сотнями разработчиков и постепеннно сформировалась команда, которая отвечала за размер и качество JavaScript-кода, который мы отправляем браузерам. Одна из вещей, за которыми мы постоянно следим, — технический долг, порой вырастающий из некогда полезных зависимостей, которые потеряли свою актуальность по прошествии времени.

Когда очередь дошла до jQuery, мы сравнили его с развивающимся веб-стандартом в браузерах и поняли, что:

  • Шаблон $(selector) можно легко заменить на querySelectorAll();
  • Переключение CSS-классов теперь можно осуществить с помощью Element.classList;
  • CSS теперь поддерживает создание анимации в таблицах стилей, а не в JavaScript;
  • $.ajax-запросы можно выполнять с помощью Fetch Standard;
  • Интерфейс addEventListener() достаточно стабилен для кроссплатформенного использования;
  • Шаблон делегирования событий легко инкапсулировать с помощью легковесной библиотеки;
  • С эволюцией JavaScript часть синтаксического сахара jQuery устарела.

Кроме того, синтаксис цепочек команд не удовлетворял нашим представлениям о коде, который мы хотели бы писать в будущем. Например:

$('.js-widget')
  .addClass('is-loading')
  .show()

Такой синтаксис прост в написании, однако по нашим стандартам не очень хорошо передаёт намерения автора. Сколько элементов

js-widget, по его задумке, должно быть на странице: один или больше? А если мы обновим разметку страницы и случайно оставим имя класса js-widget, будет ли выброшено исключение, которое сообщит нам, что что-то пошло не так? По умолчанию jQuery молча пропускает всё выражение, когда нет совпадений по начальному селектору; однако для нас такое поведение было больше багом, нежели фичей.

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

@flow weak, позволили нам начать прогрессивно и эффективно применять типы к кодовой базе, которая по большей части была нетипизированной.

В конечном счёте отказ от jQuery означает, что мы можем больше полагаться на веб-стандарты, использовать веб-документацию MDN в качестве официальной документации для наших фронтендеров, поддерживать более гибкий код в будущем и уменьшить вес наших зависимостей на 30 Кбайт, что в итоге увеличит скорость загрузки страницы и выполнения JavaScript.

Постепенный переход

Хотя наша конечная цель была не за горами, мы знали, что было бы нецелесообразно направить все имеющиеся ресурсы на переписывание всего с jQuery на чистый JS. Во всяком случае, такое поспешное решение негативно бы сказалось на функциональности сайта, от которой нам бы пришлось отказаться. Вместо этого мы:

  • Начали отслеживать количество вызовов jQuery на строку кода и следили за графиком на протяжении времени, чтобы убедиться, что он либо не меняется, либо падает, но не растёт.
  • Отказались от использования jQuery в новом коде. Чтобы достичь этого с помощью автоматизации, мы создали eslint-plugin-jquery, который проваливал CI-тесты при попытке использовать возможности jQuery вроде $.ajax.
  • В старом коде появилось много нарушений правил eslint, которые мы пометили с помощью специальных правил eslint-disable в комментариях. Для того, кто будет это читать, такие комментарии должны были служить явным сигналом того, что здесь не отражаются наши текущие методы написания кода
  • Мы написали бота, который при отправке pull request’а оставлял комментарий, сигнализирующий нашей команде каждый раз, как кто-то хотел добавить новое правило eslint-disable. Таким образом мы могли провести ревью кода на ранней стадии и предложить альтернативы.
  • Большая часть старого кода была явно связана с внешними интерфейсами jQuery-плагинов pjax и facebox, поэтому мы оставили их интерфейсы почти без изменений, в то время как изнутри заменили их реализацией на чистом JS. Наличие статической проверки типов вселило в нас уверенность в проводимом рефакторинге.
  • Много старого кода было связано с rails-behaviors, нашим адаптером для Ruby on Rails, таким образом, что он присоединял обработчик жизненного цикла AJAX к определённым формам:
    // УСТАРЕВШИЙ ПОДХОД
      $(document).on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) {
        // вставка данных ответа куда-нибудь в DOM
      })

    Вместо того чтобы переписывать все эти вызовы согласно новому подходу, мы решили использовать ложные события жизненного цикла ajax*, и формы продолжали отправлять данные асинхронно, как и раньше; только теперь изнутри использовался fetch().

  • Мы поддерживали свою сборку jQuery, из которой убирали ненужные нам модули и заменяли более лёгкой версией. Например, после избавления от всех jQuery-специфичных CSS-псевдоселекторов вроде :visible или :checkbox мы смогли убрать модуль Sizzle; а когда мы заменили $.ajax-вызовы на fecth(), мы смогли отказаться от модуля AJAX. Мы убивали двух зайцев разом: уменьшали время выполнения JavaScript, параллельно гарантируя то, что никто не напишет код, который будет пытаться использовать удалённую функциональность.
  • Глядя на статистику нашего сайта, мы старались прекратить поддержку Internet Explorer настолько быстро, насколько это возможно. Как только использование определённой версии IE падало ниже определённого порога, мы прекращали её поддержку и фокусировались на более современных браузерах. Отказ от поддержки IE 8-9 на раннем этапе позволил нам использовать многие нативные возможности браузеров, которые в противном случае было бы сложно «заполифиллить».
  • В рамках нашего усовершенствованного подхода к написанию фронтенда GitHub мы сосредоточились на использовании обычного HTML по-максимуму, добавляя JavaScript в качестве последовательного улучшения. В итоге даже те формы и другие элементы интерфейса, которые были улучшены с помощью JS, как правило, могли работать даже с выключенным в браузере JavaScript. В некоторых случаях нам даже удалось удалить определённую устаревшую функциональность вместо её переписывания на чистом JS.

Благодаря этим и аналогичным усилиям с течением времени мы постепенно смогли уменьшить нашу зависимость от jQuery вплоть до того момента, когда не осталось ни одной строки кода, ссылающейся на эту библиотеку.

Custom Elements: пользовательские элементы

Одна технология, наделавшая шуму в последние годы, — Custom Elements: библиотека компонентов, встроенная в браузер, что означает отсутствие необходимости для пользователя качать, парсить и компилировать дополнительные байты фреймворка.

Мы создали несколько пользовательских элементов на основе спецификации v0 с 2014 года. Однако, поскольку стандарты в то время постоянно менялись, мы сильно в это не вкладывались. А начали только с 2017 года, когда была выпущена спецификация Web Components v1, реализованная как в Chrome, так и в Safari.

Во время перехода с jQuery мы искали структуры, которые можно было бы извлечь в качестве пользовательских элементов. Например, мы преобразовали код facebox, использованный для отображения модальных диалогов, в элемент <details-dialog>.

Наша общая философия прогрессивного улучшения относится и к пользовательским элементам. Это значит, что мы стараемся хранить как можно больше контента в разметке и только добавлять поведение поверх неё. Например, <local-time> по умолчанию показывает исходную временную метку, но с улучшением может переводить время в местный часовой пояс, а <details-dialog>, расположенный внутри элемента <details>, интерактивен даже без JavaScript, но может быть улучшен до расширенных возможностей доступа.

Вот пример того, как можно реализовать элемент <local-time>:

// Элемент local-time отображает время в текущем
// часовом поясе и местоположении пользователя.
//
// Пример:
//   Sep 6, 2018
//
class LocalTimeElement extends HTMLElement {
  static get observedAttributes() {
    return ['datetime']
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === 'datetime') {
      const date = new Date(newValue)
      this.textContent = date.toLocaleString()
    }
  }
}

if (!window.customElements.get('local-time')) {
  window.LocalTimeElement = LocalTimeElement
  window.customElements.define('local-time', LocalTimeElement)
}

Один из аспектов Web Components, который мы очень хотим перенять, — Shadow DOM. У Shadow DOM есть потенциал для раскрытия множества возможностей для веба, однако он также усложняет полифиллинг. Так как его полифиллинг на данный момент приведёт к снижению производительности даже для кода, который управляет частями DOM, не относящихся к веб-компонентам, для нас нецелесообразно использовать его в продакшне.

Полифиллы

Здесь вы можете увидеть полифиллы, которые помогли нам перейти к использованию встроенных возможностей браузера. Мы стараемся использовать их, только когда это совершенно необходимо, т.е. как часть отдельного JavaScript-бандла для совместимости с устаревшими браузерами.

Смотрите также: «Фундаментальные принципы объектно-ориентированного программирования на JavaScript»

Перевод статьи «Removing jQuery from GitHub.com frontend»

Взаимодействие со сторонними библиотеками – React

React может использоваться в любом веб-приложении. Он может быть встроен в другие приложения, и, с некоторыми оговорками, другие приложения могут встраиваться в React. Это руководство рассматривает некоторые общие случаи, с упором на интеграцию с jQuery и Backbone. Те же подходы могут использоваться для интеграции компонентов с любым существующим кодом.

Интеграция с плагинами, изменяющими DOM

React не знает про изменения DOM, которые сделаны вне React. Он определяет обновления на основе своего внутреннего представления, и если одни и те же DOM-узлы управляются другими библиотеками, то это нарушает работу React без возможности её восстановления.

Это не означает, что соединить React с другими инструментами работы с DOM сложно или невозможно. Просто нужно помнить, за что отвечает каждый инструмент.

Самый простой способ избежать конфликтов — предотвратить обновление React-компонента. Это можно сделать через рендеринг элемента, который не должен обновляться React, например, пустой <div />.

Как решить проблему

Для демонстрации давайте набросаем обёртку вокруг обобщённого jQuery-плагина.

Мы установим реф на корневой DOM-элемент. Внутри componentDidMount мы получим ссылку на этот реф и передадим её в jQuery-плагин.

Чтобы React не взаимодействовал с DOM после монтирования, вернём пустой <div /> из метода render(). Элемент <div /> не имеет ни свойств, ни дочерних компонентов, так что для React нет никаких причин его обновлять. Это даёт jQuery полную свободу управления этой частью DOM:

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);    this.$el.somePlugin();  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');  }

  render() {
    return <div ref={el => this.el = el} />;  }
}

Заметьте, что мы объявили два метода жизненного цикла — как componentDidMount, так и componentWillUnmount. Многие jQuery-плагины добавляют обработчики событий DOM, поэтому важно удалять их внутри componentWillUnmount. Если плагин не предоставляет метод для очистки, то, возможно, вам придётся написать свой. Помните об удалении обработчиков событий, добавленных плагином, чтобы избежать утечек памяти.

Интеграция с jQuery-плагином Chosen

Теперь рассмотрим конкретный пример. Давайте напишем минимальную обёртку для плагина Chosen, который работает с элементами <select>.

Примечание:

То, что следующий способ работает, совсем не значит, что это оптимальное решение для React-приложений. Мы советуем пользоваться React-компонентами, когда это возможно. Они являются самым простым способом повторно использовать код в React-приложении, и часто дают больший контроль над своим поведением и внешним видом.

Для начала, давайте посмотрим, что Chosen делает с DOM.

Когда вы вызываете его на DOM-узле <select>, он читает атрибуты этого узла, скрывает его с помощью встроенных стилей и непосредственно перед ним добавляет отдельный DOM-узел с собственным визуальным представлением. Затем он запускает события jQuery, чтобы уведомлять нас об изменениях.

Допустим, мы хотим предоставить следующий API для нашего компонента-обёртки над <Chosen>:

function Example() {
  return (
    <Chosen onChange={value => console.log(value)}>
      <option>ваниль</option>
      <option>шоколад</option>
      <option>клубника</option>
    </Chosen>
  );
}

Для простоты мы будем реализовывать неуправляемый компонент.

Сначала создадим пустой компонент, с методом render(), который возвращает <select>, обёрнутый в <div>:

class Chosen extends React.Component {
  render() {
    return (
      <div>        <select className="Chosen-select" ref={el => this.el = el}>          {this.props.children}
        </select>
      </div>
    );
  }
}

Обратите внимание, что мы обернули <select> в дополнительный <div>. Это нужно, потому что Chosen добавляет новый элемент сразу за узлом <select>, на котором он вызывается. Но React всегда ожидает только один дочерний элемент для <div>. Так мы гарантируем, что обновления React не будут конфликтовать с дополнительным узлом, добавляемым Chosen. Если вы собираетесь изменять DOM вне React, важно убедиться, что React не взаимодействует с DOM-узлами.

Следующим шагом реализуем методы жизненного цикла. Нам нужно инициализировать Chosen с рефом на узле <select> в componentDidMount, а затем убрать его в componentWillUnmount:

componentDidMount() {
  this.$el = $(this.el);  this.$el.chosen();}

componentWillUnmount() {
  this.$el.chosen('destroy');}

Посмотреть на CodePen

Обратите внимание, что React не придаёт никакого особого значения полю this.el. Код работает потому, что ранее мы присвоили этому полю ref в методе render():

<select className="Chosen-select" ref={el => this.el = el}>

Этого достаточно, чтобы наш компонент отрендерился, но мы бы хотели получать уведомления об изменении значений. Для этого мы подпишемся на jQuery событие change на <select>, управляемом Chosen.

Мы не станем передавать в Chosen this.props.onChange напрямую, потому что пропсы компонента могут со временем измениться (в том числе и обработчики событий). Вместо этого мы объявим метод handleChange(), который будет вызывать this.props.onChange, и подпишем его на jQuery-событие change:

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.handleChange = this.handleChange.bind(this);  this.$el.on('change', this.handleChange);}

componentWillUnmount() {
  this.$el.off('change', this.handleChange);  this.$el.chosen('destroy');
}

handleChange(e) {  this.props.onChange(e.target.value);}

Посмотреть на CodePen

В завершение осталось сделать ещё кое-что. В React пропсы могут изменяться со временем. Например, компонент <Chosen> может получать разные дочерние элементы, если состояние родительского компонента изменяется. Это означает, что в точке интеграции нам нужно вручную обновлять DOM, в соответствии с обновлениями проп, так как React больше не управляет DOM для нас.

Документация Chosen предлагает использовать jQuery-метод trigger(), чтобы сообщить об изменениях в оригинальном DOM-элементе. Мы поручим React заниматься обновлением this.props.children внутри <select>, но нужно добавить метод жизненного цикла componentDidUpdate(), чтобы уведомлять Chosen про обновление списка дочерних элементов:

componentDidUpdate(prevProps) {
  if (prevProps.children !== this.props.children) {    this.$el.trigger("chosen:updated");  }
}

Таким способом Chosen узнает, что нужно обновить его DOM-элемент, когда дочерние элементы <select> были обновлены React.

Полная реализация Chosen компонента выглядит так:

class Chosen extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.chosen();

    this.handleChange = this.handleChange.bind(this);
    this.$el.on('change', this.handleChange);
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.children !== this.props.children) {
      this.$el.trigger("chosen:updated");
    }
  }

  componentWillUnmount() {
    this.$el.off('change', this.handleChange);
    this.$el.chosen('destroy');
  }
  
  handleChange(e) {
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

Посмотреть на CodePen

Интеграция с другими визуальными библиотеками

Благодаря гибкости ReactDOM.render() React может встраиваться в другие приложения.

Хотя обычно React используют для загрузки в DOM одного корневого компонента, ReactDOM.render() может быть вызван несколько раз для независимых частей UI. Это могут быть как отдельные кнопки, так и большие приложения.

На самом деле, именно так React используется в Facebook. Это позволяет писать приложения на React по частям и объединять их с существующими генерируемыми сервером шаблонами и другим клиентским кодом.

Замена строковых шаблонов с помощью React

Распространённый подход в старых веб-приложениях — описание частей DOM c помощью строк (вроде ${el.html(htmlString)}). Такие участки кода прекрасно подходят для внедрения React. Просто переписываем рендеринг на основе строк в React-компонент.

Итак, есть текущая реализация на jQuery…

$('#container').html('<button>Сказать «Привет»</button>');
$('#btn').click(function() {
  alert('Привет!');
});

…может быть переписана в React-компонент:

function Button() {
  return <button>Сказать «Привет»</button>;
}

ReactDOM.render(
  <Button />,
  document.getElementById('container'),
  function() {
    $('#btn').click(function() {
      alert('Привет!');
    });
  }
);

А дальше вы можете начать переносить логику внутрь компонента и использовать остальные React-подходы. Например, в компонентах лучше не полагаться на идентификаторы, потому что один и тот же компонент может быть отрендерен несколько раз. Вместо этого мы используем событийную систему React и зарегистрируем обработчик непосредственно на React-элементе <button>:

function Button(props) {
  return <button onClick={props.onClick}>Сказать «Привет»</button>;}

function HelloButton() {
  function handleClick() {    alert('Привет!');
  }
  return <Button onClick={handleClick} />;}

ReactDOM.render(
  <HelloButton />,
  document.getElementById('container')
);

Посмотреть на CodePen

Вы можете завести столько изолированных компонентов, сколько вам захочется. И использовать ReactDOM.render() для рендеринга в разные DOM-контейнеры. Постепенно, по мере перевода вашего приложения на React, вы сможете комбинировать их в большие компоненты и переносить вызов ReactDOM.render() вверх по структуре.

Встраиваем React в представления Backbone

Представления в Backbone обычно используют HTML-строки или функции, создающие строковые шаблоны для создания DOM-элементов. Этот механизм также может быть заменён рендерингом React-компонентов.

Ниже мы создадим Backbone-представление ParagraphView. Оно переопределит метод render() (из Backbone.View) для рендеринга React-компонента <Paragraph> в DOM-элемент, предоставляемый Backbone (this.el). Также мы воспользуемся ReactDOM.render():

function Paragraph(props) {  return <p>{props.text}</p>;
}

const ParagraphView = Backbone.View.extend({  render() {
    const text = this.model.get('text');
    ReactDOM.render(<Paragraph text={text} />, this.el);    return this;
  },
  remove() {
    ReactDOM.unmountComponentAtNode(this.el);    Backbone.View.prototype.remove.call(this);
  }
});

Посмотреть на CodePen

Стоит отметить вызов ReactDOM.unmountComponentAtNode() в методе remove. Он нужен для того, чтобы React отключил обработчики событий и другие ресурсы, связанные с деревом компонентов при удалении.

Когда компонент удаляется из дерева React изнутри, очистка производится автоматически, но поскольку мы удаляем сущность из дерева вручную, то обязаны вызвать этот метод.

Интеграция со слоем моделей

Обычно рекомендуется использовать однонаправленный поток данных, вроде состояния React, Flux или Redux. Но React-компоненты могут также использовать слой данных из других библиотек и фреймворков.

Использование моделей Backbone в React-компонентах

Самый простой способ использовать модели и коллекции Backbone из React-компонентов — это обработка различных событий и ручное обновление компонентов.

Компоненты, отвечающие за рендеринг моделей, будут обрабатывать событие 'change', а компоненты, отвечающие за рендеринг коллекций, будут обрабатывать события 'add' и 'remove'. В обоих случаях для отображения новых данных нужно вызвать this.forceUpdate().

В следующем примере компонент list рендерит Backbone-коллекцию, используя компонент Item для рендеринга отдельных элементов.

class Item extends React.Component {  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {    this.forceUpdate();  }
  componentDidMount() {
    this.props.model.on('change', this.handleChange);  }

  componentWillUnmount() {
    this.props.model.off('change', this.handleChange);  }

  render() {
    return <li>{this.props.model.get('text')}</li>;
  }
}

class List extends React.Component {  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {    this.forceUpdate();  }
  componentDidMount() {
    this.props.collection.on('add', 'remove', this.handleChange);  }

  componentWillUnmount() {
    this.props.collection.off('add', 'remove', this.handleChange);  }

  render() {
    return (
      <ul>
        {this.props.collection.map(model => (
          <Item key={model.cid} model={model} />        ))}
      </ul>
    );
  }
}

Посмотреть на CodePen

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

Один из подходов — когда при каждом изменении модели, вы извлекаете её атрибуты в виде простых данных и храните всю логику в одном месте. Следующий компонент высшего порядка извлекает все атрибуты Backbone-модели в state, передавая данные в оборачиваемый компонент.

При этом подходе только компоненты высшего порядка будут знать о Backbone-моделях, а большая часть компонентов в приложении не будет завязана на Backbone.

В примере ниже, мы сделаем копию атрибутов модели для формирования начального состояния. Мы подпишемся на событие change (и отпишемся от него при удалении), и когда оно будет возникать, мы обновим состояние текущими атрибутами. Наконец, мы убедимся, что если изменяется сам проп model, мы не забываем отписаться от старой модели и подписаться на новую.

Обратите внимание, пример ниже не является полным в отношении работы с Backbone. Но он должен дать вам понимание общего подхода:

function connectToBackboneModel(WrappedComponent) {  return class BackboneComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = Object.assign({}, props.model.attributes);      this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
      this.props.model.on('change', this.handleChange);    }

    componentWillReceiveProps(nextProps) {
      this.setState(Object.assign({}, nextProps.model.attributes));      if (nextProps.model !== this.props.model) {
        this.props.model.off('change', this.handleChange);        nextProps.model.on('change', this.handleChange);      }
    }

    componentWillUnmount() {
      this.props.model.off('change', this.handleChange);    }

    handleChange(model) {
      this.setState(model.changedAttributes());    }

    render() {
      const propsExceptModel = Object.assign({}, this.props);
      delete propsExceptModel.model;
      return <WrappedComponent {...propsExceptModel} {...this.state} />;    }
  }
}

Для демонстрации использования мы соединим React-компонент NameInput и Backbone-модель и будем обновлять её атрибут firstName при каждом изменении поля ввода:

function NameInput(props) {
  return (
    <p>
      <input value={props.firstName} onChange={props.handleChange} />      <br />
      Моё имя - {props.firstName}.    </p>
  );
}

const BackboneNameInput = connectToBackboneModel(NameInput);
function Example(props) {
  function handleChange(e) {
    props.model.set('firstName', e.target.value);  }

  return (
    <BackboneNameInput      model={props.model}      handleChange={handleChange}    />
  );
}

const model = new Backbone.Model({ firstName: 'Фродо' });
ReactDOM.render(
  <Example model={model} />,
  document.getElementById('root')
);

Посмотреть на CodePen

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

Использование Объектов FormData — Интерфейсы веб API

Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом submit() формы, с установленной кодировкой enctype="multipart/form-data".

Вы можете самостоятельно создать пустой объект FormData, наполнив его затем данными, используя его метод append():

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); 


formData.append("userfile", fileInputElement.files[0]);


var content = '<a><b>hey!</b></a>'; 
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
Примечание:  Поля «userfile» и «webmasterfile» оба содержат файлы. Число, переданное полю «accountnum» немедленно преобразуется в строку. Преобразование осуществляется методом FormData.append() (Значение поля может быть Blob, File, или строкой: если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).

Данный пример показывает создание экземпляра FormData, содержащего поля «username», «accountnum», «userfile» и «webmasterfile». Экземпляр FormData затем отправляется при помощи метода send() объекта XMLHttpRequest. Поле «webmasterfile» является экземпляром класса Blob. Объект класса Blob является файлом-подобным объектом, содержащим «сырые» данные. Определение данных как Blob не является обязательным в нативном javascript. Интерфейс File базируется на Blob, наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса Blob используйте Blob() constructor.

Для создания объекта FormDatа, содержащего данные существующей формы (<form>) передайте форму в качестве аргумента при создании объекта FormData:

Примечание: FormData будет использовать только те поля ввода, которые используют атрибут name.

var formData = new FormData(someFormElement);

Например:

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

Вы так же можете добавить дополнительные данные в объект FormData после его создания и до отправки данных:

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.

Вы так же можете отправлять файлы при помощи FormData. Просто включите <input> с типом file в форму.

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

Затем вы сможете отправить выбранный файл следующим образом:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

Примечание: Если для формы указан атрибут method, то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове open()

Вы так же можете добавить File или Blob непосредственно к объекту FormData:

data.append("myfile", myBlob, "filename.txt");

Метод append() принимает 3й опциональный параметр — название файла, которое добавляется в заголовок Content-Disposition при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя «blob».

Вы так же можете использовать FormData с jQuery:

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  
  contentType: false   
});

jquery — Использование jQuery в ASP.NET

Хорошо, это может показаться глупым вопросом, но где именно мне добавить строку <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> на странице .aspx? Я новичок в ASP.NET и jQuery. Мне предоставлен наполовину полный проект ASP.NET, и мне нужно использовать jQuery для настройки пользовательского интерфейса. Везде, где я искал, написано, что сначала вставьте указанную выше строку в тег <head>. Но моя страница Default.aspx не имеет тега <head>. Вместо этого у него есть теги <asp:Content> и <asp:UpdatePanel>.

0

Ruwangi 14 Янв 2016 в 08:05

2 ответа

Лучший ответ

Найдите свою главную страницу, обычно она называется Site.master и находится в корне решения.

Например

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">

        <div>
            <asp:ContentPlaceHolder runat="server"/>
        </div>
    </form>
</body>
</html>

2

Felix Cen 14 Янв 2016 в 05:23

Мастер-страница в веб-форме — это место, где вы включаете все распространенные css, javascripts. это можно найти в другом вопросе по stackoverflow здесь

1

Community 23 Май 2017 в 11:44

Использование новых версий jQuery в старых версиях Drupal

При поддержке старых версий Drupal (в данной статье речь идёт о Drupal 6 и Drupal 7) часто возникает необходимость использования актуальной (современной) версии jQuery. И если в случае с самописными скриптами можно обойтись версией из ядра, то в случае использования готового jQuery плагина этот вариант может не подойти. К примеру, в Drupal 6 вы не сможете использовать такой популярный плагин, как Chosen, поскольку он просто не заработает на том jQuery, что есть в ядре. К слову о версиях: из «коробки» Drupal 7 предоставляет jQuery версии 1.4.4, а Drupal 6 — версии 1.2.6. Просто взять и обновить jQuery в ядре Drupal нельзя по двум причинам. Во-первых, это вездесущие проблемы с дальнейшим обновлением ядра. Во-вторых, скрипты Drupal и контрибных модулей не будут работать с новой версией. Безусловно можно использовать модуль jQuery Update. Он решает большинство проблем с jQuery в Drupal 7, но для Drupal 6 в настоящее время практически бесполезен —  Chosen не заработает даже с этим модулем. Можно, конечно, использовать старые (совсем старые) версии нужных плагинов или самому реализовать их функционал, но это никому не нужный труд. К счастью, есть и другие варианты решения вышеописанной проблемы. Об одном из таких решений далее и пойдёт речь.

Первым делом стоит отметить, что jQuery позволяет запускать на странице другие версии jQuery. Достигается это засчёт использования функции noConflict(). На её основе построена логика работы модуля jQuery Multi. Код «обработки» новой версии jQuery находится в файле js/switch.js относительно директории модуля.

(function($) {
  // Put together the name of the new jQuery variable.
  var version = $().jquery;
  var versionName = version.replace(/\./g, '');
  // Save the new version of jQuery globally and restore Drupal version.
  window['jq' + versionName] = jQuery.noConflict(true);
})(jQuery);

Как видно из кода — новая версия jQuery будет доступна в переменной jq{%version}, старая версия будет по-прежнему доступна в переменной jQuery или её синониме $. Например, при использовании версии 3.1.1, переменная будет jq311. С этого момента уже можно работать с новой версией (скрипты, использующие старую версию не сломаются), однако, это не совсем удобно, так как по общеиспользуемому синониму $ будет доступна старая версия, что не подходит для использования сторонних плагинов. Также подобный подход отразится на поддержке и переносимости кода.

Следующими немаловажными достоинствами модуля jQuery Multi является интеграция с модулем Libraries API и возможность определения скриптов, которые должны отрабатывать с новой версией jQuery на основе хуков hook_jqmulti_files() и hook_jqmulti_libraries(). Библиотеки, которые расположены в sites/all/libraries модуль определяет самостоятельно и ими можно управлять на странице настроек модуля.

Эти скрипты будут загружены после загрузки новой версии jQuery, но до файла switch.js, что позволит выполнить код в контексте новой версии. Это уже позволяет использовать сторонние плагины без изменения их кода (Chosen заработает). Стоит отметить, что данный подход не решает проблему с написанием ряда callback-функций.

Drupal.behaviors.mySiteExampleBehavior = function (context) {
  // Custom behavior logic.
};

Внутри функции mySiteExampleBehavior() использование синонима $ приведёт к использованию старой версии jQuery, даже если скрипт будет загружен до файла switch.js. Для использования нового jQuery после кода switch.js всё ещё нужно обращаться к переменной jq311, что неудобно. Для решения этой проблемы напишем скрипт в одном из самописных модулей:

Drupal.mySiteExample = Drupal.mySiteExample || {};
 
(function ($) {
  // Set additional jQuery variable name globally.
  var version = $().jquery;
  var versionName = version.replace(/\./g, '');
  Drupal.mySiteExample.jQueryVariable = 'jq' + versionName;
})(jQuery);

В коде модуля реализуем хук hook_jqmulti_files() и выведем скрипт на hook_init():

/**
 * Implements hook_jqmulti_files().
 */
function example_jqmulti_files() {
  // Set files to be loaded with jQuery Multi's jQuery library.
  return array(
    drupal_get_path('module', 'example') . '/js/example.js',
  );
}
 
/**
 * Implements hook_init().
 */
function example_init() {
  drupal_add_js(drupal_get_path('module', 'example') . '/js/example.js');
}

Код скрипта example.js будет выполнен в контексте новой версии jQuery, а название переменной, по которой можно будет получить к ней доступ, будет сохранено в Drupal.mySiteExample.jQueryVariable. Для использования новой версии jQuery по синониму $ достаточно добавить следующую обёртку в скрипте: 

Drupal.mySiteExample = Drupal.mySiteExample || {};
Drupal.mySiteExample.jQueryVariable = Drupal.mySiteExample.jQueryVariable || 'jQuery';
 
(function ($) {
 
  // Your code here.
 
})(window[Drupal.mySiteExample.jQueryVariable]);

Переменная $ внутри вышеуказанной функции будет относиться к новой версии jQuery, а вне функции — к jQuery из ядра Drupal. Подробно почитать о вариантах использования новых версий jQuery в Drupal можно на странице официальной документации.

JavaScript · Bootstrap v5.0

Индивидуальный или составной

Плагины

могут быть включены индивидуально (с использованием отдельных js / dist / *. Js в Bootstrap) или все сразу с использованием bootstrap.js или уменьшенного bootstrap.min.js (не включайте оба).

Если вы используете сборщик (Webpack, Rollup…), вы можете использовать файлов /js/dist/*.js , готовых для UMD.

Использование Bootstrap в качестве модуля

Мы предоставляем версию Bootstrap, построенную как ESM ( bootstrap.esm.js и bootstrap.esm.min.js ), что позволяет использовать Bootstrap в качестве модуля в вашем браузере, если ваши целевые браузеры поддерживают его.

  
  

Несовместимые плагины

Из-за ограничений браузера некоторые из наших плагинов, а именно плагины Dropdown, Tooltip и Popover, не могут использоваться в теге

размещенных библиотек | Разработчики Google

Размещенные библиотеки Google - это стабильная, надежная, высокоскоростная, глобальная доступная сеть распространения контента для наиболее популярных, с открытым исходным кодом Библиотеки JavaScript.

Google работает напрямую с ключевыми заинтересованными сторонами по каждому проекту библиотеки. и принимает самые последние версии по мере их выпуска.

Библиотеки

Чтобы загрузить размещенную библиотеку, скопируйте и вставьте фрагмент HTML для этого библиотеки (показано ниже) на вашей веб-странице.Например, чтобы загрузить jQuery, вставьте сценарий < src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> фрагмент на вашей веб-странице.

Мы рекомендуем загружать библиотеки из CDN через HTTPS, даже если у вас собственный веб-сайт использует только HTTP. В настоящее время производительность высокая, а кеширование работает точно так же. Файлы CDN обслуживаются CORS а также Время-Разрешить заголовки и разрешено кешировать на 1 год.

цезий JS

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js">
сайт:
github.com/CesiumGS/cesium
версий:
1,78

D3.js

фрагмент:
<скрипт src = "https: // ajax.googleapis.com/ajax/libs/d3js/6.7.0/d3.min.js ">
сайт:
d3js.org
версий:
6.7.0, 6.6.2, 6.6.1, 6.6.0, 6.5.0, 6.3.1, 6.2.0, 6.1.1, 5.16.0, 5.15.1, 5.15.0, 5.14.2, 5.12. 0, 5.11.0, 5.9.7, 5.9.2, 5.9.0, 5.8.0, 5.7.0, 4.13.0, 3.5.17

Додзё

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/dojo/1.13.0 / dojo / dojo.js ">
сайт:
dojotoolkit.org
версий:
1.13.0, 1.12.3, 1.12.2, 1.12.1, 1.11.5, 1.11.4, 1.11.3, 1.11.2, 1.11.1, 1.10.9, 1.10.8, 1.10.7, 1.10.6, 1.10.5, 1.10.4, 1.10.3, 1.10.2, 1.10.1, 1.10.0, 1.9.11, 1.9.10, 1.9.9, 1.9.8, 1.9.7, 1.9.6, 1.9.5, 1.9.4, 1.9.3, 1.9.2, 1.9.1, 1.9.0, 1.8.14, 1.8.13, 1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.12, 1.7.11, 1.7.10, 1.7.9, 1.7.8, 1.7.7, 1.7.6, 1.7.5, 1.7.4, 1.7.3, 1.7.2, 1.7.1, 1.7. 0, 1.6.5, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.6, 1.5.5, 1.5.4, 1.5.3, 1.5.2, 1.5.1, 1.5.0, 1.4.8, 1.4.7, 1.4.6, 1.4.5, 1.4.4, 1.4.3, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.3, 1.2.0, 1.1.1

Ext Core

фрагмент:
<скрипт src = "https: // ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js ">
сайт:
sencha.com/products/extcore
версий:
3.1.0, 3.0.0

Hammer.JS

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js">
сайт:
hammerjs.github.io
версий:
2.0.8

Неопределенная наблюдаемая

фрагмент:
сайт:
https://github.com/material-motion/indefinite-observable-js
версий:
2.0,1, 1.0.1

jQuery

3.x фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
2.x фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
1.x фрагмент:
<скрипт src = "https: // ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js ">
сайт:
jquery.com
версий:
3.6.0, 3.5.1, 3.5.0, 3.4.1, 3.4.0, 3.3.1, 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0. 0, 1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3. 0, 1.2.6, 1.2.3
примечание:
3.3.0, 2.1.2, 1.2.5 и 1.2.4 не размещены из-за их короткой и нестабильной жизни в дикой природе.

jQuery Mobile

фрагмент:
<ссылка rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5 / jquery.mobile.min.css ">
сайт:
jquerymobile.com
версий:
1.4.5, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0
примечание:
Эта библиотека зависит от jQuery. Вы также должны загрузить jQuery перед загрузкой этого модуля.

пользовательский интерфейс jQuery

фрагмент:
<ссылка rel = "stylesheet" href = "https: // ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css ">
сайт:
jqueryui.com
версий:
1.12.1, 1.12.0, 1.11.4, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.4, 1.10.3, 1.10.2, 1.10.1, 1.10.0, 1.9.2, 1.9.1, 1.9.0, 1.8.24, 1.8.23, 1.8.22, 1.8.21, 1.8.20, 1.8.19, 1.8.18, 1.8.17, 1.8.16, 1.8.15, 1.8.14, 1.8.13, 1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4, 1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0, 1.5.3, 1.5.2
примечание:
Эта библиотека зависит от jQuery. Вы также должны загрузить jQuery перед загрузка этого модуля. Версия 1.8.3 не размещается из-за ее короткого life, а псевдоним 1.8.3 фактически загружает 1.8.4.

Движение материалов

фрагмент:
сайт:
https://github.com/material-motion/material-motion-js
версий:
0.1.0

MooTools

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js">
сайт:
mootools.сеть
версий:
1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.5, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.5, 1.2.4, 1.2.3, 1.2.2, 1.2.1, 1.1.2, 1.1.1
примечание:
Для версий 1.5.1 и ранее имя файла минифицированной версии называется mootools-yui-compressed.js вместо mintools.min.js.

Myanmar Tools

фрагмент:
<скрипт src = "https: // ajax.googleapis.com/ajax/libs/myanmar-tools/1.2.1/zawgyi_detector.min.js "> <скрипт src = "https://ajax.googleapis.com/ajax/libs/myanmar-tools/1.2.1/zawgyi_converter.min.js">
сайт:
https://github.com/google/myanmar-tools/
рекомендуемые версии:
1.2.1
всех размещенных версий:
1.0.1
1.1.0
1.1,1
1.1.3
1.2.0
1.2.1

Прототип

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js">
сайт:
prototypejs.org
версий:
1.7.3.0, 1.7.2.0, 1.7.1.0, 1.7.0.0, 1.6.1.0, 1.6.0.3, 1.6.0.2

скрипт.aculo.us

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js">
сайт:
script.aculo.us
версий:
1.9.0, 1.8.3, 1.8.2, 1.8.1
примечание:
Эта библиотека зависит от Prototype . Перед загрузкой этого модуля вы должны загрузить Prototype.

Shaka Player

фрагмент:





сайт:
https://github.com/google/shaka-player/
рекомендуемые версии:
3.2.0, 3.1.2, 3.0.13, 2.5.23
всех размещенных версий:
3.2.0, 3.1.2, 3.0.13, 3.1.1, 3.0.12, 2.5.23, 3.1.0, 3.0.11, 2.5.22, 3.0.10, 3.0.9, 2.5.21, 3.0 .8, 2.5.20, 3.0.7, 2.5.19, 3.0.6, 2.5.18, 3.0.5, 2.5.17, 3.0.4, 2.5.16, 3.0.3, 2.5.15, 3.0.2 , 2.5.14, 3.0.1, 2.5.13, 3.0.0, 2.5.12, 2.5.11, 2.5.10, 2.5.9, 2.5.8, 2.5.7, 2.5.6, 2.5.5, 2.5.4, 2.5.3, 2.5.2, 2.5.1, 2.5.0, 2.5.0-beta3, 2.5.0-beta2, 2.5.0-beta, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.10, 2.3.9, 2.3.8, 2.3.7, 2.3.6, 2.3.5, 2.3.4, 2.3.3, 2.3.2, 2.3.1, 2.3.0, 2.2.10, 2.2. 9, 2.2.8, 2.2.7, 2.2.6, 2.2.5, 2.2.4, 2.2.1, 2.2.0, 2.1.9, 2.1.8, 2.1.7, 2.1.6, 2.1.5, 2.1.4, 2.1.3, 2.1.2, 2.1.1, 2.1.0, 2.0.9, 2.0.8, 2.0.6, 1.6.5

SPF

фрагмент:
<скрипт src = "https: // ajax.googleapis.com/ajax/libs/spf/2.4.0/spf.js ">
сайт:
youtube.github.io/spfjs
версий:
2.4.0, 2.3.2, 2.3.1, 2.3.0, 2.2.0, 2.1.2, 2.1.1, 2.1.0, 2.0.1, 2.0.0

SWFObject

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
сайт:
github.com / swfobject / swfobject
версий:
2.2, 2.1

three.js

фрагмент:
<скрипт src = "https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js">
сайт:
threejs.org
версий:
r84, r83, r82, r81, r80, r79, r78, r77, r76, r75, r74, r73, r72, r71, r70, r69, r68, r67, r49

Загрузчик веб-шрифтов

фрагмент>
<скрипт src = "https: // ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js ">
сайт:
github.com/typekit/webfontloader
версий:
1.6.26, 1.6.16, 1.5.18, 1.5.10, 1.5.6, 1.5.3, 1.5.2, 1.5.0

Поиск и устранение неисправностей

Видите устаревшую версию? Убедитесь, что вы не используете ссылки "автоматическая версия", например / jqueryui / 1 / ... , но вместо этого используйте URL-адреса, относящиеся к точным версиям.Из-за опасений по поводу кеширования и отсутствия совместимости даже между второстепенными версиями у нас есть устарела и перестала обновлять псевдонимы автоматической версии некоторое время назад, поэтому они будут навсегда ссылаться на старую версию (чтобы не нарушать работу существующих сайтов, которые все еще их используют).

Если возникнут проблемы:

Как использовать jQuery с проектами SPFx

Жоао Феррейра 22 апреля 2020 г. Разработка, SharePoint 0 комментариев

jQuery - это библиотека JavaScript, которая помогла сформировать Интернет, который мы все знаем сегодня, хотя ее первый выпуск был 13 лет назад, и, несмотря на то, что теперь у нас есть доступ к другим мощным библиотекам, таким как React и Angular, jQuery все еще используется 80 % самых популярных сайтов в Интернете.

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

В этой статье я объясню вам, как добавить jQuery к вашим решениям SPFx двумя разными способами.

Включить jQuery в качестве зависимости с использованием генератора по умолчанию

Этот метод можно использовать в проектах, созданных с помощью нестандартного генератора, выполнив следующие действия:

  1. В проекте SPFx разверните папку config
  2. Отредактируйте конфигурацию .json файл
  3. Найдите раздел externals и добавьте следующую зависимость
    "jquery": {
    «путь»: «https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js»,
    "globalName": "jQuery"
    }
     
  4. Откройте консоль в папке проекта и добавьте определения типов, выполнив следующую команду
     установка npm --save @ types / jquery 
  5. На вашем ts импорт файла jQuery
     import * as $ from 'jquery'; 
  6. Чтобы проверить использование jQuery в пустом проекте, замените код в методе рендеринга следующим:
    domElement.innerHTML = `
    SharePoint и сердечки; jQuery!

    Эта веб-часть SPFx использует jQuery $ {$. fn.jquery}

    `;

Примечание: На шаге 3 вы можете выбрать вместо этого локальную версию jQuery, все, что вам нужно сделать, это добавить файл JS в свой проект, в следующем примере jQuery был добавлен локально в папку js внутри папки src .

"jquery": {
"путь": "./src/webparts/helloWorld/js/jquery.min.js",
"globalName": "jQuery"
}
 

Это позволит избежать получения URL-адреса внешнего CDN, указанного во всплывающем окне установки, и jQuery будет обслуживаться из Microsoft CDN вместе с веб-частью.

Создайте проект с jQuery, используя генератор PnP SPFx Yeoman

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

Для оптимизации рабочего процесса разработки он расширяет возможности проектов ReactJS и Knockout и поддерживает дополнительные фреймворки, такие как HandlebarsJS, Aurelia, VueJS и Angular Elements. Он также включает расширенные инструменты анализа кода и тестирования, которыми вы можете воспользоваться в процессе разработки.

Чтобы создать веб-часть SPFx с включенным jQuery, выполните следующие действия:

  1. Установите генератор PnP SPFx Yeoman
     установка npm -g @ pnp / generator-spfx 
  2. После установки запустить генератор
     лет @ pnp / spfx 
  3. В поле выбора рамки выберите Без рамки
  4. В библиотеках выберите jQuery и любую другую библиотеку, которую вы можете использовать
  5. Залейте все остальные параметры в генератор
  6. После создания проекта откройте файл ts в папке src
  7. Импортируйте jQuery, добавив следующий импорт в свой код
     импорт $ из 'jquery' 
  8. Чтобы проверить использование jQuery в пустом проекте, замените код в методе рендеринга следующим:
    domElement.innerHTML = `
    SharePoint и сердечки; jQuery!

    Эта веб-часть SPFx использует jQuery $ {$. fn.jquery}

    `;

Вектор дизайна, созданный историями - www.freepik.com

Связанные

6 вещей, которые вам нужно знать о jQuery

Кроме того, разработка с использованием jQuery может уменьшить количество обращений в службу поддержки.Ваша служба поддержки будет признательна за то, что ваши разработчики активно кодируют, чтобы избежать ужасных «сбоев браузера».

3. jQuery легко интегрируется с Visual Studio IDE.

NuGet - это расширение Visual Studio, которое упрощает добавление, удаление и обновление библиотек и инструментов в проектах Visual Studio, использующих .NET Framework. NuGet существует уже много лет и является надежным источником для разработчиков, позволяющих обмениваться пакетами для Microsoft Visual Studio и разрабатывать их.

Visual Studio 2010 поддерживает интеграцию библиотеки jQuery через диалоговое окно «Управление пакетами NuGet».Это активирует функцию Intellisense в Visual Studio, которая дает разработчику немедленный доступ к методам и синтаксису jQuery без необходимости покидать представление кода для исследования. Нет лучшего инструмента для работы в среде .NET на базе Microsoft.

Как правило, большинство разработчиков .NET используют Visual Studio и знакомы с NuGet. Это одна из причин, по которой популярность jQuery продолжает расти среди разработчиков .NET. С добавлением мобильной темы jQuery для Windows теперь у вас есть все преимущества разработки библиотеки jQuery, доступные для платформы Windows Phone.

Microsoft демонстрирует, что серьезно относится к HTML5, который включает в себя множество элементов jQuery, продвигая использование библиотек jQuery, которые были приняты толпой HTML5. Microsoft поощряет использование jQuery не только в мобильной разработке, но и в новых UI-приложениях в стиле Metro.

4. jQuery делает анимированные приложения похожими на Flash.

Flash-разработчики стоят недешево. Разработка во Flash требует огромного обучения; Среднестатистическому разработчику могут потребоваться годы практики, чтобы создать подобные фильмы, прославившие Flash.С другой стороны, jQuery бесплатен и требует только знания JavaScript и HTML.

Допустим, вы можете позволить себе свое программное обеспечение и своего Flash-разработчика. Ему или ей по-прежнему нужно писать код для браузеров и платформ, которые не поддерживают Flash, и для аудитории, которая не сможет просматривать ваш Flash-контент. Это один из самых больших недостатков создания веб-сайта, поддерживающего только Flash, и одно из самых больших преимуществ создания веб-сайтов на HTML 5.

Между тем, jQuery использует комбинацию CSS, HTML, JavaScript и Ajax.Все эти технологии основаны на разметке и предназначены для совместной работы. Это означает, что вы можете применить стратегию оптимизации к своему сайту, не делая специальных настроек для таких технологий, как Flash. Итог: вы можете добиться великолепных эффектов, которые будут привлекать вашу аудиторию.

Интересные примеры анимации, которую можно создать с помощью HTML5 и jQuery, можно найти на сайте boostinspiration.com. Веб-сайты HTML5: 10 примеров уничтожения Flash.

5. Страницы jQuery загружаются быстрее.

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

Лучший способ сделать это - уменьшить размер кода. Если ваш сайт написан на основе HTML и CSS, вы можете легко внести в код единообразные корректировки, которые уменьшат размер. Как и CSS, файлы jQuery обычно хранятся отдельно от самой веб-страницы.Это позволяет разработчикам вносить изменения во всем сайте через один центральный репозиторий вместо поиска по структурам папок. Это основное преимущество кодирования CSS - и это доказанный успех.

Кроме того, jQuery дает вам возможность загружать теги Div только тогда, когда они вам нужны. Если вы принимаете меры для повышения скорости своего веб-сайта, вы можете подумать о загрузке только необходимых тегов Div, необходимых для события загрузки страницы. Таким образом, вы можете отображать только то, что пользователю нужно сразу увидеть, а остальные элементы вашего подразделения загружаются по мере необходимости.

6. jQuery может быть оптимизирован для SEO.

Возможно, у вас самый привлекательный сайт, но стоит ли оно того, если вы жертвуете стилем в пользу SEO? То, как вы кодируете свой сайт, сильно влияет на то, как его можно найти в Google, Bing и других поисковых системах.

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

Например:

    Отобразите вывод jQuery здесь

    Неупорядоченный список - это классический тег HTML, который существует уже много лет - поисковые системы будут обнаруживать или распознавать теги

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

      Еще одно SEO-преимущество комбинации HTML5-jQuery, о котором стоит упомянуть, заключается в том, что в анимацию можно загружать ключевые слова, которые могут быть прочитаны поисковыми системами.

      Зачем нужен jQuery

      Давайте вспомним некоторые преимущества использования jQuery в вашем следующем проекте веб-разработки.

      • Цена подходящая. Библиотека jQuery бесплатна.
      • Свет. Поскольку jQuery отправляет контент клиенту, он сокращает время ожидания ответа сервера.Кроме того, он меньше, чем Flash, поэтому обеспечивает более плавное воспроизведение и меньше ошибок.
      • Работает где угодно. HTML5 совместим с несколькими браузерами - он будет работать в любом браузере, мобильном телефоне или планшете и даже на устройствах Apple.
      • Низкая кривая обучения. Поскольку он основан на простом старом JavaScript, разработчики могут быстро изучить jQuery.
      • Наконец, jQuery оптимизирован для SEO и совместим с CSS3.

      Слайд-шоу: Помимо jQuery: 17 инструментов JavaScript для поколения HTML5

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *