javascript文件分类的探索_js 将文件类型归类-优快云博客

对传统前端项目（可能不够准确），一直在思考一种分类，也好奇对于大项目中，一个好的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'})     // 第二次调用不会发起请求