Резюме нескольких очень интересных моментов знания javascript

внешний интерфейс JavaScript
Резюме нескольких очень интересных моментов знания javascript

Как front-end энтузиаст, я использовал свободное время для изучения исходного кода нескольких зарубежных веб-сайтов и обнаружил, что будь то библиотека или бизнес-код, используются некоторые интересные API.Я думаю, что необходимо подвести итоги второго исследования. Ведь уже 2020 год, и пора обновлять технические запасы.В этой статье в основном используются практические кейсы, чтобы дать вам быстрое понимание следующих пунктов знаний:

  • Местные наблюдатели-наблюдатели
  • Подробно о событиях тегов сценариев — почему события продолжают выполняться после удаления тегов сценариев
  • Proxy/Reflect
  • пользовательское событие
  • fileReader API
  • Полноэкранная веб-страница во весь экран
  • Использование URL-API
  • Использование геолокации API геолокации
  • Уведомление о собственном сообщении браузера уведомлений
  • Состояние батареи Состояние батареи устройства

Я приведу несколько интересных примеров для некоторых API, так что давайте начнем наше изучение~

1. Observer API

Наблюдатель — это обозреватель, который поставляется вместе с браузером и в основном предоставляетIntersection, Mutation, Resize, PerformanceЭти четыре типа наблюдателей, здесь автор акцентирует внимание на введенииIntersection Observer.

1.1 Intersection Observer

IntersectionObserverПредоставляет способ асинхронного наблюдения за состоянием пересечения целевого элемента и его предков. Когда создается объект IntersectionObserver, он настраивается на прослушивание определенной доли видимой области в корне, и его конфигурация не может быть изменена, поэтому данный объект-наблюдатель может использоваться только для прослушивания определенных изменений в видимой области; однако мы можем настроить прослушивание нескольких целевых элементов в одном и том же объекте-наблюдателе.

Проще говоря, этот API может асинхронно отслеживать изменение положения целевого элемента в корневом элементе и запускать ответные события.Мы можем использовать его для достижения более эффективногоЛенивая загрузка изображения, бесконечная прокруткатак же какотчеты о содержанииИ т. д. Далее мы будем использовать пример, чтобы проиллюстрировать шаги его использования.

// 1.定义观察者及观察回调
const intersectionObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => { 
      console.log(entry)
      // ...一些操作
    }); 
   },
   {
    root: document.querySelector('#root'),
    rootMargin: '0px',
    threshold: 0.5
   }
)
// 2. 定义要观察的目标对象
const target = document.querySelector(“.target”); 
intersectionObserver.observe(target);

Приведенный выше код реализует базовыйIntersection Observer, хотя содержательной функции в существующем коде нет.Далее введем значение используемых в коде параметров:

  • callbackПервый параметр экземпляра IntersectionObserver, обратный вызов будет срабатывать, когда целевой элемент и корневой элемент преодолеют пороговое значение Каждый из элементов сохраняет информацию о позиции наблюдателя, второй параметр — это наблюдатель, сам наблюдатель. печатает, как показано ниже:

    вrootBoundsПредставляет информацию о расположении корневого элемента,boundingClientRectПредставляет информацию о местоположении целевого элемента,intersectionRectУказывает информацию о положении вилочной части,intersectionRatioПредставляет видимый масштаб целевого элемента.

  • свойства конфигурацииВторой параметр экземпляра IntersectionObserver используется для настройки свойств прослушивания, которые имеют следующие три свойства:

    • rootКонкретный элемент-предок контролируемого объекта. Если значение не передано или значение равно null, по умолчанию используется окно просмотра документа верхнего уровня.
    • rootMarginПрямоугольное смещение, добавленное к ограничительной рамке корневой (корневой) ограничивающей рамки при расчете пересечения, что может эффективно уменьшить или расширить диапазон определения корня для удовлетворения потребностей расчета.
    • thresholdsСписок, содержащий пороги, в порядке возрастания, где каждый порог в списке представляет собой отношение площади пересечения к площади границы объекта прослушивания. Уведомление генерируется при пересечении любого из порогов объекта прослушивания. Если конструктор не передает значение, значение по умолчанию равно 0. Вышеупомянутое введение атрибута может быть трудно понять буквально, автор сделал несколько набросков, чтобы дать каждому интуитивное понимание:
      Когда мы устанавливаем rootMargin на 10 пикселей, наш корень будет увеличивать область влияния, но целевой элемент будет отслеживаться, когда он перемещается в светло-красную область.Конечно, мы также можем установить для rootMargin отрицательное значение, чтобы уменьшить область влияния , Его поддерживаемые значения для процентов и пикселей, как показано ниже:
