Вот взгляните на некоторые из моей собственной коллекции кодов черных технологий, все из которых я видел или использовал в своей обычной работе (мо) работе (ю) (вообще не использовал), а затем собрал (некоторые из Наггетсов), но Статью найти не могу.Если автор ее увидит,скажите,удалю или вставлю ссылку на исходный текст),тогда будет некрасиво.
Ссылки на некоторые технические справочники
- 33 очень практичных однострочных кода на JavaScript, рекомендуется собрать
- Благодаря этим 25 регулярным выражениям эффективность кода увеличивается на 80%.
- Краткое описание технологии черного интерфейса (время от времени обновляется)
Некоторые справочные сайты
- маньяк программирования(Возможно, потребуется зарегистрировать аккаунт)
1. Получить положение прокрутки текущей страницы
const getScrollPosition = (el = window) => ({
x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
})
getScrollPosition(); // {x: 0, y: 200}
2. Плавная прокрутка вверх страницы
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop
if (c > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, c - c / 8)
}
}
scrollToTop()
3. Определите, является ли устройство мобильным устройством или настольным компьютером/ноутбуком.
const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
.test(navigator.userAgent) ?
'Mobile' : 'Desktop'
detectDeviceType() // "Mobile" or "Desktop"
4. Уведомления на рабочем столе с картинками и событиями
function doNotify(title, options = {}, events = {}) {
const notification = new Notification(title, options)
for (let event in events) {
notification[event] = events[event]
}
}
function notify(title, options = {}, events = {}) {
if (!('Notification' in window)) {
return console.error('This browser does not support desktop notification')
} else if (Notification.permission === 'granted') {
doNotify(title, options, events)
} else if (Notification.permission !== 'denied') {
Notification.requestPermission().then(function (permission) {
if (permission === 'granted') {
doNotify(title, options, events)
}
})
}
}
notify(
'中奖提示',
{
icon: 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image',
body: '恭喜你，掘金签到一等奖',
tag: 'prize'
},
{
onclick(ev) {
console.log(ev)
ev.target.close()
window.focus()
}
}
)
5. Массив в дерево
function treeDataTranslate(data, id = 'id', pid = 'pId') {
var res = []
var temp = {}
for (var i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
for (var k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'] = []
}
temp[data[k][pid]]['children'].push(data[k])
} else {
res.push(data[k])
}
}
return res
}
6. Отключить открытие консоли в браузере
setInterval(function () {
check()
}, 4000)
var check = function () {
function doCheck(a) {
if (('' + a / a)['length'] !== 1 || a % 20 === 0) {
;(function () {}['constructor']('debugger')())
} else {
;(function () {}['constructor']('debugger')())
}
doCheck(++a)
}
try {
doCheck(0)
} catch (err) {}
}
check()
7. Каррирование функций
function add() {
let args = [...arguments]
function _add() {
args.push(...arguments)
return _add
}
_add.toString = function () {
return args.reduce((pre, cur) => {
return pre + cur
})
}
return _add
}
console.log(add(1, 2)(3, 4)(5)(6)()().toString())
8. toFullScreen: полный экран
function toFullScreen() {
let elem = document.body
elem.webkitRequestFullScreen
? elem.webkitRequestFullScreen()
: elem.mozRequestFullScreen
? elem.mozRequestFullScreen()
: elem.msRequestFullscreen
? elem.msRequestFullscreen()
: elem.requestFullScreen
? elem.requestFullScreen()
: alert('浏览器不支持全屏')
}
9. exitFullscreen: выход из полноэкранного режима
function exitFullscreen() {
let elem = parent.document
elem.webkitCancelFullScreen
? elem.webkitCancelFullScreen()
: elem.mozCancelFullScreen
? elem.mozCancelFullScreen()
: elem.cancelFullScreen
? elem.cancelFullScreen()
: elem.msExitFullscreen
? elem.msExitFullscreen()
: elem.exitFullscreen
? elem.exitFullscreen()
: alert('切换失败,可尝试Esc退出')
}
10. Запретить правый клик, выделение, копирование
;['contextmenu', 'selectstart', 'copy'].forEach(function (ev) {
document.addEventListener(ev, function (event) {
return (event.returnValue = false)
})
})
11. Сделайте первую букву заглавной
let firstUpperCase = ([first, ...rest]) => first?.toUpperCase() + rest.join('')
12. Проверка типа данных
function typeOf(obj) {
const toString = Object.prototype.toString
const map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object',
'[object FormData]': 'formData',
'[object Symbol]': 'symbol',
'[object BigInt]': 'bigint'
}
return map[toString.call(obj)]
}
13. Скопируйте текст
copyPersonURL(content) {
let that = this
if (window.ClipboardData) {
window.clipboardData.setData('text', content)
} else {
;(function (content) {
document.oncopy = function (e) {
e.clipboardData.setData('text', content)
e.preventDefault()
document.oncopy = null
}
})(content)
document.execCommand('Copy')
}
}
14. docx файл в html
Некоторые стили не могут быть реализованы, поэтому лучше реализовать серверную часть. Серверная часть относительно зрелая. Здесь мы используем vue для демонстрации
Нужно установить плагинmammoth
npm install mammoth --save
<input type="file" name="file" @change="changeFile" />
<div id="wordView" v-html="wordText" />
import mammoth from "mammoth"
//选择本地文件预览
changeFile(event) {
// if(event.target.files[0].name.indexOf('docx')>-1){
let that = this;
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = function (loadEvent) {
let arrayBuffer = loadEvent.target.result; //arrayBuffer
mammoth
.convertToHtml({ arrayBuffer: arrayBuffer })
// .convertToMarkdown({ arrayBuffer: arrayBuffer })
.then(that.displayResult)
.done();
};
reader.readAsArrayBuffer(file);
// }
},
//页面渲染
displayResult(result) {
console.log(result.value)
this.wordText = result.value;
}
15. Убедитесь, что '()' появляется парами
[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// 输出0则是
16. Определите, активирована ли текущая вкладка
const isTabInView = () => !document.hidden
17. Откройте окно печати браузера
const showPrintDialog = () => window.print()
18.html в изображение
Нужно установить плагинdom-to-image
npm install dom-to-image
import domtoimage from 'dom-to-image';
downLoadPhoto () {
const node = document.getElementById('table')//对应的html标签id
domtoimage.toPng(node)
.then((dataUrl) => {
const img = new Image()
img.src = dataUrl
// 将获取到的base64下载下来
const imgUrl = img.src
if (window.navigator.msSaveOrOpenBlob) {
const bstr = atob(imgUrl.split(',')[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
const blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement('a')
a.href = imgUrl
a.setAttribute('download', 'chart-download')
a.click()
}
})
}
19. Строка в базу и base64 в строку
// 加密
function base64EncodeUnicode(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
// 解密
function base64DecodeUnicode(str) {
return decodeURIComponent(atob(str).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
Прочитав, думаю, что это слишком чушь, пожалуйста, тапните, может, я сам сравниваю посуду, поэтому думаю, что это черные технологии.