代码质量
2020-04-16 11:10:08 0 举报AI智能生成
前端代码质量
作者其他创作
大纲/内容
健壮性
意外情况下的应对能力
技巧
参数判断
typeof
try catch
node 中经常用到，读取文件、网络操作
实例化检测
object instanceof constructor
检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
检测构造函数的 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)
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 面向切片编程
异步编程脑图中的
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;
});
});
// 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;
});
});
职责链模式
解决请求的发送者与接受者之间的耦合，通过职责链上多个对象分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。
步骤
- 分解需求
- 每个对象只做分内的事
- 无关的事情传到下一个对象中做，直到需求完成
优点
即便项目经理某一模块需求不确定，也不影响开发其他模块
方便进行单元测试
封装 axios，
方便给请求前请求后增加功能
方便给请求前请求后增加功能
var a = new myAxios({
baseURL: "xxx"
});
a.send({
url: "xxx",
data: {},
beforeSend: function() {}
});
baseURL: "xxx"
});
a.send({
url: "xxx",
data: {},
beforeSend: function() {}
});
function myAxios(axiosConfig) {
this.axios = axiosBuild(axiosConfig);
}
myAxios.prototype.send = function(config) {
beforeSend.call(this, { cb: config.beforeSend, url: config.url });
var sendPromise = send.call(this, config);
var afterData = afterSend.call(this, {
promise: sendPromise,
cb: config.afterCb
});
return afterData;
};
this.axios = axiosBuild(axiosConfig);
}
myAxios.prototype.send = function(config) {
beforeSend.call(this, { cb: config.beforeSend, url: config.url });
var sendPromise = send.call(this, config);
var afterData = afterSend.call(this, {
promise: sendPromise,
cb: config.afterCb
});
return afterData;
};
function axiosBuild(config) {
const service = axios.create(config);
return service;
}
function beforeSend(config) {
this.axios.get("xxxurl" + config.url);
return config.cb.apply(this, arguments);
}
function send(config) {
var arg;
var state = {
get: function() {
var parse = qs(config.data);
return [config.url + parse];
},
post: function() {
return [config.url, config.data];
}
};
arg = state[config.type]();
return this.axios[config.type].apply(this, arg);
}
const service = axios.create(config);
return service;
}
function beforeSend(config) {
this.axios.get("xxxurl" + config.url);
return config.cb.apply(this, arguments);
}
function send(config) {
var arg;
var state = {
get: function() {
var parse = qs(config.data);
return [config.url + parse];
},
post: function() {
return [config.url, config.data];
}
};
arg = state[config.type]();
return this.axios[config.type].apply(this, arg);
}
状态模式
更好扩展（维护），也更易读
示例
var m=new superMary()
m.putAction(['run','shot'])
m.run()
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]()
})
}
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]()
})
}
职业：本科
0 条评论
下一页
