一、惰性载入函数(lazy function)

使用场景:当一个函数中的判断分支只用执行一次(第一次调用时执行),后续不会再变化,则可以使用惰性函数来提高性能。

var addEvent = function(elem, type, handler) {
if (window.addEventListener) {
elem.addEventListener(type, handler, false);
}
else if (window.attachEvent) {
elem.attachEvent('on' + type, handler);
}
};

上面的函数是一个事件监听函数,每次调用时都会判断使用标准的事件监听函数还是IE事件监听函数,其实只用判断一次就可以知道该使用哪种监听函数,改为惰性函数的代码如下:

var addEvent=function(elem, type, handler){
if (window.addEventListener) {
addEvent=function(elem, type, handler){
elem.addEventListener(type, handler, false);
}
}
else if (window.attachEvent) {
addEvent=function(elem, type, handler){
elem.attachEvent(type, handler, false);
}
}
//当addEvent函数第一次被外部调用时,会被覆盖为另外的函数,但覆盖后的函数体的代码不会执行,因此需要执行一次
addEvent(elem,type,handler);
}

另一种方法是声明后立即给出合适的函数

var addEvent2=(function(elem, type, handler){
if (window.addEventListener) {
return function(elem, type, handler){
elem.addEventListener(type, handler, false);
}
}
else if (window.attachEvent) {
return function(elem, type, handler){
elem.attachEvent(type, handler, false);
}
}
})(document.body,'click',function(){
console.log('单击了');
})
console.log(addEvent2)

二、一次性函数(once function)

即只会执行一次的函数,核心思想是执行某个函数一次后将函数覆盖为null。

       //一次执行函数的工厂
function once(fn,context){
var result;
return ()=>{
if(typeof(fn)==='function'){
result=fn.apply(context||this,arguments);
fn=null;
}
return result;
}
}
var canOnlyFireOnce=once(()=>{
console.log('测量屏幕宽度');
return {deviceWidth:'375px',deviceHeight:'480px'}
})
var deviceInfo=canOnlyFireOnce(); //输出“测量屏幕宽度”
var deviceInfo2=canOnlyFireOnce(); //不会输出任何东西
console.log(deviceInfo2);

三、记忆函数

核心思想:让一个函数记住处理过的参数,并可以根据相应的参数把结果缓存起来,避免重复计算。

实现方式:

1.使用闭包

      function memoryFunction(fn){
var cacheArgs,cacheReturn;
return function(a){
if(a===cacheArgs){
return cacheReturn;
}
cacheArgs=a;
cacheReturn=fn.call(null,a);
return cacheReturn;
}
}
var demo=memoryFunction((a)=>a*1000);
var b=demo(1), c=demo(1);
console.log(b,c)

上面代码中,第二次调用demo函数时,直接返回值,不会再次计算

2.函数也是一个对象,因此可以动态的给函数增加静态的属来记录缓存键和结果

       function isPrime(value) { 
if (!isPrime.answers) { 
isPrime.answers = {}; 
}
//创建缓存 
if (isPrime.answers[value] !== undefined) {  
return isPrime.answers[value]; 
}
//检查缓存键
var prime = value !== 0 && value !== 1; // 1 is not a prime  
for (var i = 2; i < value; i++) {  
if (value % i === 0) {    
prime = false;    
break;  
}
} 
//缓存计算的结果
return isPrime.answers[value] = prime;
}

  

四、纯函数(pure function)

所谓纯函数就是一个函数返回的结果只依赖于其参数,并且在执行过程中没有副作用,这样的函数就叫纯函数。

条件1:返回结果直依赖参数

const a = 1
const foo = (b) => a + b
foo(2) // => 3

上面的代码中,foo函数的返回值依赖了外部的a变理,因此不是纯函数

const a = 1
const foo = (x, b) => x + b
foo(1, 2) // => 3

 上面的代码中,foo函数的返回值只跟其参数有关且没有副作用,因此是纯函数

条件2:执行过程没有副作用

什么是副作用?所谓副作用就是指函数执行过程中对外产生了可观察的变化。看例子

