24 code ES6 tân tiến để khắc phục các lỗi thực hành JavaScript

Tôi đích thân tự chọn vài trích đoạn những code hữu ích nhất từ trang ‘30secondsofcode’, vốn đã là 1 nguồn tài nguyên tuyệt vời. Và bạn cũng đừng ngại chi mà hãy ủng hộ nó hết mình nhé.

Trong đề tài này tôi đã cố sắp xếp dựa theo cách sử dụng các thực hành của chúng. Và trả lời các câu hỏi thường gặp mà bạn có thể phải đối mặt trong dự án của mình:

Học Javascript 1: Syntax Parser, Execution Context, Lexical Environment là gì

Những thứ kỳ quặc của Javascript?

1. Cách để ẩn hết các yếu tố quy định?

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

// Example
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

2. Làm thế nào để kiểm tra nếu yếu tố đó có lớp quy định?

const hasClass = (el, className) => el.classList.contains(className);

// Example
hasClass(document.querySelector('p.special'), 'special'); // true

3. Cách để chuyển đổi 1 lớp cho 1 yếu tố?

const toggleClass = (el, className) => el.classList.toggle(className);

// Example
toggleClass(document.querySelector('p.special'), 'special'); 
// The paragraph will not have the 'special' class anymore

4. Làm thế nào để lấy vị trí cuộn của trang hiện tại?

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

// Example
getScrollPosition(); // {x: 0, y: 200}

5. Cách để cuộn-mượt hơn tới đầu trang?

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

// Example
scrollToTop();

6. Làm thế nào để kiểm tra nếu yếu tố ‘parent’ đang mang yếu tố ‘child’?

const elementContains = (parent, child) => parent !== child && parent.contains(child);

// Examples
elementContains(document.querySelector('head'), document.querySelector('title')); 
// true
elementContains(document.querySelector('body'), document.querySelector('body')); // false

7. Cách để kiểm tra nếu yếu tố quy định có thể hiển thị trong viewport?

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

// Examples
elementIsVisibleInViewport(el); // (not fully visible)
elementIsVisibleInViewport(el, true); // (partially visible)

8. Làm thế nào nạp tất cả hình ảnh vào trong 1 yếu tố?

const getImages = (el, includeDuplicates = false) => {
  const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'));
  return includeDuplicates ? images : [...new Set(images)];
};

// Examples
getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']
getImages(document, false); // ['image1.jpg', 'image2.png', '...']

9. Cách để nhận dạng 1 thiết bị di động hay 1 máy bàn/ laptop?

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

// Example
detectDeviceType(); // "Mobile" or "Desktop"

10. Làm thế nào để lấy URL hiện tại?

const currentURL = () => window.location.href;

// Example
currentURL(); // 'https://google.com'

11. Cách để tạo 1 object chứa thông số của URL hiện tại?

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );

// Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}

12. Làm thế nào để mã hóa 1 set các yếu tố hình thức như 1 object?

const formToObject = form =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

// Example
formToObject(document.querySelector('#form')); // { email: 'test@email.com', name: 'Test Name' }

13. Cách để lấy lại 1 set các thuộc tính được chỉ định bởi các selector đã cho từ 1 vật thể?

const get = (from, ...selectors) =>
  [...selectors].map(s =>
    s
      .replace(/\[([^\[\]]*)\]/g, '.$1.')
      .split('.')
      .filter(t => t !== '')
      .reduce((prev, cur) => prev && prev[cur], from)
  );
const obj = { selector: { to: { val: 'val to select' } }, target: [1, 2, { a: 'test' }] };

// Example
get(obj, 'selector.to.val', 'target[0]', 'target[2].a'); // ['val to select', 1, 'test']

14. Làm thế nào để gọi chức năng đã cung cấp sau khi chờ (đơn vị mili-giây)?

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
delay(
  function(text) {
    console.log(text);
  },
  1000,
  'later'
); 

// Logs 'later' after one second.

15. Cách để kích hoạt 1 sự kiện cụ thể trong yếu tố cho đi, tùy chọn chuyển dữ liệu tùy chỉnh?

const triggerEvent = (el, eventType, detail) =>
  el.dispatchEvent(new CustomEvent(eventType, { detail }));

// Examples
triggerEvent(document.getElementById('myId'), 'click');
triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });

16. Làm thế nào gỡ bỏ 1 event listener từ 1 yếu tố?

const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);

const fn = () => console.log('!');
document.body.addEventListener('click', fn);
off(document.body, 'click', fn); // no longer logs '!' upon clicking on the page

17. Cách để lấy định dạng có thể đọc được của số ml giây đã cho?

const formatDuration = ms => {
  if (ms < 0) ms = -ms;
  const time = {
    day: Math.floor(ms / 86400000),
    hour: Math.floor(ms / 3600000) % 24,
    minute: Math.floor(ms / 60000) % 60,
    second: Math.floor(ms / 1000) % 60,
    millisecond: Math.floor(ms) % 1000
  };
  return Object.entries(time)
    .filter(val => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
    .join(', ');
};

// Examples
formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574); // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'

18. Làm thế nào để lấy sự khác biệt (đơn vị ngày) giữa 2 date?

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);

// Example
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

19. Cách để tạo 1 yêu cầu ‘GET’ tới URL đã thông?

const httpGet = (url, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send();
};

httpGet(
  'https://jsonplaceholder.typicode.com/posts/1',
  console.log
); 

// Logs: {"userId": 1, "id": 1, "title": "sample title", "body": "my text"}

20. Làm thế nào để tạo 1 yêu cầu ‘POST’ tới URL đã thông qua?

const httpPost = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send(data);
};

const newPost = {
  userId: 1,
  id: 1337,
  title: 'Foo',
  body: 'bar bar bar'
};
const data = JSON.stringify(newPost);
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  data,
  console.log
); 

// Logs: {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"}

21. Cách để tạo ra 1 counter với phạm vi, bước và độ dài nhất định cho selector được chỉ định?

const counter = (selector, start, end, step = 1, duration = 2000) => {
  let current = start,
    _step = (end - start) * step < 0 ? -step : step,
    timer = setInterval(() => {
      current += _step;
      document.querySelector(selector).innerHTML = current;
      if (current >= end) document.querySelector(selector).innerHTML = end;
      if (current >= end) clearInterval(timer);
    }, Math.abs(Math.floor(duration / (end - start))));
  return timer;
};

// Example
counter('#my-id', 1, 1000, 5, 2000); // Creates a 2-second timer for the element with id="my-id"

22. Làm thế nào để copy 1 string tới clipboard?

const listener = (e: ClipboardEvent) => {
  e.clipboardData.setData('text/plain', text);
  e.preventDefault();
};

document.addEventListener('copy', listener);
document.execCommand('copy');
document.removeEventListener('copy', listener);

23. Cách để nhận biết nếu tab trình duyệt của trang được focus?

const isBrowserTabFocused = () => !document.hidden;

// Example
isBrowserTabFocused(); // true

24. Làm thế nào để tạo 1 danh mục, nếu nó không tồn tại?

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);

// Example
createDirIfNotExists('test'); // creates the directory 'test', if it doesn't exis

Nguồn: topdev.vn/blog/