13.如何从对象检索给定选择器指示的一组属性?
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.如何在等待指定时间后调用提供的函数?
const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args); delay( function(text) { console.log(text); }, 1000, 'later' ); // 1秒后打印 'later'
15.如何在给定元素上触发特定事件且能选择地传递自定义数据?
const triggerEvent = (el, eventType, detail) => el.dispatchEvent(new CustomEvent(eventType, { detail })); // 事例 triggerEvent(document.getElementById('myId'), 'click'); triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });
自定义事件的函数有 Event
、CustomEvent
和 dispatchEvent
// 向 window派发一个resize内置事件 window.dispatchEvent(new Event('resize')) // 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); var elem = document.querySelector('#id') // 监听事件 elem.addEventListener('build', function (e) { ... }, false); // 触发事件. elem.dispatchEvent(event);
CustomEvent
可以创建一个更高度自定义事件,还可以附带一些数据,具体用法如下:
var myEvent = new CustomEvent(eventname, options); 其中 options 可以是: { detail: { ... }, bubbles: true, //是否冒泡 cancelable: false //是否取消默认事件 }
其中 detail
可以存放一些初始化的信息,可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。
内置的事件会由浏览器根据某些操作进行触发,自定义的事件就需要人工触发。 dispatchEvent
函数就是用来触发某个事件:
element.dispatchEvent(customEvent);
上面代码表示,在 element
上面触发 customEvent
这个事件。
// add an appropriate event listener obj.addEventListener("cat", function(e) { process(e.detail) }); // create and dispatch the event var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}); obj.dispatchEvent(event); 使用自定义事件需要注意兼容性问题,而使用 jQuery 就简单多了: // 绑定自定义事件 $(element).on('myCustomEvent', function(){}); // 触发事件 $(element).trigger('myCustomEvent'); // 此外,你还可以在触发自定义事件时传递更多参数信息: $( "p" ).on( "myCustomEvent", function( event, myName ) { $( this ).text( myName + ", hi there!" ); }); $( "button" ).click(function () { $( "p" ).trigger( "myCustomEvent", [ "John" ] ); });
16.如何从元素中移除事件监听器?
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);
17.如何获得给定毫秒数的可读格式?
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(', '); }; // 事例 formatDuration(1001); // '1 second, 1 millisecond' formatDuration(34325055574); // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'
18.如何获得两个日期之间的差异(以天为单位)?
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); // 事例 getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
19.如何向传递的URL发出GET请求?
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 ); // {"userId": 1, "id": 1, "title": "sample title", "body": "my text"}
20.如何对传递的URL发出POST请求?
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 ); // {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"}
21.如何为指定选择器创建具有指定范围,步长和持续时间的计数器?
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; }; // 事例 counter('#my-id', 1, 1000, 5, 2000); // 让 `id=“my-id”`的元素创建一个2秒计时器
22.如何将字符串复制到剪贴板?
const el = document.createElement('textarea'); el.value = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand('copy'); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }; // 事例 copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard
23.如何确定页面的浏览器选项卡是否聚焦?
const isBrowserTabFocused = () => !document.hidden; // 事例 isBrowserTabFocused(); // true
24.如何创建目录(如果不存在)?
const fs = require('fs'); const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined); // 事例 createDirIfNotExists('test');
这里面的方法大都挺实用,可以解决很多开发过程问题,大家就好好利用起来吧。