掐指一算,再过几天我做前端就满三年了。日子真的不耐过,时间过去
了,但是自我感觉技术还是很low,页面可以画、业务可以做、组件可以封
装等等,但是我感觉我思想上还处于一个很初级的水平,很想挣脱这种困
境。最近重新学习一遍张容铭的javascript设计模式,希望对自己能有所提
升。为了让我的学习留下一点痕迹,更重要的是担心看了就忘,所以,就记
录一下学习的过程以及在学的过程中自己的一些领悟。
开始吧,希望自己能坚持下来!
一、函数直接声明
function checkName(){
//验证姓名
}
function checkEmail(){
//验证邮箱
}
function checkPassword(){
//验证密码
}
使用直接声明方式定义函数,容易造成全局变量的污染,如果是团队合作
容易造成代码的覆盖。不建议使用。
二、函数表达式声明
var checkName = function (){
//验证姓名
}
var checkEmail = function (){
//验证邮箱
}
var checkPassword = function (){
//验证密码
}
函数表达式方式定义变量跟函数直接声明差不多,也声明了3个全局 变
量,造成了全局的污染,容易覆盖代码,不建议使用。
三、对象收编变量(1)
var checkObject = {
checkName: function (){
//验证姓名
},
checkEmail : function (){
//验证邮箱
},
checkPassword : function (){
//验证密码
}
}
checkObject.checkName()
使用一个对象承载所有的方法和属性,使用方法时,通过点语法实现调用
四、对象收编变量(2)
var checkObject = function(){}
checkObject.checkName = function(){}
checkObject.checkEmail = function(){}
checkObject.checkPassword = function(){}
var aa = checkObject ()
aa.checkName()
如果其他人也许使用checkName这样的方法,但是调用checkObject函
数,对应的方法是不能继承下来。所以我们学习下一种方法。
五、对象的返回实现方法的“继承”
var checkObject = function(){
return{
checkName:function(){
},
checkEmail:function(){
},
checkPassword:function(){
}
}
}
var aa = checkObject()
aa.checkName()
这里所说的继承不是真正意义上的继承,只是简单的通过调用函数返回所有的方法。
六、构造函数的方式实现方法的“继承”
var checkObject = function(){
this.checkName = function(){
}
this.checkEmail = function(){
}
this.checkPassword = function(){
}
}
var aa = new checkObject()
aa.checkName()
所有的方法都绑定到this上,每次通过new的方式创建一个实例,都会重新
创建一个新的对象,新的对象都会对this上的属性、方法实现复制,然而
这样做是很消耗的,我们可以做进一步优化
七、使用prototype实现继承
var CheckObject = function(){}
CheckObject.prototype.checkName = function(){}
CheckObject.prototype.checkEmail = function(){}
CheckObject.prototype.checkPassword = function(){}
var aa = new CheckObject()
aa.checkName()
把方法注册到构造函数的prototype原型上,就不会每次new 出来的实例把
构造函数的方法复制到新的实例对象上,实例的方法都是指向同一个,
即为构造函数的原型
还可以用以上的形式来写:
var CheckObject = function(){}
CheckObject.prototype = {
checkName:function(){},
checkName:function(){},
checkPassword:function(){}
}
var aa = new CheckObject()
aa.checkName()
这里要注意一点,2种方法不能混着写,后一种方法相当是重写了构造函
数的prototype属性,也会把他之前默认的方法,属性覆盖。
八、实现链式编程
var CheckObject = function(){}
CheckObject.prototype = {
checkName:function(){
return this
},
checkName:function(){
return this
},
checkPassword:function(){
return this
}
}
var aa = new CheckObject()
aa.checkName().checkEmail().checkPassword()
在方法的最后返回当前调用的实例this,就可以实现链式编程啦!
九、动态添加属性或方法
Function.prototype.addMethod = function(name,fn){
this[name] = fn
或者
this.prototype.[name] = fn
}
var methods = function(){}
// 或者
var methods = new Function()
methods.addMethod('checkName',function(){
})
methods.checkName()
给Function的prototype抽象出一个统一的方法,用来给实例添加方法或者
属性,这样一来,就可以很方便添加定制化的方法啦。
这个方法我觉得特别有用,比如某天我封装了一个牛逼轰轰的插件,适应
大多数的情况。突然有一天,某种情况下需要有一个特别的处理,但是此
时如果要对这种特别的情况进行处理,还要对原来的代码进行各种骚操作
的适配,这种做法是很难受的。如果我给这个类暴露一个用于添加方法或
属性的方法,我们就可以add一个方法,用于处理这种特殊的情况。