对原生组件开发的一点想法

前言

---

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 = '密码太短，至少需要５个点';                            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);            },

路漫漫其修远兮 吾将上下而求索，最近看到一个业界大牛说的，学习编码的道路上没有捷径，无它，唯手熟尔。　这次的作业没有达到理想的分数，只能说明一个问题，自己对代码的质量没有一定认识，只想着实现了功能，不注重设计模式，踩了好多坑。