rootMargin: '10px'
rootMargin: '10%'
rootMargin: '10px 0px 10px 10px'

Пороги можно понимать следующим образом:

Как показано на рисунке выше, когда мы устанавливаем порог на [0,25, 0,5], обратный вызов будет запускаться, когда 25% и 50% целевого элемента попадают в диапазон влияния корневого элемента.Используя эту функцию, мы часто можем достичь анимации несоответствия или более. Выполнять различные взаимодействия в соответствии с изменением положения целевого элемента. Разумеется, Intersection также предоставляет следующие методы для управления объектом наблюдения:

  • disconnect()Заставить объект IntersectionObserver перестать прослушивать работу
  • takeRecords()Возвращает массив объектов IntersectionObserverEntry для всех целей наблюдения.
  • unobserve()Заставить IntersectionObserver перестать слушать определенный целевой элемент

Разобравшись с использованием и API, давайте взглянем на практическое применение — реализацию отложенной загрузки изображений:

<img src="loading.gif" data-src="absolute.jpg">
<img src="loading.gif" data-src="relative.jpg">
<img src="loading.gif" data-src="fixed.jpg">

<script>
let observerImg = new IntersectionObserver(
(entries, observer) => { 
    if (entries[0].intersectionRatio = 0) return
    entries.forEach(entry => {
        // 替换为正式的图片
        entry.target.src = entry.target.dataset.src;
        // 停止监听
        observer.unobserve(entry.target);
      });
    }, 
    {
      root: document.getElementById('scrollView'),
      threshold: 0.3
    }
);

document.querySelectorAll('img').forEach(img => { observerImg.observe(img) });
</script>

Приведенный выше код реализует функцию ленивой загрузки изображения.Когда 30% изображения попадает в корневой элемент, загружается настоящее изображение, что напоминает мне предыдущую картину использования react-lazyload, когда реклама была скрыта и зарегистрирована. также используйте его для достижения бесконечной прокрутки, анимации параллакса H5 и других интересных интерактивных сценариев.

1.2 Наблюдатель мутаций и наблюдатель изменения размера

Mutation ObserverОн в основном используется для реализации мониторинга при изменении dom, а также запускается асинхронно, что очень удобно для мониторинга производительности.Resize ObserverОн в основном используется для отслеживания изменений размера элементов.По сравнению с событием window.resize, которое запускается каждый раз при изменении окна, Resize Observer имеет лучшую производительность и более точный контроль над домом.Он будет использоваться только перед рисованием или после макета. Инициировать вызов. Использование двух вышеуказанных API очень похоже на использование Intersection, да и официальная информация тоже хорошо написана, можете внимательно изучить.

2. Причина, по которой событие все еще может быть выполнено после удаления тега script

Этот вопрос в основном задавал друг раньше.Идея на тот момент заключалась в том, чтобы просто думать, что после того, как код в скрипте был выполнен и привязан к dom, он сохраняется в памяти браузера.Объяснение, пусть это для всех чувствовать:

Когда интерпретатор JavaScript выполняет сценарий, он выполняет его блоками, то есть, когда браузер анализирует поток HTML-документа, если он встречает тег script, интерпретатор JavaScript будет ждать загрузки блока кода перед предварительной компиляцией. , а затем выполнить. Итак, когда код для этого блока кода начинает выполняться, этот сегмент кода уже проанализирован. В настоящее время его удаление из DOM не повлияет на выполнение кода.

3. Proxy/Reflect

Хотя Proxy/Reflect является API es6 и существует уже несколько лет, он до сих пор редко используется в проектах.Если вы работаете над базовой архитектурой, рекомендуется использовать его чаще.В конце концов, фреймворк vue/ реагировать Исходный код заставляет эти API играть как огонь, и их все еще необходимо освоить.

На самом деле, если мы внимательно прочитаем введение в mdn или статью г-на Руана Ифэна, мы все еще очень хорошо понимаем использование этих API.Далее мы подробно представим эти два API и сценарии приложений.

3.1 Proxy

