[Front-end Dictionary] 4 практичных и интересных фичи JS

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

предисловие

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

Здесь я познакомлю вас с этими функциями.

4 интересные функции JS

Используйте тег a для анализа URL-адреса

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

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

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        hash: a.hash.replace('#','')
    };
}

заявление этикетки

Иногда мы пишем двойноеforВыполните некоторую обработку данных в цикле.Иногда мы хотим выйти из цикла сразу, как только будут выполнены условия. Чтобы не тратить ненужные ресурсы.

В это время мы можем использоватьlabelиcontinue/breakС использованием:

firstLoop: 
for (let i = 0; i < 3; i++) { 
   for (let j = 0; j < 3; j++) {
      if (i === j) {
         continue firstLoop; // 继续 firstLoop 循环
         // break firstLoop; // 中止 firstLoop 循环
      }
      console.log(`i = ${i}, j = ${j}`);
   }
}
// 输出
i = 1, j = 0
i = 2, j = 0
i = 2, j = 1
 
for (let i = 0; i < 3; i++) { 
   for (let j = 0; j < 3; j++) {
      if (i === j) {
         continue 
      }
      console.log(`i = ${i}, j = ${j}`);
   }
}
// 输出
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0
i = 1, j = 2
i = 2, j = 0
i = 2, j = 1

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

пустой оператор

Оператор void оценивает данное выражение и возвращает значение undefined.

так какvoidЗначение операнда игнорируется, поэтому используйте его, когда операнд имеет побочные эффекты.voidбыло бы разумнее.

заменить undefined на void

так какundefinedнетJavaScriptключевое слово, поэтому мы назначаем переменную дляundefinedВозможны неожиданные результаты.

function t(){
    var undefined = 10;
    console.log(undefined);
}
console.log(t()); // 大多数浏览器下都是10

В приведенном выше коде мы можем захотеть присвоить значениеundefined, но получил10Эта странная ситуация. Таким образом, мы можем использоватьvoidзаменятьundefined.

Вот почему мы можем видеть использование во многих исходных кодахvoidзаменятьundefined.

Что такое IntersectionObserver?

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

Таким образом, мы можем использовать эту функцию для работы со скрытыми точками воздействия вместо использованияgetBoundingClientRect().topЭто более требовательный к производительности способ справиться с этим.

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

IntersectionObserverFun: function() {
    let self = this;
    let ele = self.$refs.pride_tab_fixed;
    if( !!IntersectionObserver ){
        let observer = new IntersectionObserver(function(){
            let offsetTop = ele.getBoundingClientRect().top;
            self.titleFixed = offsetTop < 0;
        }, {
            threshold: [1]
        });
        observer.observe(document.getElementsByClassName('title_box')[0]);
    } else {
        window.addEventListener('scroll', _.throttle(function(){
            let offsetTop = ele.getBoundingClientRect().top;
            self.titleFixed = offsetTop < 0;
        }, 50));
    }
},

Я надеюсь, что эти 4 функции могут быть вам полезны, тогда поставьте лайк и вперед.

Наконец

Если вы хотите присоединиться к [большой группе по обмену интерфейсом], подпишитесь на официальный аккаунт и нажмите «общение и группа», чтобы добавить робота, который будет автоматически втягивать вас в группу. Следуйте за мной, чтобы получать последние галантерейные товары в первый раз.

Категории