函数用法总结

函数是Js中一等公民,其重要性不言而喻,现在我就把常用方法总结一下,希望大家能够用到

函数中的缓存

函数中的缓存起到很重要的作用,不仅仅提升性能,还能够提升速度。对于一个函数来说特别重要,之前我做的一个项目,由于渲染的数据较多,当渲染数据达到200条的时候浏览器已经很卡顿了。我打开控制台追溯源码,发现发送请求两次,new 每一个实例。第一步是把多余的请求注释,第二步,把每一次实例分解,大致分三种数据,我就定义三个变量来存储这三种类型数据。更改完代码之后,直接渲染1000条数据不卡顿。瞬间觉得函数中的缓存还是相当重要 的。看一些这个代码你就知道了

/**
 * 函数缓存
 * @fn {Function} 回掉函数
 *
 * */
var getSingle=function(fn){
    var result;
    return function(){
        return result || (result=fn.apply(this,arguments));
    }
}

var div=getSingle(function(){
    var dom_div=document.createElement("div");
    dom_div.innerHTML="我是弹出层";
    document.body.appendChild(dom_div);
    return dom_div;
});
div();//第一次调用返回新创建的div
div();//第二次调用返回缓存中的div

这个缓存方式是利用到闭包的特性,返回一个新的函数,这个函数中带有getSingle函数中局部的变量 result引用。所有result会一直存在内存中。当我们第一次调用div()函数result值被赋值。第二次调用直接从内存中读取result

函数链式调用

链式调用其实也很常用,如果你曾经已经把jQuery完烂,你对它的链式调用是否好奇。其实链式调用也是很简单的。咱们看一个例子

/**
 * 函数链式调用
 * @elm 单个DOM节点
 * */
var GetElm=function(elm){
    this.elm=elm || document.querySelector("body");
}
GetElm.prototype.setWidth=function(width){
    this.elm.style.width=width+"px";
    return this;
}
GetElm.prototype.setHeight=function(height){
    this.elm.style.height=height+"px";
    return this;
}
var dom= new GetElm(document.querySelector(".imag"));
dom.setHeight(400).setWidth(200);

首先定义了一个简单的构造函数GetElm,然后在其原型扩展setWidth与setHeight方法。当我们实例一个GetElm以后。我们就可以使用setWidth与setHeight方法,大家已经发现setHeight与setWidth方法返回了this.这才是咱们实现链式调用的关键所在。

函数节流

函数节流对于我们来说太实用啦,因为我们开发页面的时候经常会用到onresize,onscroll,onmousemove,如果这些事件中加杂大量的dom操作,浏览器肯定会卡顿。

//函数节流
/**
 * 函数节流
 * @fn {Function} 延迟执行函数
 * @interval {Number} 延迟多久执行,默认值500毫秒
 *
 * */
var throttle=function(fn,interval){
    var _fn=fn || function(){},//保存需要延迟执行函数的引用
    timer,//定时器
    firstTime=true;//是否是第一次调用
    return function(){
        var args=arguments,
        that=this;
        if(firstTime){//如果第一次执行不需要延迟
            _fn.apply(that,args);
            return firstTime=false;
        }
        if(timer){//如果定时器还在说明上一次执行还没结束
            return false;
        }
        timer=setTimeout(function(){//延迟一段时间执行
            clearTimeout(timer);
            timer=null;
            _fn.apply(that,args);
        },interval || 500);
    }
}

window.onresize=throttle(function(){
    console.log("200");
},200)

有了函数throttle节流方法妈妈再也不用担心我的浏览器会卡顿啦!这个节流函数也是用闭包实现的哦!!!小伙伴们,下一篇内容咱就给你单独讲讲闭包。

惰性加载函数

惰性加载函数功能犹如它的名字,它很懒,懒得以至于不想运行。哈哈,,,来看一下代码吧!这段代码之前你肯定经常用到,这是解决浏览器的兼容性而写的。

/**
 * 惰性加载函数(一)
 * 缺点:无论使用或者不使用,都要执行一次。
 * @el 单个DOM节点
 * @type {String} 事件名称
 * @handler {Function} 函数
 *
 * */

var addEvent=(function(win){
    if(win.addEventListener){
        return function(el,type,handler){
            el.addEventListener(type,handler,false);
        }
    }
    if(win.attachEvent){
        return function(el,type,handler){
            el.attachEvent("on"+type,handler);
        }
    }
})(window)

/**
 * 惰性加载函数(二)
 * @el 单个DOM节点
 * @type {String} 事件名称
 * @handler {Function} 函数
 * 缺点:重新改写原函数
 * 优点:只有执行时才会改写。
 * */

