[Внешний словарь] Поделитесь 8 интересными и полезными API

внешний интерфейс JavaScript

предисловие

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

Если эти API используются правильно, они могут улучшить удобство вашего приложения.

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

API могут быть такими забавными

Первый взгляд на визуализацию:

1. Интерфейс изменения поворота экрана монитора: изменение ориентации

определение:

этоAPIВы можете показать, находится ли ваш телефон горизонтально или нет, всем, кому это нужно знать.

использовать:

screenOrientation: function(){
    let self = this;
    let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        self.angle = orientation.angle;
    });
},
значение ориентация.угол ориентация экрана
0 вертикальный экран
90 пейзаж слева
-90/270 пейзаж справа
180 обратный экран

сквозь этоAPIМы можем добавить некоторые действия или изменения стиля, когда экран горизонтальный и вертикальный.

Если это просто изменение стиля, его также можно отслеживать с помощью медиа-запросов:

/* 竖屏 */
@media screen and (orientation: portrait) {
    // some css code
}
/* 横屏 */
@media screen and (orientation: landscape) {
    // some css code
}

2. Состояние батареи: navigator.getBattery()

определение:

этоAPIВы можете сообщить о состоянии батареи вашего телефона всем, кому это необходимо.

этоapiвозвращаетpromiseобъект, дастBatteryManagerОбъект, который содержит следующую информацию:

key описывать Примечание
charging Он заряжается? Читаемое свойство
chargingTime Если он заряжается, для зарядки потребуется больше времени Читаемое свойство
dischargingTime оставшаяся батарея Читаемое свойство
level Оставшийся процент заряда батареи Читаемое свойство
onchargingchange Слушайте изменения в состоянии зарядки Слушаемые события
onchargingtimechange Прислушивайтесь к изменениям времени зарядки Слушаемые события
ondischargingtimechange Мониторинг изменений времени готовности батареи Слушаемые события
onlevelchange Отслеживайте изменения процента оставшегося заряда батареи Слушаемые события

использовать:

getBatteryInfo: function(){
    let self = this;
    if(navigator.getBattery){
        navigator.getBattery().then(function(battery) {
            // 判断是否在充电
            self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
            // 电池充电状态改变事件
            battery.addEventListener('chargingchange', function(){
                self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
            });
        });
    }else{
        self.batteryInfo = '不支持电池状态接口';
    }
},

3. Заставьте телефон вибрировать: window.navigator.vibrate(200)

определение:

этоAPIМожет заставить ваш телефон вибрировать в соответствии с вашими мыслями.

использовать:
Эффекты вибрации используются во многих играх. Например, в Happy Landlord мобильный телефон будет вибрировать после того, как в помещика взорвется бомба, поэтому очень разумно выразить застенчивое настроение домовладельца.

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

vibrateFun: function(){
    let self = this;
    if( navigator.vibrate ){
        navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
    }else{
        self.vibrateInfo = "您的设备不支持震动";
    }
    <!--
    // 清除震动 
    navigator.vibrate(0);
    // 持续震动
    setInterval(function() {
        navigator.vibrate(200);
    }, 500);
    -->
},

4. Текущий язык: navigator.language

определение:

этоAPIМожет сказать вам, какой язык следует использовать в настоящее время.

Если вам, как и мне, нужна многоязычная адаптация, этот API может дать вам хорошую идею.

использовать:

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

function getThisLang(){
    const langList = ['cn','hk','tw','en','fr'];
    const langListLen = langList.length;
    const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
    for( let i = 0; i < langListLen; i++ ){
        let lang = langList[i];
        if(thisLang.includes(lang)){
            return lang
        }else {
          return 'en'
        }
    }
}

Разным языкам соответствуют разные языковые тексты.

5. Статус сети: navigator.onLine

определение:

этоAPIМожет сказать вам, подключен ли сетевой статус вашего устройства или нет.

использовать:

Например, я зашел в Nuggets утром, чтобы прочитать статью, но не успел ее закончить, как пришло время поесть Я так люблю учиться, что должен вернуться после обеда, чтобы продолжить чтение.

После 30 минут...

После ужина я вернулся в компанию, включил компьютер и продолжил читать статью, после прочтения планировал поставить лайк, а нашел вот такую ​​подсказку:

Эта подсказка меня немного смутила (просто нет сети).

В настоящее время мы можем использовать этот API, чтобы мы могли точно сообщить пользователю «Ваша сеть не может быть подключена, пожалуйста, проверьте». Чтобы пользователи могли получить лучший опыт?

код показывает, как показано ниже:

mounted(){
    let self = this;
    window.addEventListener('online',  self.updateOnlineStatus, true);
    window.addEventListener('offline', self.updateOnlineStatus, true);
},
methods: {
    updateOnlineStatus: function(){
        var self = this;
        self.onLineInfo = navigator.onLine ? "online" : "offline";
    },
}

Уведомление:navigator.onLineвернется только в том случае, если машина не подключена к локальной сети или маршрутизаторуfalse, иначе возвратtrue. То есть после того, как машина подключена к маршрутизатору, даже если маршрутизатор не подключен к сети,navigator.onLineвсе еще возвращаетсяtrue.

6. Страницу можно редактировать: contentEditable