const a = 1
const counter = { x: 1 }
const foo = (obj, b) => {
obj.x = 2
return obj.x + b
}
foo(counter, 2) // => 4
counter.x // => 2

上面代码中foo 的结果只跟传入参数有关,但在内部加了一句 obj.x = 2,计算前 counter.x 是 1,但是计算以后 counter.x 是 2。foo 函数的执行对外部的 counter 产生了影响,修改了外部传进来的对象,也就是产生了副作用,因此不是纯函数。

const a = 1
const counter = { x: 1 }
const foo = (obj, b) => {
return obj.x + b
}
foo(counter, 2) // => 3
counter.x // => 1

上面代码中foo的结果只跟传入的参数有关,且计算的过程里面并不会对传入的对象进行修改,计算前后的 counter 不会发生任何变化,计算前是 1,计算后也是 1,它现在是纯的。

下面的代码也是纯函数,因为对象是在函数内定义的,对外部不可见。

const foo = (b) => {
const obj = { x: 1 }
obj.x = 2
return obj.x + b
}

五、高阶函数(high order functions)

所谓高阶函数是这样一种函数:即可以把函数作为参数传递,或者返回的值是一个函数。

比如Array.Map,Array.Sort,还有我们上面写的一次性执行函数演示代码都是高阶函数。

六、组合函数(compose function)

 作用:将需要嵌套执行的函数平铺。嵌套执行指的是,一个函数的返回值将作为另一个函数的参数。

function C(){
console.log('C')
return function(){
console.log('C函数回调执行')
}
}
function B(CM){
console.log('B')
return function(){
console.log('B函数回调执行')
CM()
}
}
function A(BM){
console.log('A')
return function(){
console.log('A函数回调执行')
BM()
}
}
A(B(C()))()

改为compose方式后调用如下;

compose(A,B,C)()

compose函数的实现:

function compose(...funcs) {
//没有传入函数参数,就返回一个默认函数(直接返回参数)
if (funcs.length === 0) {
return arg => arg
} if (funcs.length === 1) {
// 单元素数组时调用reduce,会直接返回该元素,不会执行callback;所以这里手动执行
return funcs[0]
}
// 依次拼凑执行函数
return funcs.reduce((prev, current) => (...args) => prev(current(...args)))
}

举例分析:compose(f4,f3,f2,f1)()

  • reduce回调函数第一次执行时,返回值为 函数 (...args) => f4(f3(...args)),作为下一次执行的prev参数
  • 回调函数第二次执行时,返回值为 函数(...args) => f4(f3(f2(...args))),作为下一次执行的prev参数
  • 回调函数第三次执行时,返回值为 函数(...args) => f4(f3(f2(f1(...args))))

七、函数柯里化(function currying)

把一个接收多个参数的函数分解成逐层调用的函数,每一层接收一部分参数,余下的参数由下一层再进行分解。

假如有如下函数:

       function add(a,b,c,d,e){
return a+b+c+d+e;
}
console.log(add(1,2,3,4,5)); //15

现在要求每一步调用最多只能传2个参数,改写为柯里化版本如下:

       function curryAdd(a,b){
return (c,d)=>{
return (e)=>{
return a+b+c+d+e;
}
}
}
console.log(curryAdd(1,2)(3,4)(5)); //15

看似把简单问题进行了复杂化,那么柯里化函数有什么作用呢?最大的用处就是可以固定不可变参数和可变参数,消除重复参数

function ajax(url,type,data){
// ...
}
ajax('www.my.com','GET')
ajax('www.my.com','POST')
//采化柯里化固定重复参数
let newAjax=curryAjax('www.my.com')
//只需要传入可变参数即可
newAjax('GET')
newAjax('POST')

  

八、防抖函数(debouncing)

核心思想:对同一个函数进行连续调用时,只有最后次调用生效,

实现方式:使用setTimeout方法,每次调用时,清除上一次的timer,并将本次的timer记录下来就可以保证只有最后一次调用会生效

function debounce(method,time){
var timer = null ;
return function(){
var context = this;
//在函数执行的时候先清除timer定时器;
if(timer)clearTimeout(timer);
timer = setTimeout(function(){
method.call(context);
},time);
}
}

  

