在此记录一些小的功能demo实现过程的记录。**这些demo都是根据网上收集或者自己突发奇想实现的功能。
前天实现了一个简单的抽奖功能，今天来复个盘。
image
这个功能很简单，就是点击之后，轮盘旋转，旋转停止弹出抽奖结果。我从两个角度重新写了一遍，一个是面向过程的方法，一步一步实现，这种偏向正常人的思维。再一个实现方法是面向对象的方法，这个对我来说也是比较新鲜的，以前虽然听过，但很少实操过。
第一个面向过程编程的方式中，对于我来说重点有以下几个：
-
点击让轮盘随机旋转，旋转几圈，角度怎么随机？
-
旋转通过什么实现？
-
如何判断轮盘停止之后获得什么奖项？
实现过程：
第一个问题通过Math.random()来实现;
第二个问题通过css3的旋转属性实现；
第三个问题通过if else判断旋转角度即可，再通过函数封装一下就好了；
var deg = Math.random() * 360;
难点：
-
点击多次就有问题，自己知道要等旋转结束才能再点击
-
什么时候判断旋转结束
-
如果别人点击多次如何避免出现问题
解决：
-
通过一个监听事件WebkitTransitionEnd监听轮盘旋转结束，这个都忘记好久了。
-
通过给程序加锁，可以避免多次点击多次产生执行事件，导致错误。也就是在锁开的点击就生效，点击事件执行，然后锁立马关上，等到监听事件监听到轮盘旋转结束，再打开锁。
最后还有一个问题，就是第二次点击，轮盘不会旋转设置好的8圈，而是转一圈以内的角度。这个问题在于，第一次旋转结束的状态角度跟第二次随机生成的状态角度相差不过360度，比如：第一次随机旋转8圈+45度 停止，第二次随机了一个8圈+90度，那么两次的度数相差45度，对于旋转属性来说，第二次变换只想对于上一次的状态变化，所以并不会旋转8圈，而是转45度。
所以在每次旋转结束，都要隐式的把轮盘的状态归零。
ele.style.transform = `rotate(${deg}deg)`;
用面向对象的方法实现有几点要记录的：
整体思路：
-
轮盘对象
-
按钮对象
-
轮盘有监听旋转停止功能
-
轮盘有旋转的功能
-
轮盘有奖项属性，并且有判断奖项的功能
-
轮盘有初始角度
-
轮盘有旋转结束的时间点
-
按钮有被点击的功能
-
按钮点击有生成旋转角度的功能
-
按钮有控制轮盘是否符合旋转要求的能力(判断轮盘是否旋转结束)
在实现过程中，除了有些地方需要记录this，写法上跟面向过程有些不一样，其他的功能都跟面向过程实现方法一致。只是要多熟悉一下这种感觉，不过确实挺好。
最后通过一个立即执行函数封闭一下作用域，不让外界影响程序。并立即执行函数中传递了window，绑定了一个对象，把它暴露出去，这个对象是外界定制轮盘旋转多少圈的，如果需要也可以定制一些其他功能需求。
image
网友评论