前言
3月25号接到360的前端星计划大作业,看到手势密码解锁这个题目,说实话,当时心里是偷着乐的,因为之前接触一个安卓的项目开发,小组做过这个需求,可是,事实上,对我这个javascript小白来说,具体功能都实现了,可是分数不是很高,由此可见,真的,代码质量不敢苟同。然后这几天利用课余时间对提交的代码进行了改善,现在,总结一下这次作业中关于原生javascript组件开发遇到的坑和对不成熟代码的改善。即使最终的结果可能不容乐观,不过,学到东西就是好的。
对原生组件开发的一点想法
在写插件之前,我们应该先思考清楚,哪些参数是必须的,哪些是必须传递的,哪些方法是以后可以更改的,这些都需要考虑清楚。
基本结构
(function(){
window.thLock = function(){
};
thLock.prototype = {
};
})();
首先,构造函数里要配置一些实例属性,然后原型模式用于定义方法和共享的属性。
window.thLock = function (obj) {
this.canvasWidth = obj.canvasWidth;
this.canvasHeight = obj.canvasHeight;
this.radius = obj.radius;
this.linecolor = obj.linecolor;
this.circlecolor = obj.circlecolor;
......
}
共用的方法和属性可以放到prototype原型里。
thLock.prototype = {
drawCircle: function () {},
drawLine: function () {},
reSet: function() {},
......
};
对每个function里面使用闭包的话,可以将this指向变量self。
drawCircle: function () {
var self = this;
for(var row = 0; row < this.n; row++){
for(var col = 0; col < this.n; col++){
// 计算圆心坐标
var circlePoint = {
X: (this.canvasWidth/(this.n*2) + this.canvasWidth*col/this.n), //根据canvasWidth与n计算x,y坐标
Y: (this.canvasHeight/(this.n*2) + this.canvasHeight*row/this.n)
};
this.thcircle.push(circlePoint);
}
}
//console.log(thcircle);
for (var i = 0; i < this.thcircle.length; i++){
circlePoint = this.thcircle[i];
this.thcanvas.fillStyle = "#c3c3c3";
this.thcanvas.beginPath();
this.thcanvas.arc(circlePoint.X, circlePoint.Y, this.radius, 0, Math.PI * 2, true);
this.thcanvas.closePath();
this.thcanvas.fill();
this.thcanvas.fillStyle = "#ffffff";
this.thcanvas.beginPath();
this.thcanvas.arc(circlePoint.X, circlePoint.Y, this.radius - 3, 0, Math.PI * 2, true);
this.thcanvas.closePath();
this.thcanvas.fill();
}
this.setPwd.addEventListener("click",function () {
self.testPwd.checked = false;
self.notice.innerHTML = "请输入手势密码";
},false);
this.testPwd.addEventListener("click",function () {
self.setPwd.checked = false;
self.notice.innerHTML = "验证密码";
},false);
this.canvas.addEventListener("touchstart", function (e) {
self.choosePwd(e.touches[0],self.thSelected,self.radius);
}, false);
this.canvas.addEventListener("touchmove", function (e) {
e.preventDefault();
self.choosePwd(e.touches[0],self.thSelected,self.radius);
self.thcanvas.clearRect(0,0,self.canvasWidth,self.canvasHeight);
self.drawLine(self.thcanvas,self.thcircle,self.thSelected,{ X:e.touches[0].pageX, Y:e.touches[0].pageY });
}, false);
this.canvas.addEventListener("touchend", function (e) {
self.thcanvas.clearRect(0,0,self.canvasWidth,self.canvasHeight);
self.drawLine(self.thcanvas,self.thcircle,self.thSelected,null);
var obj = document.getElementsByName('pwd');
//设置密码被选中
//这个地方用switch case 然后把判断的结果用变量保存一下 便于修改
if(self.setPwd.checked==true) {
if (self.thSelected.length == 0) {
self.reSet();
}
else if (self.thSelected.length < 5 && self.thSelected.length > 0) {
self.notice.innerHTML = '密码太短,至少需要5个点';
self.reSet();
} else if (typeof localStorage.temp == "undefined") {
localStorage.temp = self.thSelected;
self.notice.innerHTML = "请再次输入手势密码";
self.reSet();
}
else if (localStorage.temp == self.thSelected) {
localStorage.pwd = self.thSelected;
self.notice.innerHTML = "密码设置成功";
self.reSet();
localStorage.removeItem("temp");
} else {
self.notice.innerHTML = "两次输入不一致</br>请重新设置";
self.reSet();
localStorage.removeItem("temp");
}
}
//验证密码被选中
else if(self.testPwd.checked==true){
if (self.thSelected.length == 0) {
self.reSet();
} else if(localStorage.pwd == self.thSelected){
self.notice.innerHTML = "密码正确!";
self.reSet();
}else{
self.notice.innerHTML = "输入的密码不正确";
self.reSet();
}
}
}, false);
},
路漫漫其修远兮 吾将上下而求索,最近看到一个业界大牛说的,学习编码的道路上没有捷径,无它,唯手熟尔。 这次的作业没有达到理想的分数,只能说明一个问题,自己对代码的质量没有一定认识,只想着实现了功能,不注重设计模式,踩了好多坑。