определение:

этоAPIВы можете сделать все элементы страницы редактируемыми, сделав браузер своим редактором.

использовать:

  1. Вы можете ввести в адресной строкеdata:text/html, <html contenteditable>, чтобы браузер стал редактором.

используемые сцены:

Требования. Для страницы требуется поле ввода текста.

  1. Поле ввода текста по умолчанию имеет текстовые подсказки по умолчанию.
  2. В состоянии ввода текстового поля его высота будет автоматически увеличиваться вместе с текстовым содержимым.

Для таких нужд мы можем использовать<div contentEditable='true'></div>заменять<textarea>Этикетка.

ноcontentEditable='true'Заполнителя не будет, как насчет заполнителя?

Обычно я использую следующую схему, меняя класс после входа в контент:

<div class='haveInput' contentEditable='true' placeholder='请输入'></div> 
// css 样式
.haveInput:before {
    content: attr(placeholder);
    display: block;
    color: #333;
}

7. Мониторинг активного окна браузера: window.onblur и window.onfocus

определение:

Эти два API указывают, что окно теряет фокус и становится активным соответственно.

Просмотрите другие окна, сверните браузер, нажмите на другие программы и т. д., будет запущено событие window.onblur;
Вернувшись в окно, срабатывает событие window.onfocus.

использовать:

На скриншоте выше показано сообщение веб-версии WeChat.

Код прост:

mounted(){
    let self = this;
    window.addEventListener('blur',  self.doFlashTitle, true);
    window.addEventListener('focus', function () {
        clearInterval(self.timer);
        document.title = '微信网页版';
    }, true);
},
methods: {
    doFlashTitle: function(){
        var self = this;
        self.timer = setInterval( () => {
            if (!self.flashFlag) {
                document.title = "微信网页版";
            } else {
                document.title = `微信（${self.infoNum}）`;
            }
            self.flashFlag = ! self.flashFlag
        }, 500)
    },
}

8. Полноэкранный API (Полноэкранный API)

определение:

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

использовать:

Метод Element.requestFullscreen() используется для выполнения асинхронного запроса на перевод элемента в полноэкранный режим.

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

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

fullScreenFun: function(){
    let self = this;
    var fullscreenEnabled = document.fullscreenEnabled       ||
                            document.mozFullScreenEnabled    ||
                            document.webkitFullscreenEnabled ||
                            document.msFullscreenEnabled;

    if (fullscreenEnabled) {
        let de = document.documentElement;
        if(self.fullScreenInfo === '打开全屏'){
            if( de.requestFullscreen ){
                de.requestFullscreen();
            }else if( de.mozRequestFullScreen ){
                de.mozRequestFullScreen();
            }else if( de.webkitRequestFullScreen ){
                de.webkitRequestFullScreen();
            }
            self.fullScreenInfo = '退出全屏'
        } else {
            if( document.exitFullscreen ){
                document.exitFullscreen();
            }else if( document.mozCancelFullScreen ){
                document.mozCancelFullScreen();
            }else if( document.webkitCancelFullScreen ){
                document.webkitCancelFullScreen();
            }
            self.fullScreenInfo = '打开全屏'
        }
    } else {
        self.fullScreenInfo = '浏览器当前不能全屏';
    }
}

Связанный:

  1. document.fullscreenElement: элемент, который в данный момент находится в полноэкранном режиме.
  2. document.fullscreenEnabled: отметьте, доступен ли полноэкранный режим в данный момент.
  3. document.exitFullscreen(): выйти из полноэкранного режима

постскриптум

Эта статья проста. Моя цель — представить интересные API, чтобы повысить всеобщий интерес к внешнему интерфейсу.

Я думаю, что эти API более интересны.Если вы были заняты бизнесом, то эти API могут дать вам другое ощущение.

План вывода статей, связанных с Vue

В последнее время друзья всегда спрашивали меня о Vue, поэтому я опубликую 9 статей, связанных с Vue, в надежде быть полезным для всех. Я буду обновлять один через 7-10 дней.

  1. [Внешний словарь] Процесс внедрения Vuex в жизненный цикл Vue
  2. [Внешний словарь] Анализ адаптивных принципов Vue
  3. [Внешний словарь] Процесс исправления новых и старых VNodes
  4. [Front-end словарь] Как разрабатывать функциональные компоненты и загружать в npm
  5. [Внешний словарь] Оптимизируйте свой проект Vue с учетом этих аспектов
  6. [Внешний словарь] Разработка внешнего интерфейса на основе дизайна Vue-Router
  7. [Front-end словарь] Как правильно использовать Webpack в проекте
  8. [Внешний словарь] Рендеринг Vue на стороне сервера
  9. [Внешний словарь] Как выбрать между Axios и Fetch

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

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

Портал популярных статей

  1. [Front-end Dictionary] Решение проблемы проникновения прокрутки
  2. [Внешний словарь] Сравнение 5 видов реализации подвижных потолков (версия повышения производительности)
  3. [Внешний словарь] 9 советов по CSS, которые сделают вас счастливее
  4. [Внешний словарь] Поделитесь 8 интересными и полезными API
  5. [Внешний словарь] Какие ссылки кэша задействованы от ввода URL до отображения (очень подробно)
Категории