九、节流函数(throttling)

核心思想:对同一个函数进行连续调用时,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用

实现方式:使用setTimeout方法,给定两个时间,后面的时间减去前面的时间,到达我们给定的时间就去触发一次这个事件

 function throttle(method,time){
var timer = null;
var startTime = new Date();
return function(){
var context = this;
var endTime = new Date();
var resTime = endTime - startTime;
//判断大于等于我们给的时间采取执行函数;
if(resTime >= time){
method.call(context);
//执行完函数之后重置初始时间,等于最后一次触发的时间
startTime = endTime;
}
}
}

  

js函数相关高级用法的更多相关文章

  1. JS Replace() 高级用法(转)

    在很多项目中,我们经常需要使用JS,在页面前面对前台的某些元素做做修改,js 的replace()方法就必不可少. 经常使用"ABCABCabc".replace("A& ...

  2. 再谈Newtonsoft.Json高级用法

    上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...

  3. 细说 ASP.NET Cache 及其高级用法

    许多做过程序性能优化的人,或者关注过程程序性能的人,应该都使用过各类缓存技术. 而我今天所说的Cache是专指ASP.NET的Cache,我们可以使用HttpRuntime.Cache访问到的那个Ca ...

  4. 细说 ASP.NET Cache 及其高级用法【转】

    阅读目录 开始 Cache的基本用途 Cache的定义 Cache常见用法 Cache类的特点 缓存项的过期时间 缓存项的依赖关系 - 依赖其它缓存项 缓存项的依赖关系 - 文件依赖 缓存项的移除优先 ...

  5. Python爬虫入门之Urllib库的高级用法

    1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览 ...

  6. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  7. Python爬虫Urllib库的高级用法

    Python爬虫Urllib库的高级用法 设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Head ...

  8. [转]细说 ASP.NET Cache 及其高级用法

    本文转自:http://www.cnblogs.com/fish-li/archive/2011/12/27/2304063.html 阅读目录 开始 Cache的基本用途 Cache的定义 Cach ...

  9. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

随机推荐

  1. 【[USACO08NOV]奶牛混合起来Mixed Up Cows】

    首先我们能够一眼看到4 <= N <= 16,那么就是它了,我们要压缩的状态就是它了 那么之后能我们用这个状态表示什么呢,我们要表示的显然是每只奶牛是否在队伍中 比如说10吧,转成二进制后 ...

  2. 2018 Multi-University Training Contest 1 Distinct Values 【贪心 + set】

    任意门:http://acm.hdu.edu.cn/showproblem.php?pid=6301 Distinct Values Time Limit: 4000/2000 MS (Java/Ot ...

  3. vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

    vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...

  4. Eclipse安装Sonarlint插件

    这里安装的是Sonarlint3.6.插件安装非常简单.插件比Sonar更为简单快捷. 一.首先通过点击Eclipse上方Help菜单会出现一个下拉列表,点击其中的Eclipse MarketPlac ...

  5. CVPR 2016 paper reading (2)

    1. Sketch me that shoe, Qian Yu, Feng Liu, Yi-Zhe Song, Tao Xiang, Timothy M. Hospedales, Cheng Chan ...

  6. 面试准备——(三)Selenium面试题总结

    一.Selenium基本知识 1. 什么是Selenium? Selenium是浏览器自动化工具,主要用来Web的自动化测试,以及基于Web的任务管理自动化.它支持的语言有:python.Java.r ...

  7. 【luogu P3946 ことりのおやつ】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3946 交好几遍是因为虽然能过一直有提醒..强迫症qwq #include <bits/stdc++.h ...

  8. Docker 三种UI管理平台

    docker集中化web管理平台 一.shipyard 1.启动docker,下载镜像 # systemctl restart docker # docker pull alpine # docker ...

  9. Java分布式锁之数据库方式实现

    之前的文章<Java分布式锁实现>中列举了分布式锁的3种实现方式,分别是基于数据库实现,基于缓存实现和基于zookeeper实现.三种实现方式各有可取之处,本篇文章就详细讲解一下Java分 ...

  10. MySQL---视图、触发器

    一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...