360前端星总结 - th是个小屁�?/title> <link rel="shortcut icon" href="/blog/favicon.ico">  <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/blog/css/thplayer.css">  <link rel="stylesheet" href="/blog/css/style.css"> <script src="js/jquery.js"></script> </head> <body>  <header class="site-header"> <div class="header-inside"> <div class="logo"> <a href="http://www.tianhao.site" rel="home"> <img src="img/timg.jpg" alt="th是个小屁�? height="60"> </a> </div> <a class="header-name" href="/blog/"> <span>th是个小屁�?/span> 的部落宅 </a>  <nav class="navbar">  <div class="collapse"> <ul class="navbar-nav"> <li> <a href="/blog/."> <i class="fa fa-home "></i> 首页 </a> </li> <li> <a href="/blog/archives"> <i class="fa fa-archive "></i> 归档 </a> </li> <li> <a href="/blog/about"> <i class="fa fa-user "></i> 关于 </a> </li> <li> <a href="/blog/project"> <i class="fa fa-folder-open "></i> 项目 </a> </li> <li> <a href="/blog/photo"> <i class="fa fa-photo "></i> 相册 </a> </li> <li> <a href="/blog/guestbook"> <i class="fa fa-edit "></i> 留言 </a> </li> <li> <a href="/blog/one"> <i class="fa fa-bicycle "></i> one </a> </li> <li> <a href="/blog/atom.xml"> <i class="fa fa-send "></i> RSS </a> </li> </ul> </div>  </nav> <div class="button-wrap"> <button class="menu-toggle">Primary Menu</button> </div> </div> </header>  <div class="content-area"> <div class="post">  <div class="container"> <article>  <div class="post-header"> <h1 class="entry-title"> 360前端星总结 </h1> </div> 　　　　　　　　<p class="a-posted-on">2017-03-31</p>  <div class="entry-content"> <p><img src="img/picimg.jpg" width="600" height="347"></p> <a id="more"></a> <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><hr> <p>3�?5号接�?60的前端星计划大作业，看到手势密码解锁这个题目，说实话，当时心里是偷着乐的，因为之前接触一个安卓的项目开发，小组做过这个需求，可是，事实上，对我这个javascript小白来说，具体功能都实现了，可是分数不是很高，由此可见，真的，代码质量不敢苟同。然后这几天利用课余时间对提交的代码进行了改善，现在，总结一下这次作业中关于原生javascript组件开发遇到的坑和对不成熟代码的改善。即使最终的结果可能不容乐观，不过，学到东西就是好的�?/p> <h2 id="对原生组件开发的一点想�?><a href="#对原生组件开发的一点想�? class="headerlink" title="对原生组件开发的一点想�?></a>对原生组件开发的一点想�?/h2><hr> <p>在写插件之前，我们应该先思考清楚，哪些参数是必须的，哪些是必须传递的，哪些方法是以后可以更改的，这些都需要考虑清楚�?br>　<br>基本结构</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">(function(){</div><div class="line"> window.thLock = function(){</div><div class="line"></div><div class="line"> };</div><div class="line"> thLock.prototype = {</div><div class="line"></div><div class="line"> };</div><div class="line">})();</div></pre></td></tr></table></figure> <p>首先，构造函数里要配置一些实例属性，然后原型模式用于定义方法和共享的属性�?/p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">window.thLock = function (obj) {</div><div class="line"> this.canvasWidth = obj.canvasWidth;</div><div class="line"> this.canvasHeight = obj.canvasHeight;</div><div class="line"> this.radius = obj.radius;</div><div class="line"> this.linecolor = obj.linecolor;</div><div class="line"> this.circlecolor = obj.circlecolor;</div><div class="line">　　　　　　　 ......</div><div class="line">}</div></pre></td></tr></table></figure> <p>共用的方法和属性可以放到prototype原型里�?/p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"> thLock.prototype = {</div><div class="line">drawCircle: function () {},</div><div class="line">drawLine: function () {},</div><div class="line">reSet: function() {},</div><div class="line">......</div><div class="line"> };</div></pre></td></tr></table></figure> <p>对每个function里面使用闭包的话，可以将this指向变量self�?/p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div></pre></td><td class="code"><pre><div class="line">drawCircle: function () {</div><div class="line"> var self = this;</div><div class="line"> for(var row = 0; row < this.n; row++){</div><div class="line"> for(var col = 0; col < this.n; col++){</div><div class="line"> // 计算圆心坐标</div><div class="line"> var circlePoint = {</div><div class="line"> X: (this.canvasWidth/(this.n*2) + this.canvasWidth*col/this.n),　　　//根据canvasWidth与n计算x,y坐标</div><div class="line"> Y: (this.canvasHeight/(this.n*2) + this.canvasHeight*row/this.n)</div><div class="line"> };</div><div class="line"> this.thcircle.push(circlePoint);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> //console.log(thcircle);</div><div class="line"> for (var i = 0; i < this.thcircle.length; i++){</div><div class="line"> circlePoint = this.thcircle[i];</div><div class="line"> this.thcanvas.fillStyle = "#c3c3c3";</div><div class="line"> this.thcanvas.beginPath();</div><div class="line"> this.thcanvas.arc(circlePoint.X, circlePoint.Y, this.radius, 0, Math.PI * 2, true);</div><div class="line"> this.thcanvas.closePath();</div><div class="line"> this.thcanvas.fill();</div><div class="line"> this.thcanvas.fillStyle = "#ffffff";</div><div class="line"> this.thcanvas.beginPath();</div><div class="line"> this.thcanvas.arc(circlePoint.X, circlePoint.Y, this.radius - 3, 0, Math.PI * 2, true);</div><div class="line"> this.thcanvas.closePath();</div><div class="line"> this.thcanvas.fill();</div><div class="line"> }</div><div class="line"></div><div class="line"> this.setPwd.addEventListener("click",function () {</div><div class="line"> self.testPwd.checked = false;</div><div class="line"> self.notice.innerHTML = "请输入手势密�?quot;;</div><div class="line"> },false);</div><div class="line"></div><div class="line"> this.testPwd.addEventListener("click",function () {</div><div class="line"> self.setPwd.checked = false;</div><div class="line"> self.notice.innerHTML = "验证密码";</div><div class="line"> },false);</div><div class="line"></div><div class="line"> this.canvas.addEventListener("touchstart", function (e) {</div><div class="line"> self.choosePwd(e.touches[0],self.thSelected,self.radius);</div><div class="line"> }, false);</div><div class="line"></div><div class="line"></div><div class="line"> this.canvas.addEventListener("touchmove", function (e) {</div><div class="line"> e.preventDefault();</div><div class="line"> self.choosePwd(e.touches[0],self.thSelected,self.radius);</div><div class="line"> self.thcanvas.clearRect(0,0,self.canvasWidth,self.canvasHeight);</div><div class="line"> self.drawLine(self.thcanvas,self.thcircle,self.thSelected,{　X:e.touches[0].pageX,　Y:e.touches[0].pageY　});</div><div class="line"> }, false);</div><div class="line"></div><div class="line"></div><div class="line"> this.canvas.addEventListener("touchend", function (e) {</div><div class="line"> self.thcanvas.clearRect(0,0,self.canvasWidth,self.canvasHeight);</div><div class="line"> self.drawLine(self.thcanvas,self.thcircle,self.thSelected,null);</div><div class="line"> var obj = document.getElementsByName('pwd');</div><div class="line"> //设置密码被选中</div><div class="line"> //这个地方用switch case 然后把判断的结果用变量保存一�?便于修改</div><div class="line"> if(self.setPwd.checked==true) {</div><div class="line"> if (self.thSelected.length == 0) {</div><div class="line"> self.reSet();</div><div class="line"> }</div><div class="line"> else if (self.thSelected.length < 5 && self.thSelected.length > 0) {</div><div class="line"> self.notice.innerHTML = '密码太短，至少需要５个点';</div><div class="line"> self.reSet();</div><div class="line"> } else if (typeof localStorage.temp == "undefined") {</div><div class="line"> localStorage.temp = self.thSelected;</div><div class="line"> self.notice.innerHTML = "请再次输入手势密�?quot;;</div><div class="line"> self.reSet();</div><div class="line"> }</div><div class="line"> else if (localStorage.temp == self.thSelected) {</div><div class="line"> localStorage.pwd = self.thSelected;</div><div class="line"> self.notice.innerHTML = "密码设置成功";</div><div class="line"> self.reSet();</div><div class="line"> localStorage.removeItem("temp");</div><div class="line"> } else {</div><div class="line"> self.notice.innerHTML = "两次输入不一�?lt;/br>请重新设�?quot;;</div><div class="line"> self.reSet();</div><div class="line"> localStorage.removeItem("temp");</div><div class="line"> }</div><div class="line"> }</div><div class="line"> //验证密码被选中</div><div class="line"> else if(self.testPwd.checked==true){</div><div class="line"> if (self.thSelected.length == 0) {</div><div class="line"> self.reSet();</div><div class="line"> } else if(localStorage.pwd == self.thSelected){</div><div class="line"> self.notice.innerHTML = "密码正确�?quot;;</div><div class="line"> self.reSet();</div><div class="line"> }else{</div><div class="line"> self.notice.innerHTML = "输入的密码不正确";</div><div class="line"> self.reSet();</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }, false);</div><div class="line">},</div></pre></td></tr></table></figure> <p>路漫漫其修远�?吾将上下而求索，最近看到一个业界大牛说的，学习编码的道路上没有捷径�?strong>无它，唯手熟尔�?/strong>　这次的作业没有达到理想的分数，只能说明一个问题，自己对代码的质量没有一定认识，只想着实现了功能，不注重设计模式，踩了好多坑�?/p> </div> </article> </div>  <div class="container" > <ul class="pager"> <li class="previous"> <a href="/blog/2017/03/15/Javascript闭包和this学习笔记/" rel="prev">下一�?/a> </li> <li class="next"> <a href="/blog/2017/04/02/�?thplayer正式完工�?" rel="prev">上一�?/a> </li> </ul> </div> 　　　　 <div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div> <script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script> <script> var cloudTieConfig = { url: document.location.href, sourceId: "", productKey: "df8ef703a5a1404fb862cb96bfb8272c", target: "cloud-tie-wrapper" }; var yunManualLoad = true; Tie.loader("aHR0cHM6Ly9hcGkuZ2VudGllLjE2My5jb20vcGMvbGl2ZXNjcmlwdC5odG1s", true); </script> 　　　　 </div> </div> 　　 <div id="rocket-to-top"> <div class="level-2"></div> <div class="level-3"></div> </div> <script src="js/top.js"></script> <script type="text/javascript" src="js/jquery.js"></script>   <footer class="site-info"> <p> <span>th是个小屁�?© 2017</span> <span class="split">|</span> <span>th是个小屁孩的技术小�?/span> </p> <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> 本站总访问量<span id="busuanzi_value_site_pv"></span>�? 本站访客�?span id="busuanzi_value_site_uv"></span>人次 </footer>   <script src="/blog/js/app.js"></script>  <script type="text/javascript"> var duoshuoQuery = {short_name:'th720309'}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>  </body> </html>