[探索]怎么样的参数能让 JS - API 更灵活

时间: 2019-05-20阅读: 159标签: 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}

想必大家也发现这样写法太不灵活了,如果下次要把 0 和 false 的属性也清空呢?如果下次要把值为 '--' 的属性也清空呢?这样就做不到了,所以还要改一下,增加一个参数 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 参数方面的东西就暂时写到这里了,这部分的内容不多,所以篇幅不是很长,也容易理解。但是参数这个话题也相对开放,如果大家有什么好的想法。欢迎在评论区留言。

想了解更多,和我交流,内推职位,请添加我微信。或者关注我的微信公众号:守候书阁

来自:http://www.imooc.com/article/286884


链接: http://www.fly63.com/article/detial/3378

SDK 与API之间的关系和联系

SDK(Software Development Kit,软件开发工具包)一般都是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合,比如提供安卓开发工具、或者基于硬件开发的服务等。也有针对某项软件功能的SDK

Node.js中Streams

NodeJs流以难以使用而闻名,甚至更难理解。 好吧,我给你带来了好消息 - 现在已经不是这样了。多年来,开发人员创建了许多软件包,其唯一目的是为了更容易的使用流。 但是,在本文中,我将重点介绍NodJs 原生的流API。

ACE Editor在线代码编辑器的API使用文档

ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档

Vue 3.0 体验 Vue Function API

近 Vue 官方公布了 Vue 3.0 最重要的RFC:Function-based component API,并发布了兼容 Vue 2.0 版本的 plugin:vue-function-api,可用于提前体验 Vue 3.0 版本的 Function-based component API

Vue 3.0 的 Composition API 尝鲜

虽然 Vue 3.0 尚未发布,但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。

Vue3.0 Function API

Vue 3.0 的发布引起了轩然大波,让我们解读下它的 function api RFC 详细了解一下 Vue 团队是怎么想的吧!首先官方回答了几个最受关注的问题

RESTful API风格

首先要说,不管你的API属于哪种风格,只要能够满足工作需要,就足够了。API格式并不存在绝对的标准,只存在不同的设计风格。API设计包含两部分:请求和响应。

用Node.js创建安全的 GraphQL API

本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。使用 GraphQL API 的目的是什么?什么是GraphQL API?什么是GraphQL查询?GraphQL的好处是什么?GraphQL是否优于REST?为什么我们使用Node.js?

怎样让 JS - API 具有更好的实用性

怎么让 API 更加的实用,更好的复用。1.代码的实用性,只能尽量,尽量再尽量。不会出现完美的API,或者是一次编写,永不修改的 API 。API 命名和扩展性也很重要。

在原生 React Native 应用中使用 Expo API

你可以在任何 React Native 应用程序中使用尽可能少或尽可能多的 Expo SDK。 我们已经花了很多时间构建和维护这些包含原生应用特性的跨平台 API,我们很高兴最终实现了向整个 React Native 生态共享这些 API

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全