[探究]怎样的参数能让 JS - API 更天真

外在决议是不是须要相识内涵,内涵决议是不是会一票否决外在。表里连系,好上加好。

1.媒介

开辟 API 的时刻,把参数的名字和位置肯定下来,函数定义就可以够说是完成了。由于 API 运用者来讲,只须要晓得怎样通报参数,以及函数将返回什么样的值就够了,无需相识内部。所以参数多若干少影响了 API 的一个天真水平和运用庞杂水平。在设想 API 的时刻,应当怎样设想参数,下面就简朴的写下,假如人人有差别的主意,迎接在批评区留言。

下面运用的例子,除了原生了 JQuery 的 API。其他的例子都是取自本身封装的一个经常使用函数库
ecDo 。迎接提建媾和 star。

2.什么时刻该设置参数

实在什么时刻设置参数并没什么什么说法,范例。只需觉得用参数会使得 API 的运用会越发的简朴和天真就用了。

设置参数,能够一最先不会有很好的灵感,然则在运用过程中,用得难熬痛苦了,自然会像方法优化。

比方 有 ecDo.count(array|string,item) 这个 API 就是统计一个数组的每一个元素的涌现次数或许字符串每一个字符的个数。

这很轻易完成,代码也贴下

count(arr) {
    let obj = {}, k, arr1 = []
    //纪录每一元素涌现的次数
    for (let i = 0, len = arr.length; i < len; i++) {
        k = arr[i];
        if (obj[k]) {
            obj[k]++;
        } else {
            obj[k] = 1;
        }
    }
    //保留效果{el-'元素',count-涌现次数}
    for (let o in obj) {
        arr1.push({el: o, count: obj[o]});
    }
    return arr1;
},



let strTest1='abbccc'
console.log(ecDo.count(strTest1));
//result:[{el: "a", count: 1},{el: "b", count: 2},el: "c", count: 3}]

然则有些时刻,开辟者并不须要晓得一切元素的个数,比方就须要晓得 'a' 的涌现次数,这个状况直接返回 'a' 的个数就好了,不须要像上面例子一样,返回一个数组。如许用起来会惬意一些,改起来也很简朴,只需增添一个参数,一个推断即可。

count(arr,item) {
    //反复代码略
    return item?obj[item]:arr1;
},



let strTest1='abbccc'
console.log(ecDo.count(strTest1),'a');
//result:1

另有一个经常使用的 API 是ecDo.clearKeys(obj)–消灭对象中值为‘空’(null, undefined和”)的属性。

这个也很轻易完成,

clearKeys(obj) {
    let _newPar = {};
    for (let key in obj) {
        if (obj[key]===0||obj[key]===false||obj[key]) {
            _newPar[key] = obj[key];
        }
    }
    return _newPar;
},


ecDo.clearKeys({1:0,2:2,3:''})
//result:{1: 0, 2: 2}

想必人人也发明如许写法太不天真了,假如下次要把 0false 的属性也清空呢?假如下次要把值为 '--' 的属性也清空呢?如许就做不到了,所以还要改一下,增添一个参数 clearValues – 待清空的值。

要运用的一个函数

clearKeys(obj, clearValues = [null, undefined, '']) {
    clearValues.forEach((item, index) => {
        clearValues[index] = Number.isNaN(item) ? 'NaN' : item
    });
    let _newPar = {};
    for (let key in obj) {
        //checkValue 看下面定义
        if (!checkValue(obj[key], clearValues)) {
            _newPar[key] = obj[key];
        }
    }
    return _newPar;
},


ecDo.clearKeys({a:'',b:0,c:11})
//result:{b: 0,c: 11}
ecDo.clearKeys({a:'',b:0,c:'--'},['--',''])
//result:{b: 0}
ecDo.clearKeys({a:'',b:0,c:11,d:false},[0,''])
//result:{c: 11,d: false}
ecDo.clearKeys({a:NaN,b:2,c:undefined},[NaN,undefined])
//result:{b: 2}

checkValue 函数

function checkValue(val, vals) {
    let _val = val;
    if (Number.isNaN(val)) {
        _val = 'NaN'
    }
    return vals.indexOf(_val) !== -1;
}

如许以来,想消灭任何值的属性,这里都能够完成。

3.参数数目和前置

这两个注重点能够说是寻常打仗最频仍的,也是最无可辩护的。

起首参数的数目,在不影响 API 运用的状况下肯定是能少就少,越少越好。由于参数的越少,API 的影象本钱越低,挪用也越发轻易。

参数能少就少,越少越好,是有条件的–不影响 API 的运用。假如多个参数, API 运用能更轻易,天真,简朴。多个参数就多个参。

然后参数的前置性,就是参数相关性越高,越不能省略的,就越要放在前面。虽然能够把可省略参数放背面,然则如许题目能够会许多。

4.运用对象作为参数

什么时刻该运用对象作为函数的参数,临时发明是两种状况。

1.参数过量的时刻

2.参数不牢固的时刻

比方 ajax 的参数,起码起码也有 5 个。url-要求链接,method-要求体式格局,data-要求参数,success-胜利回调,fail-失利回调。假如不运用对象作为参数,完全的写法,是下面如许

ajax(url,method,data,success,fail)

但这5个参数内里,除了 url ,其他参数都能够省略或许默许。假如只须要传 url 和 success,须要像下面如许写

ajax(url,'','',success)

由于参数的递次不能乱,所以就要如许写。如许多难熬痛苦就不说了,假如参数过量,参数看着会很长,轻易搞错参数递次,就会涌现题目了。

假如运用对象传参,就惬意许多了。

ajax({url:url,success:function(){}})

