转载来源:新人必看的短小而精悍的javascript function

1.回到顶部,优点使用浏览器刷新频率的requestAnimationFrame,很顺滑

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

2.smoothScroll(平滑滚动)

const smoothScroll = element =>
document.querySelector(element).scrollIntoView({
behavior: 'smooth'
});

3.CopyToClipboard(复制到黏贴版)

const copyToClipboard = str => {
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('我最帅'); // '我最帅' copied to clipboard.

4.HH:MM:SS 时间格式的快速获取

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // "08:38:00"

5.compose(中间件,redux源码里就使用该函数)right-to-left依次执行函数

const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
const add5 = x => x + 5;
const multiply = (x, y) => x * y;
const multiplyAndAdd5 = compose(add5, multiply);
multiplyAndAdd5(5, 2); //

6.debounce(比较常见)

const debounce = (fn, ms = 0) => {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
};
window.addEventListener(
'resize',
debounce(() => {
console.log(window.innerWidth);
console.log(window.innerHeight);
}, 250)
); // Will log the window dimensions at most every 250ms

7.equals 深度对比相等

const equals = (a, b) => {
if (a === b) return true;
if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
if (!a || !b || (typeof a != 'object' && typeof b !== 'object')) return a === b;
if (a === null || a === undefined || b === null || b === undefined) return false;
if (a.prototype !== b.prototype) return false;
let keys = Object.keys(a);
if (keys.length !== Object.keys(b).length) return false;
return keys.every(k => equals(a[k], b[k]));
};
equals({ a: [2, { e: 3 }], b: [4], c: 'foo' }, { a: [2, { e: 3 }], b: [4], c: 'foo' }); // true

8.escapeHTML

const escapeHTML = str =>
str.replace(
/[&<>'"]/g,
tag =>
({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
"'": ''',
'"': '&quot;'
}[tag] || tag)
);
escapeHTML('<a href="#">Me & you</a>'); // '&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;'

9.getURLParameters

const getURLParameters = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
{}
);
getURLParameters('http://url.com/page?name=Adam&surname=Smith'); // {name: 'Adam', surname: 'Smith'}
getURLParameters('google.com'); // {}

10.promisify

const promisify = func => (...args) =>
new Promise((resolve, reject) =>
func(...args, (err, result) => (err ? reject(err) : resolve(result)))
);
const delay = promisify((d, cb) => setTimeout(cb, d));
delay(2000).then(() => console.log('Hi!')); // // Promise resolves after 2s

作者:wuliDream
链接:https://juejin.im/post/5ab8fa12518825188038ef6a
来源:掘金

一些有趣的使用function的更多相关文章

  1. 小红书第五章——引用类型之function类型

    有趣的函数——function类型 函数实际上是对象,每个函数都是function类型的实例,具有属性和方法. 1.函数的定义方法 1)函数声明语法 function sum(num1,num2){/ ...

  2. JS function 是函数也是对象, 浅谈原型链

    JS function 是函数也是对象, 浅谈原型链 JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解 1. 前言 new 出来的实例有 _proto_ 属性, 并 ...

  3. javascript 函数声明和函数表达式的区别(学习笔记)

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函 ...

  4. javascript数据结构和算法[转]

    字符串表示的数组 join() 和 toString() 函数返回数组的字符串表示.这两个函数通过将数组中的元素用逗号分隔符分割,返回字符串数组表示. 这里有个例子: var names = [&qu ...

  5. 从Chrome源码看JS Array的实现

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...

  6. js压箱底的宝贝

    框架的确好用, 不过他们也隐藏了JavaScript中丑陋的细节和DOM的运作机制. 如果你的目标是敢于自称"我懂JavaScript", 那么花时间学习框架无异于南辕北辙. 下面 ...

  7. JS调用模式

    在js中,一共4中调用方式.需要注意的是,调用方式中,this的指向问题. 函数调用模式 this丢失,debug会提示未定义相应属性.按照规范,需要将this赋值给that let myObj = ...

  8. js 闭包 弊端

    闭包有许多有趣的用途,Javascript的两个特征使它这么有趣:1. function是一个对象,它跟数组,Object一样,地位平等.2. Javascript变量作用域范围.<Javasc ...

  9. 明白JavaScript原型链和JavaScrip继承

    原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...

随机推荐

  1. SLF4J和log4j的使用

    概念 SLF4J:即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统.按照官方的说法,SLF4J是一个用于日志系统的简 ...

  2. Linux服务器---apache配置文件

    Apache配置文件 Apache的配置文件默认路径是“/etc/httpd/conf/httpd.conf”,编辑该文件就可以修改Apache的配置 1.设置网页主目录,参数DocumentRoot ...

  3. Nginx启动SSL功能

    Nginx启动SSL功能,并进行功能优化,你看这个就足够了 一:开始Nginx的SSL模块 1.1 Nginx如果未开启SSL模块,配置Https时提示错误 nginx: [emerg] the &q ...

  4. 短网址(short URL)系统的原理及其实现

    短网址(short URL)系统的原理及其实现 https://hufangyun.com/2017/short-url/?hmsr=toutiao.io&utm_medium=toutiao ...

  5. django multidb --- router

    之前一篇随笔, 提到了django中怎么使用多数据库, 但是在实际工程中遇到了一个问题,就是admin指定了使用某库, 在测试环境上没问题, 当部署后(库也变动了位置), 修改一个admin的mode ...

  6. C++面向对象高级开发课程(第二周)

    1. 类中含有指针—— class with pointer member(s) ——的情况经常发生,典型的有:string 类. 2. STL中的 string 类太复杂,copy on write ...

  7. 微信小程序——1、文件的认识

    主体文件的构成 微信小程序的主体由三个部分组成,需放在主目录中,名称也是固定的 app.js:微信小程序的主逻辑文件,主要用来注册小程序 app.json:微信小程序的主配置文件,对微信小程序进行全局 ...

  8. linux内核分析 1、2章读书笔记

    一.linux历史 20世纪60年代,MIT开发分时操作系统(Compatible TIme-Sharing System),支持30台终端访问主机: 1965年,Bell实验室.MIT.GE(通用电 ...

  9. 面向对象初调用:foolish 电梯

    本周我们完成的任务是傻瓜电梯的调度,对于那十分十分详细的指导书,我感觉想要说明白题目要求,是做不到的,所以就把指导书贴出来给大家看了,,由于在下还不会网页制作,只能通过百度网盘了,https://pa ...

  10. FSMC(STM32)

    (一)FSMC:Flexible Static Memory Controller,可变(灵活)静态存储控制器 小容量产品是指闪存存储器容量在1 6K至32K 字节之间的STM32F101xx.STM ...