代码案例之js写法不同

博主: Simon Lin 创建于: Aug 30, 2018 更新于: Aug 30, 2018
分类: tech
标签: tech code

代码案例之js写法不同

js写法一向自由,今天在写一个模拟服务器的时候,突然想到了几个写法,记录一下。

写法一:使用了ES6的class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let http = class {
constructor (path, params) {
this.path = path
for (var item of server) {
if (path === item.path) {
this.response = item.response
break
}
}
}
get res () {
return this.response
}
}

写法二:直接用function封装

1
2
3
4
5
6
7
8
9
10
var https = function (path, params) {
var response = null
for (var item of server) {
if (path === item.path) {
response = item.response
break
}
}
return response
}

我觉得最大的写法差别是类可以操作属性,get、set方法,还可以有构造函数,更像java。function写法更自由,更像js。

就是一个工具类,功能是模拟http的调用,调用根据路径Path和Params进行判断,输出对应的结果response,配对数据直接写在server这个数组里。
完整文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// let http = class {
// constructor (path, params) {
// this.path = path
// this.params = params
// for (var item of server) {
// if (path === item.path) {
// this.response = item.response
// break
// }
// }
// }
// get res () {
// return this.response
// }
// }
var https = function (path, params) {
console.log(params)
var response = null
for (var item of server) {
if (path === item.path) {
response = item.response
break
}
}
return response
}

let server = [
{path: 'getTodoList', params: '', response: [{name: 'aaa', item_num: 5, url: '/list_detail'}, {name: 'aaa', item_num: 5, url: '/list_detail'}, {name: 'aaa', item_num: 5, url: '/list_detail'}]},
{path: 'getUser', params: '', response: [{name: 'aaa'}, {name: 'aaa'}, {name: 'aaa'}]}
]

export default https

调用方法:
写法一:

1
2
import Fakeserver from '../fakeserver/test'
var response = new Fakeserver(path, params).res

写法二:

1
2
import Fakeserver from '../fakeserver/test'
var response = Fakeserver(path, params)

调用方法上页可以看到一点点不一样,就是有没有new。也说明,class的写法可以生成多个实例,互相间会有一定隔离,而function写法有点类似静态类。

以上只是个人编写代码的小测试,观点不一定准确,仅代表个人意见。


打赏 支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者