首页  思维导图  详情

代码质量

2020-04-16 11:10:08   0  举报





AI智能生成

前端代码质量

前端

代码质量

作者其他创作

大纲/内容

健壮性

意外情况下的应对能力

技巧

参数判断

typeof

try catch

node 中经常用到，读取文件、网络操作

实例化检测

object instanceof constructor 检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

单例模式

防止把全局对象 new 两次

function store(){ this.store={ } if(store.singleInstance){ // 将 store.singleInstance 作为标志，在这里返回 this 的方法是不行的， // 这里的 this 指的是 new 的过程中产生的新对象 // return this return store.singleInstance } // store.singleInstance=true // 单例模式必须将第一次产生的实例保存起来供下次使用 store.singleInstance=this return this } var s1=new store() var s2=new store() s1.store.a=2333 console.log(s1,s2)

复用性

不重复自己

技巧

组合与继承

继承基于类，组合基于方法（组合不是基于类的）

组合大于继承 能用组合就不用继承

组合优点

可扩展性强

享元模式

享元模式（Flyweight Pattern）主要用于减少创建对象的数量，以减少内存占用和提高性能。 这种类型的设计模式属于结构型模式，它提供了减少对象数量从而改善应用所需的对象结构的方式。

看了张容铭书中对应的章节，感觉就是把多个地方要用到的能提取单元的提取出来

可扩展（维护）

从容面对需求改变

整体架构上一定要使用 mvc 模式

基础

低耦合模块

技巧

装饰者模式

装饰模式指的是在不必改变原类文件和使用继承的情况下，动态地扩展一个对象的功能。 它是通过创建一个包装对象，也就是装饰来包裹真实的对象。

Vue 中的应用

对于数组的检测 异步编程脑图中的 AOP 面向切片编程

Object.defineProperty(obj, prop, descriptor) 无法检测数组的变化 // vue-2.6/src/core/observer/array.js methodsToPatch.forEach(function(method) { // cache original method const original = arrayProto[method]; def(arrayMethods, method, function mutator(...args) { const result = original.apply(this, args); const ob = this.__ob__; let inserted; switch (method) { case "push": case "unshift": inserted = args; break; case "splice": inserted = args.slice(2); break; } if (inserted) ob.observeArray(inserted); // notify change ob.dep.notify(); return result;  }); });

职责链模式

解决请求的发送者与接受者之间的耦合，通过职责链上多个对象分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。

步骤

<ol><li>分解需求 </li><li>每个对象只做分内的事 </li><li>无关的事情传到下一个对象中做，直到需求完成 </li></ol>

优点

即便项目经理某一模块需求不确定，也不影响开发其他模块

方便进行单元测试

封装 axios， 方便给请求前请求后增加功能

var a = new myAxios({ baseURL: "xxx" }); a.send({   url: "xxx",   data: {},   beforeSend: function() {} });

状态模式

更好扩展（维护），也更易读

示例

var m=new superMary() m.putAction(['run','shot']) m.run()

// 将 if else 判断变成对象上的状态 function superMary(action){ this.state=[] this.action={   run:function(){   },   jump:function(){   },   shot:function(){   } } } superMary.prototype.putAction=function(action){ if(typeof action==='string'){   this.state.push(action) }else{   this.state=action } } superMary.prototype.run=function(){   this.state.forEach((action)=>{     this.action[action]()   }) }