18 продвинутых навыков JavaScript для старших инженеров-программистов
Браузер
Переход на полноэкранный режим
Чтобы перейти к полноэкранному режиму:
function fullScreen() {
const el = document.documentElement
const rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullscreen
if(typeof rfs != "undefined" && rfs) {
rfs.call(el)
}
}
fullScreen()
Выход из полноэкранного режима
Чтобы выйти из полноэкранного режима:
function exitScreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
}
else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
if(typeof cfs != "undefined" && cfs) {
cfs.call(el)
}
}
exitScreen()
Вывод страницы
Чтобы вывести текущую страницу:
window.print()
Изменение стиля выводимого контента
Чтобы при выводе страницы изменить текущий макет:
<style>
/* Используйте @media print, чтобы настроить стиль вывода */
@media print {
.noprint {
display: none;
}
}
</style>
<div class="print">print</div>
<div class="noprint">noprint</div>
Блокировка события закрытия
Чтобы оградить пользователя от обновления или закрытия браузера, запустите событие beforeunload (некоторые браузеры не кастомизируют текстовой контент):
window.onbeforeunload = function(){
return 'Are you sure you want to leave the haorooms blog？';
};
Запись экрана
Чтобы сделать запись текущего экрана для ее передачи или загрузки:
const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
var recordedChunks = [];// записанные видеоданные
var options = { mimeType: "video/webm; codecs=vp9" };// Установите формат кодирования
var mediaRecorder = new MediaRecorder(stream, options);// Инициализируйте экземпляр MediaRecorder
mediaRecorder.ondataavailable = handleDataAvailable;// Установите обратный вызов, когда данные будут доступны (конец записи экрана)
mediaRecorder.start();
// Фрагментация видео
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);// Добавление данных, event.data - объект BLOB
download();// Инкапсуляция в объект BLOB и загрузка
}
}
// Загрузка файла
function download() {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
// Видео можно загрузить здесь в бэкенд
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm";
a.click();
window.URL.revokeObjectURL(url);
}
})
Определение состояния горизонтального и вертикального экранов
Чтобы оценить состояние горизонтального или вертикального экрана мобильного телефона:
function hengshuping(){
if(window.orientation==180||window.orientation==0){
alert("Portrait state！")
}
if(window.orientation==90||window.orientation==-90){
alert("Landscape state！")
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
Различение стилей для горизонтального и вертикального экранов
Чтобы установить разные стили для горизонтального и вертикального экранов:
<style>
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait) {
body {
background-color: #00ff00;
}
}
</style>
Скрытие страницы вкладок
Чтобы отслеживать события отображения и скрытия вкладок:
const {hidden, visibilityChange} = (() => {
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
// Поддержка версий Opera 12.10, Firefox 18 и выше
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
return {
hidden,
visibilityChange
}
})();
const handleVisibilityChange = () => {
console.log("currently hidden", document[hidden]);
};
document.addEventListener(
visibilityChange,
handleVisibilityChange,
false
);
Изображение
Предварительный просмотр локального изображения
Чтобы перед загрузкой на сервер просмотреть полученное от клиента изображение:
<div class="test">
<input type="file" name="" id="">
<img src="" alt="">
</div>
<script>
const getObjectURL = (file) => {
let url = null;
if (window.createObjectURL != undefined) { // базовый
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // webkit или chrome
url = window.URL.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
}
return url;
}
document.querySelector('input').addEventListener('change', (event) => {
document.querySelector('img').src = getObjectURL(event.target.files[0])
})
</script>
Предварительная загрузка изображений
Чтобы предварительно загрузить большое количество изображений и избежать белого экрана:
const images = []
function preloader(args) {
for (let i = 0, len = args.length; i < len; i++) {
images[i] = new Image()
images[i].src = args[i]
}
}
preloader(['1.png', '2.jpg'])
JS
Создание строковых скриптов
Чтобы преобразовать строку/строки в js-скрипт (этот метод отличается xss-уязвимостью, поэтому требует осмотрительности):
const obj = eval('({ name: "jack" })')
// obj будет преобразован в object{ name: "jack" }
const v = eval('obj')
// v станет переменной obj
Разделение имен рекурсивной функции
Чтобы после изменения имени рекурсивной функции изменить внутреннее имя функции (argument — это внутренний объект функции, включающий все параметры, переданные в функцию, а arguments.callee представляет имя функции):
// Это базовая последовательность Фибоначчи
function fibonacci (n) {
const fn = arguments.callee
if (n <= 1) return 1
return fn(n - 1) + fn(n - 2)
}
DOM-элементы
Проверка неявно определенного элемента
Чтобы определить, появляется ли DOM-элемент в данный момент в представлении страницы, используйте IntersectionObserver:
<style>
.item {
height: 350px;
}
</style>
<div class="container">
<div class="item" data-id="1">Invisible</div>
<div class="item" data-id="2">Invisible</div>
<div class="item" data-id="3">Invisible</div>
</div>
<script>
if (window?.IntersectionObserver) {
let items = [...document.getElementsByClassName("item")]; // парсится как настоящий массив, также доступно Array.prototype.slice.call()
let io = new IntersectionObserver(
(entries) => {
entries.forEach((item) => {
item.target.innerHTML =
item.intersectionRatio === 1 // Коэффициент отображения элемента, когда он равен 1, элемент полностью виден, а когда он равен 0, то совершенно невидим.
? `Element is fully visible`
: `Element is partially invisible`;
});
},
{
root: null,
rootMargin: "0px 0px",
threshold: 1, // Порог устанавливается равным 1, и функция обратного вызова срабатывает, только когда отношение достигает 1
);
items.forEach((item) => io.observe(item));
}
</script>
Редактирование DOM-элемента
Чтобы отредактировать DOM-элемент, кликните на него, как на текстовую область:
<div contenteditable="true">here can be edited</div>
Мониторинг атрибутов элементов
<div id="test">test</div>
<button onclick="handleClick()">OK</button>
<script>
const el = document.getElementById("test");
let n = 1;
const observe = new MutationObserver((mutations) => {
console.log("attribute is changede", mutations);
})
observe.observe(el, {
attributes: true
});
function handleClick() {
el.setAttribute("style", "color: red");
el.setAttribute("data-name", n++);
}
setTimeout(() => {
observe.disconnect(); // наблюдение прекращается
}, 5000);
</script>
Вывод DOM-элемента
Чтобы в процессе разработки вывести DOM-элемент с внутренними атрибутами, используйте console.dir (console.log часто выводит DOM-элемент, но не позволяет просмотреть его внутренние атрибуты):
console.dir(document.body)
Прочее
Активирование приложений
Чтобы при разработке мобильного приложения открывать другие приложения, используйте следующие методы присвоения location.href:
<a href="tel:12345678910">phone</a> <a href="sms:12345678910,12345678911?body=hello">android message</a> <a href="sms:/open?addresses=12345678910,12345678911&body=hello">ios message</a> <a href="wx://">ios message</a>