对传统前端项目(可能不够准确),一直在思考一种分类,也好奇对于大项目中,一个好的javascrip文件的分类是个什么样子的。
想法
我想很多的人都知道简单的后端一些代码的逻辑,以及类的抽象。对于一种本质上就是没有类的语言,我们应该如何区分javascript的文件,什么东西应该提出来。如同后台与数据库连接会单独提一个类一般,我们是否也能把我们与后台数据的交互提出来。
思考
我想我们应该把网络请求的ajax和我们的逻辑分开,至少我们能保证在修改逻辑代码的时候不用看见一对有回调函数的ajax语句,或者我们不用再修改请求接口的时候,在一堆逻辑代码中找到这些请求。对于现在的我,我想这是目前很适应自身的一种代码拆分。
应用
index.js ==》 index.js + http_config.js
// index.js
$('btn').on('click',function(){
$.ajax({
url:'url',
type:'GET',
success:function(data){
console.log(data)
},
error:function(data){
console.log(data)
}
})
})
// change file
// http_config.js
var DOMAIN = 'http://111.11.11.111';
var API = {
xxurl:DOMAIN + "/url"
}
var indexHandler = {
getData:function(s_func,e_func,data){
$.ajax({
url:API.xxurl,
data:data,
success:function(data){
if(/*正确返回数据*/){
s_func(data)
}else{
e_func(data)
}
},
error:function(data){
e_func(data);
}
})
}
}
// index.js
$('btn').on('click',function(){
indexHandler.getData(success,error,{传送的数据})
})
function success(data){
console.log(data)
};
function error(data){
console.log(data)
}
优点
可能大家粗一看,代码量更多了。其实不然,更多的是代码的抽样,以及复用,还有逻辑与请求的分离。
我们可以想象一下这一一个情景,线上线下的接口切换,我们只需要修改DOMAIN这个变量,对返回数据的逻辑判断,我们根本不需要关注。在请求中,自动帮我们分开了成功执行和失败执行的分支。对多数业务来说,返回接口都会有个一个后台返回的状态,比如state = 0的时候为返回失败,然后会带返回参数,如果state = 1成返回成功,当返回错误时,我们更多的是弹出一个提示框,这一我们可以再error函数中写一个返回失败处理的弹框,将每次返回值的错误信息传进去。即使有多个请求,我们只需要一个处理函数。在思考一个情景,当我们修改代码时,修改代码逻辑,我不会看见一大堆ajax的代码,只会看见我本身的逻辑函数等。而我们修改请求接口时,在不影响逻辑的情况下,我们根本不需要去一大堆页面查找我需要修改的请求在哪个地方,和其他的东西有什么影响。只需要打开http_config.js代码,找到对应的请求,修改主体就行了。
同时,对某些接口进行缓存时,我们更可以结合高阶函数的记忆方法,只在请求的处理函数中处理我们的返回值,而逻辑的代码根本不需要关注我使用了什么,是否发起了请求,逻辑中只需要正常走请求,至于是真的请求了还是伪请求都和我的逻辑无关。
关于高阶函数记忆的举例
// http_config.js
var DOMAIN = "http://111.1.1.11";
var API = {
url:DOMAIN + "/do"
}
var indexHandler = {
getRemenberId:function(opt){
var rID = '';
for(var i in opt){
rID += (opt[i] + 'e');
}
return rID;
},
getRoleSkills:function(s_func,e_func,options){
// 记忆码
var rID = _roleHandler.getRemenberId(options);
if(_roleHandler.getRoleSkills[rID]){
// 提取记忆信息
s_func(_roleHandler.getRoleSkills[rID])
return false
}
options = options || {};
$.ajax({
url:API.url ,
type:'GET',
dataType:'json',
data:options,
success:function(data){
if(data.state === 1){
s_func(data.value)
// 记忆数据
_roleHandler.getRoleSkills[rID] = data.value;
}else{
e_func(data.message)
}
},
error:function(data){
e_func();
}
})
}
}
// index.js
indexHandler.getRoleSkills(success,error,{id:1,type:'role'}) // 第一次调用会发起请求
indexHandler.getRoleSkills(success,error,{id:1,type:'role'}) // 第二次调用不会发起请求