ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
>[success] # 说明 ~~~ 1.本章节的思路是根据目前公司项目总结一套思想,整套思想的推论如下: 1.1 传统前端项目上我们会将传递给后台的数据,或者后台返回的数据 一一取出,在一一对应,即可以理解数据归属当前页面,耦合度高 1.2 进一步为了减少工作量,发现整个前后台联动数据不出意外基本命名 是相同的,又出现了'vue' 中数据绑定,我们只需要将关联的值赋予所 关联的字段即可实现数据赋值 1.3 但由于前端技术不断更新,为了可以更加灵活的让我们的数据层和框架 负责的逻辑层进行分离,推导出'类来管理数据',和验证数据的思想,及构 成了数据和逻辑分离,当更换技术时只需要迁移逻辑层面 ~~~ >[danger] ##### 对上面三条的推论详细讲解 * 对1.1 的讲解 ~~~ 1.当我们停留在'jq' 的时代时候,后台给我们返回一个数据格式如下的接口 数据: {'name':wang,age:'24'} 2.我们在数据新增阶段需要取出来个个对应'dom'节点的值,将数据统一格式 后放入我们要传递的接口中列如: const params= {'name':wang,age:'24'} $.post("test",params,function(result){ console.log(result) }); 3.当我们进行查询的时候需要: const params= {} $.post("test",params,function(result){ params.name = result.name params.age = result.age }); 4.其实可以发现需要再做不停的数据分解重组合并,并且这个数据都充斥在 逻辑层 ~~~ * 对1.2 讲解 ~~~ 1.当现在步入进三大框架的时代,通过数据绑定的形式在新增的时候我们在 不需要从'dom'中取得数据在赋值,只需要做一件事('vue 为例')在'data'中 声明一个对象,对象中的字段去关联我们'dom'上 2.当查询获取值的时候,也因为,后台返回的字段基本和前端定义的字段是 一致的因此,可以写一个方法让字段一致的自动赋值即可 3.但这种还是将数据和逻辑放到了同一个层面中 ~~~ * 对于我们现阶段采用1.3的思想做的案例将在后续章节详细讲解 >[danger] ##### 想可以使用1.3的思想你需要准备的 ~~~ 1.牢靠的es5类的思想 2.熟练了解es6中类的使用(可以看ES6--类概念章节) 3.es7装饰器的使用 ~~~ >[danger] ##### 适配器模式和装饰器模式 参考文章 [csdn--devotion987](https://blog.csdn.net/devotion987/article/details/78339513) [简书--itclanCoder](https://www.jianshu.com/p/2607036721d8)