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

前言

---

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);
            },

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