优化封装方案分析| 学习笔记

简介: 快速学习优化封装方案分析。

开发者学堂课程【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",

url:"#",

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 中将保留预定义的默认值

相关文章
|
5月前
|
SQL 缓存 监控
后端接口性能优化分析-问题发现&问题定义(上)
后端接口性能优化分析-问题发现&问题定义
520 0
|
5月前
|
监控 NoSQL Java
后端接口性能优化分析-问题发现&问题定义(下)
后端接口性能优化分析-问题发现&问题定义
137 0
|
5月前
|
NoSQL 算法 Java
后端接口性能优化分析-程序结构优化(中)
后端接口性能优化分析-程序结构优化
67 0
|
存储 缓存 监控
《优化接口设计的思路》系列:第二篇—接口用户上下文的设计与实现
大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。 作为一名从业已达六年的老码农,我的工作主要是开发后端Java业务系统,包括各种管理后台和小程序等。在这些项目中,我设计过单/多租户体系系统,对接过许多开放平台,也搞过消息中心这类较为复杂的应用,但幸运的是,我至今还没有遇到过线上系统由于代码崩溃导致资损的情况。这其中的原因有三点:一是业务系统本身并不复杂;二是我一直遵循某大厂代码规约,在开发过程中尽可能按规约编写代码;三是经过多年的开发经验积累,我成为了一名熟练工,掌握了一些实用的技巧。
101 0
|
5月前
|
NoSQL Java Redis
后端接口性能优化分析-程序结构优化(上)
后端接口性能优化分析-程序结构优化
197 0
|
2月前
|
机器学习/深度学习 分布式计算 前端开发
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
|
2月前
|
存储 缓存 Java
Android项目架构设计问题之优化业务接口数据的加载效率如何解决
Android项目架构设计问题之优化业务接口数据的加载效率如何解决
39 0
|
4月前
|
数据采集 存储 监控
构建高效爬虫系统:设计思路与案例分析
构建高效爬虫系统涉及关键模块如爬虫引擎、链接存储、内容处理器等,以及用户代理池、IP代理池等反反爬策略。评估项目复杂性考虑数据规模、网站结构、反爬虫机制等因素。案例分析展示了电子商务价格比较爬虫的设计,强调了系统模块化、错误处理和合规性的重要性。爬虫技术需要不断进化以应对复杂网络环境的挑战。
116 1
|
5月前
|
缓存 Java 应用服务中间件
后端接口性能优化分析-程序结构优化(下)
后端接口性能优化分析-程序结构优化
74 0
|
监控 小程序 Java
《优化接口设计的思路》系列:第五篇—接口发生异常如何统一处理
大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。
366 0
《优化接口设计的思路》系列:第五篇—接口发生异常如何统一处理