Прокси можно понимать как настройку уровня «перехвата» перед целевым объектом, и доступ к объекту из внешнего мира должен сначала пройти этот уровень перехвата, поэтому он обеспечивает механизм фильтрации и перезаписи доступа к внешнему миру. . Прокси используется с Reflect во многих сценариях. Использование также очень простое, давайте посмотрим на основное использование прокси:

const obj = {
   name: '徐小夕',
   age: '120'
 }
 const proxy = new Proxy(obj, {
   get(target, propKey, receiver) {
    console.log('get:' + propKey)
    return Reflect.get(target, propKey, receiver)
   },
   set(target, propKey, value, receiver) {
    console.log('set:' + propKey)
    return Reflect.set(target, propKey, value, receiver)
   }
 })
 console.log(proxy.name) // get:name 徐小夕
 proxy.work = 'frontend' // set:work frontend

Приведенный выше код перехватывает объект obj и переопределяет методы чтения и записи (get/set), чтобы мы могли выполнять дополнительные операции при доступе к объекту.

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

  • Реализует индекс массива для чтения отрицательных чисел

Большинство массивов, с которыми мы обычно работаем, являются прямыми операциями, и мы не можем искать массив в обратном направлении, указав отрицательное число, как показано на следующем рисунке:

Мы не можем получить хвостовой элемент массива через arr[-1] (то же верно и для строк), в настоящее время мы можем использовать Proxy для достижения этой функции, это наша структура немного похожа на кольцо:
Преимущество этой реализации в том, что если мы хотим получить доступ к последнему элементу массива, нам не нужно сначала получать длину, а затем обращаться к ней по индексу:

// 原始写法
arr[arr.length -1]
// 通过proxy改造后写法
arr[-1]

Код реализации выглядит следующим образом:

function createArray(...elements) {
  let handler = {
    get(target, propKey, receiver) {
      let index = Number(propKey);
      if (index < 0) {
        propKey = String(target.length + index);
      }
      return Reflect.get(target, propKey, receiver);
    }
  };

  let target = [];
  target.push(...elements);
  return new Proxy(target, handler);
}

Мы можем обнаружить, что приведенный выше код использует прокси для проксирования операции чтения массива и внутренне инкапсулирует функцию поддержки поиска отрицательных значений. Конечно, мы также можем выполнить ту же функцию без прокси. Реализация здесь относится к реализации Г-н Жуань Ифэн.

  • Используйте прокси для получения более элегантного валидатора

Как правило, когда мы делаем проверку формы, мы пишем некоторыеif elseилиswitchАнализируя полученную проверку на различных значениях атрибута, мы можем использовать один и тот жеproxyЭлегантный для его реализации код выглядит следующим образом:

const formData = {
   name: 'xuxi',
   age: 120,
   label: ['react', 'vue', 'node', 'javascript']
 }
 // 校验器
 const validators = {
   name(v) {
     // 检验name是否为字符串并且长度是否大于3
     return typeof v === 'string' && v.length > 3
   },
   age(v) {
     // 检验age是否为数值
     return typeof v === 'number'
   },
   label(v) {
     // 检验label是否为数组并且长度是否大于0
     return Array.isArray(v) && v.length > 0
   }
 }
 // 代理校验对象
 function proxyValidator(target, validator) {
  return new Proxy(target, {
    set(target, propKey, value, receiver) {
      if(target.hasOwnProperty(propKey)) {
        let valid = validator[propKey]
        if(!!valid(value)) {
          return Reflect.set(target, propKey, value, receiver)
        }else {
          // 一些其他错误业务...
          throw Error(`值验证错误${propKey}:${value}`)
        }
      }
    }
  })
 }

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

let formObj = proxyValidator(formData, validators)
formObj.name = 333;   // Uncaught Error: 值验证错误name:f
formObj.age = 'ddd'   // Uncaught Error: 值验证错误age:f

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

  • Реализовать перехват запросов и отчеты об ошибках
  • Реализовать фильтрацию данных

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

3.2 Reflect

Reflectобъект сProxyКак и объект, это также новый API, предоставляемый ES6 для работы с объектом, сотрудничает больше сценариев приложений.proxyиспользуется вместе, который использовался выше. Вы можете использоватьObjectНекоторые методы объекта, которые явно являются внутренними по отношению к языку, помещаются вReflectобъект и изменить некоторыеObjectВозвращаемый результат метода.Reflectметоды объекта иProxyМетоды объекта соответствуют один к одному, пока онProxyметоды объекта, вы можетеReflectНайдите соответствующий метод на объекте.