如许写的会多一点,然则优点也有。起首用户照样须要记着参数名,但不必体贴参数递次,不必忧郁参数过量。然后就是开辟者想增添若干参数都比较轻易,也不必体贴参数后置的题目。

是不是运用对象作为参数,推断的目标应当只要一个:是不是轻易运用,天真。

5.参数默许值

什么时刻应当设想默许值?也分几种状况议论

起首是,一个参数值涌现频次比其他状况大的时刻。比方有一个 ecDo.encrypt(str,regIndex,repText) 的 API,作用很简朴,就是对字符串的特定位置举行加密。比方经常会碰到隐蔽用户的手机号码的需求。

电话号码随意假造的


ecDo.encrypt('18819233362','3,7')
//result:188*****362

ecDo.encrypt('18819233362','3,7','+')
//result:188+++++362

ecDo.encrypt('18819233362','4')
//result:*****233362

ecDo.encrypt('18819233362','-4')
//result:188192*****

在这个 API 内里 ,第三个参数 repText 能够大多数状况都是运用 。假如不对 repText 设置默许值,假如每一次都传一个 ,不只写的多,看得也难熬痛苦。

另有一种状况,从特定位置实行到末端完毕的时刻。比方原生的 substr(start,length) ,第一个参数是最先字符的下标,第二个参数是截取的长度。假如省略,就从最先位置截取到末端。如许就算是一种轻易。

5.参数多态

这里说的参数多态跟继续方面的多态有点区分

参数多态这个很罕见,目标很简朴,就是经由过程差别的传参体式格局让一个函数举行差别的操纵。看到这里,能够人人一会儿就想到 splice。由于一个 splice 能够完成数组的增添,删除,替代

//删除
let arr=[1,2,3,4,5,6]
arr.splice(0,1)
//result:arr:[2, 3, 4, 5, 6]

//替代
arr=[1,2,3,4,5,6]
arr.splice(2,1,0)
//result:arr:[1, 2, 0, 4, 5, 6]

//增添
arr=[1,2,3,4,5,6]
arr.splice(2,0,0)
//result:arr:[1, 2, 0, 3, 4, 5, 6]

然则 splice 应当并不算是参数多态,只能算是一些技能的一个写法。

表现出参数多态的,比方 JQuery 的 attr 。既能够猎取属性的值,也能够设置属性的值。

//猎取 dom 元素 id 的值
$(dom).attr('id')
//设置 dom 元素 id 的值
$(dom).attr('id','domId')

JQuery 把多态表现得更好的应当是 $() 。JQuery 火的缘由,跟这个 $() 有很大的关联,只需是正当的挑选器,页面存在这个元素,就可以找到。让挑选元素变得异常简朴。

关于
$() 的壮大特征,可参考
jQuery 挑选器

在本身封装 API 的时刻,也会碰到操纵 cookie 的一系列操纵(设置,猎取,删除)。之前是如许

ecDo.setCookie(cookieName,value,day)//设置(cookie称号,cookie值,有用的天数)
ecDo.getCookie(cookieName)//猎取
ecDo.removeCookie(cookieName)//删除

现在是如许

ecDo.cookie(cookieName,value,day)//设置(cookie称号,cookie值,有用的天数)
ecDo.cookie(cookieName)//猎取
ecDo.cookie(cookieName,value,-1)//删除

如许运用起来,就比之前简朴一点,相当于只是记着一个 API 就可以够了。

参数的多态,就是让 API 的诘问诘责会依据参数的状况举行转变。相当于把类似职责的 API 给兼并成一个。不须要给用户提供出太多 API,轻易用户的运用。纵然如许能够违法了单一诘问诘责准绳,然则照应了起码学问准绳。能让 API 的运用尽量简朴化了。

5-1.什么时刻不应设置参数多态

参数多态就是把类似职责的 API 给兼并成一个。然则有时刻并不合适运用。更合适把兼并的 API 拆分红几个。

比方之前封装经常使用 API 的时刻。有一个去除字符串空格的 API : ecDo.trim(str,type) (str-待处理的字符串,type-去除空格的范例—-1-摆布空格,2-一切空格,3-左空格,4-右空格) 。

运用情势

ecDo 是我封装的一个经常使用函数库。

let str=' 守 候 ';
console.log(ecDo.trim(str,1));//'守 候'
console.log(ecDo.trim(str,2));//'等待'
console.log(ecDo.trim(str,3));//'等待 '
console.log(ecDo.trim(str,4));//' 等待'

如许运用的话,想必人人都看到题目了。1 2 3 4 是什么鬼?就算晓得是什么鬼,也要把这几个鬼记着。影象本钱大,挪用也不轻易。后来就拆分红四个函数了。

let str=' 守 候 ';
console.log(ecDo.trim(str));//'守 候'
console.log(ecDo.trimAll(str));//'等待'
console.log(ecDo.trimLeft(str));//'等待 '
console.log(ecDo.trimRright(str));//' 等待'

如许虽然多了几个 API 然则运用起来简朴了。影象本钱也比之前少。是不是设置参数多态,照样要看挪用的状况而言。

6.小结

好了,关于 API 参数方面的东西就临时写到这里了,这部份的内容不多,所以篇幅不是很长,也轻易明白。然则参数这个话题也相对开放,假如人人有什么好的主意。迎接在批评区留言。

————————-华美的分割线——————–

想相识更多,和我交换,内推职位,请增加我微信。或许关注我的微信民众号:等待书阁

《[探究]怎样的参数能让 JS - API 更天真》《[探究]怎样的参数能让 JS - API 更天真》

    原文作者:守候
    原文地址: https://segmentfault.com/a/1190000019230657
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