开发者学堂课程【Ajax 前端开发入门与实战:优化封装方案分析】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/595/detail/8536
优化封装方案分析
在目录中创建一个新的文件叫做 myutils.js, 将 ajax 方法复制到里面
之后引入 js 文件:
<script type="text/javascript" src="myutils.js"></script>
不引入的话将无法引用这个方法。
在 myutils.js 中将代码进行格式化操作。
对于封装方法,主要考虑几个方面:
1、哪些东西是变的。
对于封装来说如果有些东西是变的,可以通过参数的方式传递进来。
2、哪些东西是不变的。
封装一个方法的目的仅仅是为了不想把重复的代码写多次,对于 ajax 来说不变的就是 1234 四个步骤里的主要逻辑,所以将重复的代码直接写进方法体当中就可以了。
3、如何将结果通知调用者。
传入一个方法就可以了。
4、如何调用方便。
对于 myajax 方法来说,关于它的调用一点都不方便,主要有两个方面:
(1)参数的顺序不可改变。
它的参数有严格的顺序要求,也就是在调用 myajax方法的时候,里面的顺序不可有任何的改变。
比如在刚才的操作中将顺序改变,将 false 放到第一个参数当中,这样的话所有的顺序就打乱了,第一个是 false 第二个是 type,第三个是 url,在 myutils.js 中第一个是 type 第二个是 url,这样调用的话会把 false 调用给 type,type 调用给 url,全部都乱了。
(2)参数没有默认值,每次都得传递。
有一些参数如果是经常使用的值,比如请求类型 get 是经常使用的,那么调用 myajax 方法的时候不会也默认 get 方式进行请求。
接下来将这两个问题解决,将封装完善,在 myutils.js 中再定义一个 function 让调用者调用起来更加方便,将参数变为参数顺序可以改变,预置一些默认值。将封装的参数变为一个对象即可:
obj {.
url: "xxx",
type: "get",
dataType: "json"
};
obj.url,
obj.type,
function myAjax2(obj){
var defaults = {
type:"get",
ur
l
:"#",
dataType:"json",
async: true
};
for(var key in obj){
defaultslkey] = obj[key];
}
//使用 defau1t 中的属性,进行 ajax 请求的1234四个步骤即可
只要传入一个 obj,这样做的好处是是由调用者传入的,它里面的值都是以 k 和 value 存在的,调用 myajax2 的时候传入进 obj,里面有以上的值,那么在取这些值的时候就不需要
严格按照具体的顺序,只需要按照 obj.url 就可以得到传递进来的地址,通过 obj.type 得到指定类型。
所以传入一个对象就可以解决参数顺序问题。
Var 中的对象中预置一些比较常用的值,比如 get,因为 get请求是比较常用的,将这个请求放到 defaults 中,如果 obj 中有 type,那么就想 obj 传递的 type 覆盖到 defaults 中的 type。
如果没有那么将使用预定的 type 请求类型,这样就可以解决参数默认值的问题。
将 obj中的属性,覆盖到 defaults 中的属性:
因为 obj 是调用者传递进来的,应该以 obj 中的属性为主:
for(var key in obj){
defaultslkey] = obj[key];
这样做的好处是:
1、如果有一些属性只存在于 obj 中,会给 defaults 中增加属性
2、如果有一些属性在 obj 和 defaults 中都存在,会将 defaults 中的默认值覆盖
3、如果有一些属性只在 defaults 中存在,在 obj 中不存在,这时候 defaults 中将保留预定义的默认值