4. Пользовательские события

CustomEvent API — очень интересный API, и он очень полезен. Что еще более важно, он очень прост в освоении и поддерживается большинством современных браузеров. Мы можем заставить любой элемент dom прослушивать и запускать пользовательские события, просто сделайте следующее:

// 添加一个适当的事件监听器
dom1.addEventListener("boom", function(e) { something(e.detail.num) })

// 创建并分发事件
var event = new CustomEvent("boom", {"detail":{"num":10}})
dom1.dispatchEvent(event)

Давайте взглянем на введение параметра CustomEvent:

  • typeНазвание типа события, например «бум» в приведенном выше коде.
  • CustomEventInitПредоставляет информацию о конфигурации о событии, есть несколько конкретных свойств
    • bubblesлогическое значение, указывающее, будет ли событие всплывать
    • cancelableлогическое значение, указывающее, можно ли отменить событие
    • detailДанные передаются при инициализации события

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

Автор нарисовал скетч боя с боссом.Текущая сцена - два игрока вместе сражаются с боссом.Мы можем вызвать его, когда игрок начинает атаку.dispatchПользовательские события DOT, босс слушает, чтобы автоматически вычесть количество крови после инцидента, чтобы повредить значение различных ролей, мы можем хранить вdetailА потом распределять боль по шаблону стратегии.У меня такое было в школе развитияигра Н5Очень интересно использовать подобный узор большое количество раз.

5. fileReader

File APIЭто позволяет нам получить доступ к данным файла на стороне браузера, например, предварительный просмотр файла, получение информации о файле (например, имя файла, содержимое файла, размер файла и т. д.), и может реализовать загрузку файла на интерфейсе. (можно использовать canvas и window.URL.revokeObjectURL. Некоторые возможности.) Конечно, мы также можем добиться высокого пользовательского опыта, например, перетаскивания и загрузки файлов. Далее давайте рассмотрим несколько практических примеров.

  • Показать миниатюры
function previewFiles(files, previewBox) {
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      var imageType = /^image\//;
      
      if (!imageType.test(file.type)) {
        continue;
      }
      
      var img = document.createElement("img");
      previewBox.appendChild(img); // 假设"preview"就是用来显示内容的div
      
      var reader = new FileReader();
      reader.onload = (function(imgEl) { 
        return function(e) { imgEl.src = e.target.result; }; 
      })(img);
      reader.readAsDataURL(file);
    }
  }

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

  • Компонент загрузки файла пакета

Подробную статью автор уже писал ранее, поэтому пример приводить не буду.Адрес статьи:

6. Fullscreen

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

// 开启全屏
document.documentElement.requestFullscreen();
// 退出全屏
document.exitFullscreen();

приведенного выше кодаdocument.documentElementЕго также можно заменить любым элементом, который вы хотите сделать полноэкранным.По умолчанию мы также можем использовать document.fullscreenElement, чтобы определить, находится ли текущая страница в полноэкранном состоянии, чтобы добиться эффекта переключения экрана.Если это реакция Разработчик, мы также можем использовать. Он инкапсулирован в пользовательские хуки для реализации связанных с бизнесом функций полноэкранного переключения.

7. URL

URL-API является частью стандарта URL-адресов, который определяет, что представляет собой действительный унифицированный указатель ресурсов и API для доступа к URL-адресам и управления ими.

Мы можем делать много интересных вещей с компонентом URL. Например, нам нужно извлечь параметры URL-адреса и передать их в фоновый режим. Традиционный метод заключается в написании метода для анализа строки URL-адреса и возврата объекта запроса. вручную. Но используя объект URL, мы можем легко получить параметры URL следующим образом:

let addr = new URL(window.location.href)
let host = addr.host  // 获取主机地址
let path = addr.pathname  // 获取路径名
let user = addr.searchParams.get("user")  // 获取参数为user对应的值

Приведенный выше код показывает, что если мы преобразуем URL-адрес в объект URL-адреса, то мы можем легко получить параметры URL-адреса через API, предоставляемый searchParams, без написания метода самостоятельно.

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

function sortMD5WithParameters() {
    let url = new URL(document.location.href);
    url.searchParams.sort();
    let keys = url.searchParams.keys();
    let params = {}
  
    for (let key of keys) {
      let val = url.searchParams.get(key);
      params[key] = val
    };
    // ...md5加密
    return MD5(params)
 }

