华山资源网

24个ES6方法解决JS实际开发问题(小结)
网络编程 2024/11/18 佚名
3 1

本文主要介绍 24 中 es6 方法，这些方法都挺实用的，本本请记好，时不时翻出来看看。

1、如何隐藏所有指定的元素：

const hide = (el) => Array.from(el).forEach(e => (e.style.display = 'none'));

// 事例:隐藏页面上所有`<img>`元素"htmlcode">



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

// 事例
hasClass(document.querySelector('p.special'), 'special') // true







3.如何切换一个元素的类 ？







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

// 事例 移除 p 具有类`special`的 special 类
toggleClass(document.querySelector('p.special'), 'special')







4.如何获取当前页面的滚动位置？







const getScrollPosition = (el = window) => ({
 x: el.pageXOffset !== undefined "htmlcode">



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

// 事例
scrollToTop()






window.requestAnimationFrame()  告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。




requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。


6如何检查父元素是否包含子元素 ？







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

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





7.如何检查指定的元素在视口中是否可见 ？







const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
 const { top, left, bottom, right } = el.getBoundingClientRect();
 const { innerHeight, innerWidth } = window;
 return partiallyVisible
  "htmlcode">



 const getImages = (el, includeDuplicates = false) => {
 const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'));
 return includeDuplicates "htmlcode">



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







10.How to get the current URL "htmlcode">



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

// 事例
currentURL() // 'https://google.com'







11.如何创建一个包含当前URL参数的对象 ？







const getURLParameters = url =>
 (url.match(/([^"htmlcode">



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

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







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、CustoEvent 和 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 "htmlcode">



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 "htmlcode">



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 "htmlcode">



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

// 事例
isBrowserTabFocused(); // true





24. 如何创建目录 (如果不存在) ？







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

// 事例
createDirIfNotExists('test'); 





这里面的方法都挺实用的,可以解决很多开发过程问题,大家就好好利用起来吧 ！


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.eoogi.com
                                            
                                                华山资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            120,135影音资源
                                        

                                        

                                            344,641技术资源
                                        

                                        

                                            22,817软件资源
                                        

                                        

                                            435,032站长资源
                                        

                                    

                                

                            

                            
                            
                        

                    

                

            

            
            

                

                    

                        

                            
更新日志

                        

                        

                            
                        

                    

                

            

            

                

                    友情链接 

                

                    

                        杰晶网络
                        DDR爱好者之家
                        桃源资源网
                        杰网资源
                        富贵资源网
                        南强小屋
                        铁雪资源网
                        幽灵资源网
                        万梅资源网
                        狼山资源网
                        白云岛资源网
                        昆仑资源网
                        相思资源网
                        明霞山资源网
                        内蒙古资源网
                        黑松山资源网
                        茶园资源网
                        饿虎岗资源网
                        大旗谷资源网
                        常春岛资源网
                        岱庙资源网
                        兴国资源网
                        快活林资源网
                        蝙蝠岛资源网
                        帝王谷资源网
                        白云城资源网
                        伏龙阁资源网
                        清风细雨楼
                        天枫庄资源网
                        圆月山庄资源网
                        无争山庄资源网
                        神水资源网
                        移花宫资源网
                        神剑山庄资源网
                        无为清净楼资源网
                        金钱帮资源网
                        丐帮资源网
                        华山资源网
                        极乐门资源网
                        小李飞刀资源网
                        凤求凰客栈
                        风云阁资源网
                        金狮镖局
                        鸳鸯亭资源网
                        千金楼资源网
                        更多链接
                    

                

            

            
华山资源网 Design By www.eoogi.com