/ Gists / JavaScript

Gists - JavaScript

On gists

Loops speed comparision

JavaScript

loops.js #

const numbers = [...Array(10000000)].map(
  (_, index) => index + 1
);
function measurePerf(label, method) {
  console.time(label);
  method();
  console.timeEnd(label);
}
measurePerf('filter', () => {
  const evens = numbers.filter((num) => num % 2 === 0);
});
measurePerf('forEach', () => {
  const evens = [];
  numbers.forEach((num) => {
    if (num % 2 === 0) {
      evens.push(num);
    }
  });
});
measurePerf('for...of', () => {
  const evens = [];
  for (const num of numbers) {
    if (num % 2 === 0) {
      evens.push(num);
    }
  }
});
measurePerf('for', () => {
  const evens = [];
  for (let i = 0; i < numbers.length; i++) {
    const num = numbers[i];
    if (num % 2 === 0) {
      evens.push(num);
    }
  }
});
On gists

Download file via JavaScript

JavaScript

download.js #

// https://javascript.plainenglish.io/how-to-download-a-file-using-javascript-fec4685c0a22

function downloadFile(url, fileName) {
  fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
    .then(res => res.blob())
    .then(res => {
      const aElement = document.createElement('a');
      aElement.setAttribute('download', fileName);
      const href = URL.createObjectURL(res);
      aElement.href = href;
      aElement.setAttribute('target', '_blank');
      aElement.click();
      URL.revokeObjectURL(href);
    });
};


downloadFile('https://www.google-analytics.com/analytics.js', 'gooleAnalytics.js')
On gists

Play/Pause video on scroll

JavaScript

on-scroll.js #

    window.addEventListener("load", videoScroll);
    window.addEventListener("scroll", videoScroll);

    function videoScroll() {
      if (document.querySelectorAll("video[autoplay]").length > 0) {
        let windowHeight = window.innerHeight,
            videoEl = document.querySelectorAll("video[autoplay]");

        for (let i = 0; i < videoEl.length; i++) {
          let thisVideoEl = videoEl[i],
              videoHeight = thisVideoEl.clientHeight,
              videoClientRect = thisVideoEl.getBoundingClientRect().top;

          if (videoClientRect <= windowHeight - videoHeight * 0.5 && videoClientRect >= 0 - videoHeight * 0.5) {
            thisVideoEl.play();
          } else {
            thisVideoEl.pause();
          }
        }
      }
    }
On gists

Observe

JavaScript

observe.js #

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` 是 dom 元素
      console.log(`${entry.target.id} is visible`);
    }
  });
};
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById( btn );
const bottomBtn = document.getElementById( bottom-btn );
observer.observe(btn);
observer.observe(bottomBtn);
On gists

Detect device type

JavaScript JS oneliners

snippet.js #

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ?  Mobile 
    :  Desktop ;
console.log(detectDeviceType());
On gists

JS lambda closure

•
JavaScript-OOP JavaScript

example.js #

function counter() {
  let count = 0;

  function increment() {
    return count += 1;
  };

  return increment;
}

const generateId = counter();

generateId(); // 1
generateId(); // 2
generateId(); // 3



// ES 6 ;)

const test = () => {
	let temp = 0;
	 return () => {
		temp++;
		console.log(temp);
	}
}

const invoke = test();

invoke();
invoke();
invoke();
On gists

Audio api

JavaScript

example.js #

   <script>
        var audios = [];
        audios[0] = new Audio("/sounds/audio_2019-12-20_11-12-44.mp3");    
        audios[1] = new Audio("/sounds/audio_2019-12-20_11-13-32.mp3");    
        audios[2] = new Audio("/sounds/audio_2019-12-20_11-13-43.mp3");    
        audios[3] = new Audio("/sounds/makak-oda.mp3");    
        
        var sound;
        var playAudio = function(index)
        {
            for (i = 0; i < audios.length; i++)
            {
                sound = audios[i];
                sound.pause();
                sound.currentTime = 0;
            }

            audios[index].play();
        };
        
    </script>
On gists

Search bar (cloning)

JavaScript

search-bar.js #

const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

let users = []

searchInput.addEventListener("input", e => {
  const value = e.target.value.toLowerCase()
  users.forEach(user => {
    const isVisible =
      user.name.toLowerCase().includes(value) ||
      user.email.toLowerCase().includes(value)
    user.element.classList.toggle("hide", !isVisible)
  })
})

fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => res.json())
  .then(data => {
    users = data.map(user => {
      const card = userCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      header.textContent = user.name
      body.textContent = user.email
      userCardContainer.append(card)
      return { name: user.name, email: user.email, element: card }
    })
  })
On gists

Alias - document.querySelector/all

JavaScript

solution.js #

// one way
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);


// second way
let $ = (selector) => document.querySelector(selector);
let $$ = (selector) => document.querySelectorAll(selector);

$('div').style.color = 'blue'
$$('div').forEach(div => div.style.background = 'orange')
On gists

How to write loops for promise with JavaScript?

JavaScript

loop.js #

const sayHi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Hi");
      resolve();
    }, 3000);
  });
};

const asyncArray = [sayHi, sayHi, sayHi];

const hi = async () => {
  for (const func of asyncArray) {
    console.log(await func());
  }
};