8. Geolocation

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

Вот несколько интересных примеров, чтобы дать вам представление:

  • В зависимости от региона на сайте отображаются разные темы:
  • Отображение различных рекомендаций в зависимости от области пользователяЭтот пункт часто используется веб-сайтами электронной коммерции или информационными веб-сайтами. Например, если пользователь находится в Синьцзяне, он рекомендует рекламу дынь и фруктов, а в Пекине он рекомендует рекламу туристических достопримечательностей и т. д. Хотя фактическое приложение часто сложнее, но это тоже идея.

На самом деле приложение — это гораздо больше. Программисты могут использовать свое воображение, чтобы делать более интересные вещи и делать свои веб-сайты более интеллектуальными. Далее я напишу фрагмент кода для получения местоположения пользователя на основе промисов:

function getUserLocation() {
    return new Promise((resolve, reject) => {
      if (!navigator.geolocation) {
        reject()
      } else {
        navigator.geolocation.getCurrentPosition(success, error);
      }

      function success(position) {
        const latitude  = position.coords.latitude;
        const longitude = position.coords.longitude;
        resolve({latitude, longitude})
      }

      function error() {
        reject()
      }
    })
  }

Использование и результаты показаны на следующем рисунке:

Мы вызываем сторонние API (такие как Baidu, AutoNavi) на основе полученных широты и долготы, чтобы получить точную информацию о местоположении пользователя.

9. Notifications

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

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

Соответствующий код выглядит следующим образом:

Notification.requestPermission( function(status) {
  console.log(status); // 仅当值为 "granted" 时显示通知
  var n = new Notification("趣谈前端", {body: "从零搭建一个CMS全栈项目"}); // 显示通知
});

Конечно, уведомление браузера также предоставляет нам 4 API триггера событий, чтобы мы могли осуществлять более полный контроль:

  • onshowЗапускается, когда пользователю отображается уведомление (устарело, но все еще работает в некоторых браузерах)
  • onclickЗапускается, когда пользователь нажимает на уведомление
  • oncloseЗапускается при отклонении уведомления (устарело, но все еще работает в некоторых браузерах)
  • onerrorСрабатывает при возникновении ошибки в уведомлении

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

Notification.requestPermission( function(status) {
  console.log(status); // 仅当值为 "granted" 时显示通知
  var n = new Notification("趣谈前端", {body: "从零搭建一个CMS全栈项目"}); // 显示通知
      n.onshow = function () { 
        // 消息显示时执行的逻辑
        console.log('show') 
      }
      n.onclick = function () { 
        // 消息被点击时执行的逻辑
        history.push('/detail/1232432')
      }
      n.onclose = function () { 
        // 消息关闭时执行的逻辑
        console.log('close')
      }
});

Разумеется, перед его использованием нужно получить разрешение, и способ очень простой, о нем можно узнать на mdn.

10. Battery Status

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

в предыдущей версииBattery Status APIПредусмотрено несколько функций прослушивания событий для отслеживания изменения питания и того, заряжается ли устройство, но эти API были заброшены, когда я прочитал документ, а именно:

  • chargechange отслеживает, заряжается ли устройство
  • levelchange отслеживает уровень заряда аккумулятора
  • Chargetimechange Изменение времени зарядки
  • dischargingtimechange изменение времени разряда

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

Далее мы рассмотрим основное использование:

navigator.getBattery().then(function(battery) {
  console.log("是否在充电? " + (battery.charging ? "是" : "否"));
  console.log("电量等级: " + battery.level * 100 + "%");
  console.log("充电时间: " + battery.chargingTime + " s");
  console.log("放电时间: " + battery.dischargingTime + "s");
});

мы можем пройтиgetBatteryПолучите информацию о батарее устройства, этот API очень полезен, например, мы можем отключить анимацию веб-сайта или отключить некоторые трудоемкие задачи, когда батарея пользователя разряжена, или сделать соответствующие напоминания пользователям, изменить цвета веб-сайта и т. д. для воспроизведения видео. в веб-приложении или во время прямой трансляции мы также можем использовать CSS, чтобы нарисовать полосу заряда батареи, чтобы напомнить пользователям, когда батарея спешит.Как отличный пользователь веб-сайта, эту часть нельзя игнорировать.

использованная литература

наконец

Если вы хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реальных сражений, добро пожаловать в нашу техническую группу в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

Категории