var addEvent=function(el,type,handler){
    if(win.addEventListener){
        addEvent= function(el,type,handler){
            el.addEventListener(type,handler,false);
        }
    }else if(win.attachEvent){
        addEvent= function(el,type,handler){
            el.attachEvent("on"+type,handler);
        }
    }
    addEvent(el,type,handler);
}

惰性加载函数(一)比较勤快,所有呢!为了保证你的代码能够运行,你把这段代码放在最上边。这个函数其实也很简单,浏览器加载则执行它,然后根据addEventListener与attachEvent的支持情况返回一个匿名函数给addEvent。你呢!只负责调用就行啦!它的缺点是最少执行一次。

惰性加载函数(二)跟它名字一样,“不要跟我比懒,我懒得跟你比”。只有在你调用它的时候它会根据addEventListener与attachEvent的支持情况从写addEvent函数。

总结

函数真的很重要,在你学习js的时候,你一定要深入去学习函数。没有了函数可以说js跟废物一样。就拿上边来看,它就帮我们解决了好多平时都经常遇到的问题。

时间: 2024-11-07 15:47:54

函数用法总结的相关文章

Oracle 中 decode 函数用法

Oracle 中 decode 函数用法 含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN RETURN(翻译值2) ......ELSIF 条件=值n THEN RETURN(翻译值n)ELSE RETURN(缺省值)END IFdecode(字段或字段的运算,值1,值2,值3) 这个函数运行的结果是,当字段或字段的运算的值等于值1时,该函数返回值

C#字符串的截取函数用法总结

这篇文章主要介绍了C#字符串的截取函数用法,实例总结了substring,Remove,indexOf等函数的用法,并对具体应用进行了实例分析,需要的朋友可以参考下 本文实例总结了C#常用的字符串截取函数用法.分享给大家供大家参考.具体分析如下: 在C#中字符串截取函数包括有substring 函数,Remove 函数,indexOf 函数,它们三个都可以对字符串进行截取操作,下面我们来分别介绍一下. 下面是截取字符串过程中我们必须知道的以下函数:substring 函数.Remove 函数.i

python之函数用法capitalize()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法capitalize() #capitalize() #说明:将字符串的第一个字母变成大写,其他字母变小写. ''' capitalize(...) S.capitalize() -> string Return a copy of the string S with only its first character capitalized. ''' #案例 str='xiaoden

Python成长之路第二篇(1)_数据类型内置函数用法

数据类型内置函数用法int 关于内置方法是非常的多这里呢做了一下总结 (1)__abs__(...)返回x的绝对值 #返回x的绝对值!!!都是双下划线 x.__abs__() <==> abs(x) 例如: #!/usr/bin/python print "abs(-45) : ", abs(-45) print "abs(100.12) : ", abs(100.12) print "abs(119L) : ", abs(119L)

Python成长之路第二篇(2)_列表元组内置函数用法

列表元组内置函数用法list 元组的用法和列表相似就不一一介绍了 1)def append(self, p_object):将值添加到列表的最后 # real signature unknown; restored from __doc__ """ L.append(object) -- append object to end """ pass (2)def count(self, value): 值的出现次数 # real signature

Python成长之路第二篇(3)_字典的置函数用法

字典的置函数用法(字典dict字典中的key不可以重复) class dict(object): """ dict() -> new empty dictionary dict(mapping) -> new dictionary initialized from a mapping object's (key, value) pairs dict(iterable) -> new dictionary initialized as if via: d =

python之函数用法setdefault()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法setdefault() #D.get(k,d) #说明:k在D中,则返回 D[K],如果k不在D中,则返回d值 #D.get(k,d), also set D[k]=d if k not in D ''' >>> help(dict.setdefault) Help on built-in function setdefault: setdefault(...) D.set

python之函数用法islower()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法islower() #http://www.runoob.com/python/att-string-islower.html #islower() #说明:检测字符串是否都由小写字母组成 str = "THIS is string example....wow!!!" print str.islower()#False str = "this is string

python之函数用法xrange()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法xrange() #xrange() #说明:返回一个生成器 #xrange做循环的性能比range好,尤其是返回很大的时候.除非要返回一个列表,则用range. ''' class xrange(object) | xrange(stop) -> xrange object | xrange(start, stop[, step]) -> xrange object | | Li

python之函数用法startswith()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法startswith() #http://www.runoob.com/python/att-string-startswith.html #startswith() #说明:返回布尔值,用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False. ''' startswith(...) S.startswith(prefix[, start[, end]]