JavaScript设计模式学习

159 阅读2分钟

第一章

几种函数编写方式

第一种

function checkOne(){
    console.log('1111')
}
function checkTwo(){
    console.log('2222')
}
function checkThree(){
    console.log('3333')
}

不足:创建了很多全局变量,团队开发中很容易出现覆盖代码的可能,可以放在一个变量里面保存,减少被覆盖或覆盖的风险。

第二种 使用对象收编变量

var obj = {
    checkOne: function(){
        console.log('1111')
    },
    checkTwo: function(){
        console.log('2222')
    },
    checkThree: function(){
        console.log('3333')
    }
}

or

var obj1 = function(){}
obj1.checkOne = function () {
    console.log('1111')
}
obj1.checkTwo = function () {
    console.log('2222')
}
obj1.checkThree = function () {
    console.log('3333')
}

let obj2 = new obj1()

不足: 别人想使用我的方法就麻烦了,因为这个对象不能复制一份或者说这个对象类在new创建新对象的时候,新对象不能继承这些方法

第三种

如果想要简单的复制一下

var obj = function () { return { checkOne: function(){ console.log('1111') }, checkTwo: function(){ console.log('2222') }, checkThree: function(){ console.log('3333') }, } }

这样每次调用这个函数都返回了一个新对象,每个人的使用就互不影响了

let a = obj() a.checkOne()

不足:虽然通过创建了新对象完成了需求,但是不是真正意义上类的创建方式,并且创建的对象a和obj没有任何关系

第四种:类

var obj = function () {
    this.checkOne = function(){
        console.log('1111')
    },
    this.checkTwo = function(){
        console.log('2222')
    },
    this.checkThree = function(){
        console.log('3333')
    }
}

let obj1= new obj()

这样就是一个类了,每一次通过new关键字创建新对象的时候,新创建的对象都会对类的this上的属性进行复制 不足:每一次都会创建一次这些函数,消耗大了

第五种:检测类

var obj = function () {}
obj.prototype.checkOne = function(){
    console.log('1111')
},
obj.prototype.checkTwo = function(){
    console.log('2222')
},
obj.prototype.checkThree = function(){
    console.log('3333')
}

or

var obj = function () {}
obj.prototype = {
    checkOne: function(){
        console.log('1111')
    },
    checkTwo: function(){
        console.log('2222')
    },
    checkThree: function(){
        console.log('3333')
    }
}

这两种不能混着用,后面的会覆盖掉之前的方法

let a = new obj()
a.checkOne()
a.checkTwo()
a.checkThree()

不足:a对象写了3次

第六种

var obj = function () {}
obj.prototype = {
    checkOne: function(){
        console.log('1111')
        return this
    },
    checkTwo: function(){
        console.log('2222')
        return this
    },
    checkThree: function(){
        console.log('3333')
        return this
    }
}
let a = new obj()
a.checkOne().checkTwo().checkThree()

实现链式调用

第七种

// 假如需要给每个函数都添加一个检测邮箱的方法 // 可以这样做:

Function.prototype.checkEmail = function(){}

使用的时候:

var f = function () {}
f.checkEmail()

// or

var f = new Function()
f.checkEmail()

但是这样给Function添加的的方式污染了原生的Function,别人创建的函数也会被污染,造成不必要的开销

第八种

可以抽象一个统一添加方法的功能方法

Function.prototype.addMethod = function (name, fn) {
    this[name] = fn
}

var method = new Function()
or
var method =function () {}

method.addMethod('checkEmail', function(){
    console.log('email')
    return this // 链式调用
})
method.checkEmail()

上方调用的时候使用的是函数式的调用方式,可以更改如下:

Function.prototype.addMethod = function (name, fn) {
    this.prototype[name] = fn
    return this
}

var method = function () {}
method.addMethod('checkEmail', function(){
    conosle.log('email')
}).addMethod('checkName', function(){
    conosle.log('name')
})
let m = new method()

这时候m只能通过new方式了

————来自《JavaScript设计模式》张容铭 学习