CSDN博客

首页
博客专栏
博客专家
行家
观点
排行榜
我的博客

帮助订阅

{"code":1,"message":"","data":{"id":130783,"article":{"id":31629,"publicAccount":{"id":458,"name":"前端大全","weixin":"FrontDev","intro":"","body":"","image":"http://ss.csdn.net/p?http://wx.qlogo.cn/mmhead/Q3auHgzwzM5qjQiaudDrho224UU1BI7Uu4pqUWWX9dI7FKibUrsdzqZQ/0","href":null,"biz":"MzAxODE2MjM1MA==","category":{"id":7,"keyName":"web","displayName":"前端","createdAt":1487578438000,"updatedAt":1487578438000,"status":1},"createdAt":1496221296000,"updatedAt":1496221296000,"status":1,"recommend":0,"qrcode":"http://mp.weixin.qq.com/mp/qrcode?scene=10000001&size=120&__biz=MzAxODE2MjM1MA==&mid=2651552225&idx=1&sn=ed5473f61fada06eef274a1ee0d71747","articleCount":0,"viewCount":0},"category":{"id":7,"keyName":"web","displayName":"前端","createdAt":1487578438000,"updatedAt":1487578438000,"status":1},"biz":"MzAxODE2MjM1MA==","mid":"2651550838","idx":2,"sn":"561f967edd33f16fd8105e282615dfc2","author":"伯乐在线/侯志强","content":"","contentUrl":"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651550838&idx=2&sn=561f967edd33f16fd8105e282615dfc2&scene=27#wechat_redirect","cover":"http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib3YdJucSKBe5nr8BIqXLLUC1icDwTHgFiardnJNgHicJbd6sT7mR9g6yGficln16K500lb1PXzW3mkQfA/0?wx_fmt=jpeg","digest":"既然是要编写插件。那么叫做“插件”的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率。","isMulti":0,"sourceUrl":"","title":"JS 跑马灯抽奖活动代码解析与优化（2）","description":null,"datetime":1462971244000,"status":1,"viewCount":27,"praiseCount":0,"commentCount":0,"createdAt":1496221416000,"updatedAt":1496221416000,"origin":"proxy","recommend":0},"url":"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651550838&idx=2&sn=561f967edd33f16fd8105e282615dfc2&scene=27#wechat_redirect","title":"JS 跑马灯抽奖活动代码解析与优化（2）","source":"<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"color: rgb(255, 41, 65); font-size: 14px; max-width: 100%; line-height: 22.4px; box-sizing: border-box !important; word-wrap: break-word !important;\">（点击</span><span style=\"font-size: 14px; max-width: 100%; line-height: 22.4px; color: rgb(0, 128, 255); box-sizing: border-box !important; word-wrap: break-word !important;\">上方公众号</span><span style=\"color: rgb(255, 41, 65); font-size: 14px; max-width: 100%; line-height: 22.4px; box-sizing: border-box !important; word-wrap: break-word !important;\">，可快速关注）</span></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></p> \n<blockquote style=\"line-height: 25.6px; white-space: normal; max-width: 100%; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"> \n <p style=\"max-width: 100%; min-height: 1em; white-space: pre-wrap; line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"font-size: 14px; line-height: 25.6px;\">作者：伯乐在线专栏作者 - zhiqiang21</span></p> \n <p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; font-size: 16.1905px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 14px; box-sizing: border-box !important; word-wrap: break-word !important;\">链接：http://web.jobbole.com/86020/</span></p> \n <p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; font-size: 16.1905px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 14px; text-decoration: underline; box-sizing: border-box !important; word-wrap: break-word !important;\"><a href=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402764500&idx=1&sn=cfcc178c7718d548b7cdc04758502bd9&scene=21#wechat_redirect\" target=\"_blank\" data_ue_src=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402764500&idx=1&sn=cfcc178c7718d548b7cdc04758502bd9&scene=21#wechat_redirect\" style=\"color: rgb(0, 128, 255); line-height: 25.6px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">点击 → 了解如何加入专栏作者</a></span></p> \n</blockquote> \n<p style=\"line-height: 25.6px; white-space: normal;\"><br></p> \n<p>既然是要编写插件。那么叫做“插件”的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率。那么叫做插件的东西应该具有哪些基本特征呢？让我们来总结一下：</p> \n<p><br></p> \n<p><span style=\"color: rgb(255, 0, 0);\"><strong>1.JavaScript 插件一些基本特征：</strong></span></p> \n<p><br></p> \n<ol class=\" list-paddingleft-2\" style=\"list-style-type: decimal;\"> \n <li><p>配置一定要简单</p></li> \n <li><p>插件中定义的变量不污染全局变量；</p></li> \n <li><p>同一段代码可以在不同的地方复用；</p></li> \n <li><p>用户可以自定义自己功能参数；</p></li> \n <li><p>具有销毁变量和参数的功能；</p></li> \n</ol> \n<p><br></p> \n<p>如果按照以上的几个特征来写插件的话，我们可以总结出一个基本的代码结构，我们一个一个的来看：</p> \n<p><br></p> \n<p><strong>1.插件配置要尽可能的简单</strong></p> \n<p><br></p> \n<p>html中配置容器节点</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">//</span>这里的<span class=\"crayon-e \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">node-type</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">=</span><span class=\"crayon-s \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">\"reward-area\"</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span>是标识我们插件的容器节点</span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-r \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\"><div </span><span class=\"crayon-e \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">class</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">=</span><span class=\"crayon-s \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">\"re-area\"</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">node-type</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">=</span><span class=\"crayon-s \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">\"reward-area\"</span><span class=\"crayon-r \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\"> ></span></span></p> \n</blockquote> \n<p><br></p> \n<p>DOM加载完成以后初始化插件</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//这里的 test 是代表容器的 class</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">window</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">init</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">($(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'[node-type=reward-area]'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">));</span></span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">});</span></p> \n</blockquote> \n<p><br></p> \n<p><strong>2.插件中定义的变量不污染全局变量</strong></p> \n<p><br></p> \n<p>JavaScript 具有块级作用域的标识符就是function了。那我们怎么声明我们的变量才可以使它不污染全局变量呢？</p> \n<p>这里我们需要用到的一个 JavaScript 函数的自执行的知识点。代码如下：</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(){</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">// do something</span></span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">})();</span></p> \n</blockquote> \n<p><br></p> \n<p><strong>3.在不同的地方复用功能代码</strong></p> \n<p><br></p> \n<p>这就要用到我们面向对象的知识点，把我们的功能代码抽象成对象，在我们需要使用的时候，实例化对象就可以了。那我们接着第二部的代码继续写，</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//</span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">($){</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">// 创建功能对象</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">// do something</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">init</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//根据不同的容器实例化不同的对象</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">each</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">new</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">($(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">));</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">});</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">window</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">})(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">jQuery</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n</blockquote> \n<p><br></p> \n<p><strong>4.用户可以自定义功能参数</strong></p> \n<p><br></p> \n<p>首先我们应该有默认的参数设定，比如下面这样</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//</span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">($){</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">// 创建功能对象</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">// 自定义的参数</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">setting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">liAutoPlay</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">false</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">  </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//周围的灯是否自动旋转</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">roLiSpeed</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">100</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//灯旋转的速度ms</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">roPrSpeed</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">200</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//奖品旋转速度ms</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">liDirection</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">true</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">  </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//旋转方向 true  正方向   false  反方向</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">randomPrize</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">false</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">  </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//空格是否随机选取</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">init</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//根据不同的容器实例化不同的对象</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">each</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">new</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">($(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">));</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">});</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">window</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">})(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">jQuery</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n</blockquote> \n<p><br></p> \n<p>其实这样写的话，使用者已经可以修改我们的 JavaScript 文件来完成自定义了。但是为了能够让我们的差价足够的好用，比如说，我们的使用者一点儿都不懂 js 呢？该怎么办？</p> \n<p>这样我们可以把这些参数用自定义属性配置在 html中,如下：</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-r \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important;\"><div </span><span class=\"crayon-e \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">class</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">=</span><span class=\"crayon-s \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">\"re-area\"</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">node-type</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">=</span><span class=\"crayon-s \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">\"reward-area\"</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">data-setting</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">=</span><span class=\"crayon-s \" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'{</span></span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">    \"liAutoPlay\":false,</span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">    \"roLiSpeed\":100,</span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">    \"roPrSpeed\":200,</span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">    \"liDirection\":true,</span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-s \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">    \"randomPrize\":false}'</span><span class=\"crayon-r \" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">></span></span></p> \n</blockquote> \n<p><br></p> \n<p>这样用户只需要在 html的节点中就可以配置当前容器运行的参数。这样的好处还可以使同一页面上的不同容器，可以单独的配置参数，减少耦合。</p> \n<p><br></p> \n<p>那么在 js 中我们该怎么获取这些参数呢？在上面的代码中，已经有了功能对象函数。那么我们想扩展对象方法来获取用户的自定义参数，怎么办呢？我们一般使用prototype的东西来扩展我们已有对象的方法，代码如下：</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//</span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">($){</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">// 创建功能对象</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">// 自定义的参数</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">setting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">liAutoPlay</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">false</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">  </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//周围的灯是否自动旋转</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">roLiSpeed</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">100</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//灯旋转的速度ms</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">roPrSpeed</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">200</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//奖品旋转速度ms</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">liDirection</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">true</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">  </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//旋转方向 true  正方向   false  反方向</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">randomPrize</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">false</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">  </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//空格是否随机选取</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//这里调用对象的获取用户自定义参数的方法，并且将默认参数合并</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">extend</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">setting</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">getSettingUser</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">());</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">prototype</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//扩展获取用户自定义参数的方法</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">getSettingUser</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightArea</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">attr</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'data-setting'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">if</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> && </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> !== </span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">''</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">return</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">parseJSON</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">else</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">return</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{};</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span>；</span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">init</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//根据不同的容器实例化不同的对象</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">each</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">new</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">($(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">));</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">});</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">window</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">})(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">jQuery</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n</blockquote> \n<p><br></p> \n<p><strong>5.销毁变量和参数的功能；</strong></p> \n<p><br></p> \n<p>最后一个就是我们的插件应该具有销毁自身变量和参数的功能。我们该怎么写呢？还是在上面的代码基础上继续扩展功能对象的可调用方法，代码如下：</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightRotate</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">prototype</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//扩展获取用户自定义参数的方法</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">getSettingUser</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightArea</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">attr</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'data-setting'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">if</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> && </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> !== </span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">''</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">return</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">parseJSON</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">userSetting</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">else</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">return</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{};</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">},</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//销毁对象参数</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">destory</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightArea</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">off</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">();</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">closeAnimation</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">();</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">rewardTimer</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">null</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span>；</span></p> \n</blockquote> \n<p><br></p> \n<p>由以上我们的内容我们可以大概了解了一个成熟的插件应该具有的基本功能。</p> \n<p><br></p> \n<p><span style=\"color: rgb(255, 0, 0);\"><strong>2.插件开发和优化示例</strong></span></p> \n<p><br></p> \n<p>刚好这个项目是在春节放假前的一个紧急的项目，当时为了赶进度就没有详细思考自己的代码结构，这样野味自己的后续优化提供了机会。</p> \n<p><br></p> \n<p>由上一节介绍的定时器的内容可以知道 JavaScript 是单线程的。所以</p> \n<p><br></p> \n<blockquote> \n <p>如果一段代码运行效率很低，就会影响后续代码的执行。所以对于 JavaScript ，代码优化是必须的。</p> \n</blockquote> \n<p><br></p> \n<p>先来看看我们的“跑马灯”插件应该具有哪些功能：</p> \n<p><br></p> \n<ol class=\" list-paddingleft-2\" style=\"list-style-type: decimal;\"> \n <li><p>能够控制灯是否自动播放；</p></li> \n <li><p>灯的旋转方向可以控制；</p></li> \n <li><p>灯的旋转速度可以控制；</p></li> \n <li><p>奖品的旋转速度可以控制；</p></li> \n</ol> \n<p><br></p> \n<p>这里就不详细的介绍这些功能点的开发过程，仅仅介绍优化过程。如果有兴趣可以看我文章最后附上的源代码地址，进行下载阅读。</p> \n<p><br></p> \n<p><strong>1.“顺序”获取旋转灯代码的优化</strong></p> \n<p><br></p> \n<p>因为周围的灯我是使用绝对定位来做的，所以我需要“顺序”的获取他们的列表，然后操作。</p> \n<p><br></p> \n<p>首先获取 DOM节点。</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//获取外围的灯，可以看到我这里使用的选择器多了一个 select，是为了获取当前容器下的某些元素，避免有多个容器存在时冲突</span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">topLight</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'[node-type=re-top]'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">find</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'span'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">rightLight</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'[node-type=re-right]'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">find</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'span'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">bottomLight</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'[node-type=re-bottom]'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">find</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'span'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">leftLight</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'[node-type=re-left]'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">select</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">find</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'span'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n</blockquote> \n<p><br></p> \n<p>然后就应该“顺序”的获取“灯”节点的 DOM 元素列表。</p> \n<p><br></p> \n<p>我的第一版是这样做的：</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">Zepto</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">topLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important;\">each</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">      </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">push</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">});</span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">Zepto</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">rightLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">each</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">      </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">push</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">});</span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">for</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">j</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">bottomLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">length</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> - </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">1</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">j</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> >= </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">0</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">j</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">--</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">push</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">bottomLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">[</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">j</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">]);</span></span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">for</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">m</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">leftLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">length</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> - </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">1</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">m</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> >= </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">0</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">m</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">--</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">       </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">push</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">leftLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">[</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">m</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">]);</span></span></p> \n <p><span style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></p> \n</blockquote> \n<p><br></p> \n<p>因为“下”和“左”方向的灯是需要倒序的，所以我使用了两个倒序的 for循环，其实当循环出现的时候，我们都应该思考我们的代码是否有可优化的空间。</p> \n<p><br></p> \n<p>优化后的代码是这样子的，在这里我减少了4次循环的使用</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">[];</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">bottomRever</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">    </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">leftRever</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">bottomRever</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">Array</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">from</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">bottomLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">reverse</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">();</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">leftRever</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">Array</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">from</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">leftLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">reverse</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">();</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">Array</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">from</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">topLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">concat</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">Array</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">from</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">rightLight</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">));</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">concat</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">bottomRever</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">concat</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">leftRever</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">     </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n</blockquote> \n<p><br></p> \n<p>列表倒序我使用了原生 Array对象的reverse方法。</p> \n<p><br></p> \n<p><strong>2.使用“闭包”优化顺序循环播放</strong></p> \n<p><br></p> \n<p>为了能够使我们的“灯”顺序的跑起来，第一版的思路是：</p> \n<p><br></p> \n<blockquote> \n <p>给每一个“灯”（注意，这里是每一个，罪过…罪过…）定义一个setTimeout()，执行时间就是数序的加入 js 执行队列中去。</p> \n</blockquote> \n<p><br></p> \n<p>代码是下面这样子的：</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">zepto_light</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">Zepto</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">changeTime</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">100</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightLength</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">zepto_light</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">length</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">totleTime</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">changeTime</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> * </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightLength</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">lightOpen</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">for</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">0</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> < </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightLength</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">++</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">temp</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightTimer</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">setTimeout</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                            </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">if</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">stopAnimation</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> === </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">false</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                                </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">Zepto</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">zepto_light</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">removeClass</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'light_open'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                                </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">Zepto</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">zepto_light</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">[</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">]).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">addClass</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">\"light_open\"</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">else</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                                </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">return</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">},</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">changeTime</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> * </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">})(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n</blockquote> \n<p><br></p> \n<p>这样子写的缺点很明显：如果我有100个“灯”那么就会在当前的 js 执行队列中加入100个setTimeout()，再次强调的是我这里又使用了for循环，在时间复杂度上又增加了。代码的执行效率又下降了。</p> \n<p><br></p> \n<p>后来思考了下，JavaScript 中“闭包”符合我当前的使用场景，就想着用闭包优化一下，优化后代码如下：</p> \n<p><br></p> \n<blockquote> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightRun</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">: </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">tempFunc</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">getLightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">();</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightLength</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">length</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">0</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">return</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">function</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">()</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightArea</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">removeClass</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">'light_open'</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">$(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightList</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">[</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">],</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">LightArea</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">).</span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">addClass</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-s\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;\">\"light_open\"</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-o\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">++</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-c\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(153, 153, 153) !important; font-style: italic !important;\">//使一轮循环结束后能够继续下次循环</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-st\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">if</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> === </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightLength</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">)</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">{</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                        </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">i</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-cn\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;\">0</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">;</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                    </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">                </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">};</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n <p><span style=\"font-size: 12px;\"> </span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-t\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;\">var</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightRunFunc</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">tempFunc</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">();</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-e\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;\">lightRunFunc</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">();</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">            </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightInterVal</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> = </span><span class=\"crayon-r\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;\">setInterval</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">(</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">lightRunFunc</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">,</span><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\"> </span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">_this</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">setting</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">.</span><span class=\"crayon-v\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;\">roLiSpeed</span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">);</span></span></p> \n <p><span style=\"font-size: 12px;\"><span class=\"crayon-h\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;\">        </span><span class=\"crayon-sy\" style=\"border: 0px; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;\">}</span></span></p> \n</blockquote> \n<p><br></p> \n<p>由以上的代码可以很明显的发现两个优点：第一，就是减少了 for循环的使用，降低了代码的时间复杂度，第二就是，每次我仅仅在当前代码执行的队列中创建一个setInterval()。减小了执行队列的复杂度。</p> \n<p><br></p> \n<p>到这里关于“跑马灯”插件的代码解析详和优化就已经完了。详细的代码和使用文档（https://github.com/zhiqiang21/WebComponent/tree/master/light-rotate）。如果有什么问题可以随时在 github 上反馈给我。</p> \n<p style=\"line-height: 25.6px; white-space: normal; text-align: center;\"><br></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; color: rgb(136, 136, 136); line-height: 28.4444px; box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></span></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; color: rgb(136, 136, 136); line-height: 28.4444px; box-sizing: border-box !important; word-wrap: break-word !important;\"></span></p> \n<p style=\"line-height: 25.6px; white-space: normal;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 20px; box-sizing: border-box !important; word-wrap: break-word !important;\">专栏作者简介 </span></strong>（ <a href=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402764500&idx=1&sn=cfcc178c7718d548b7cdc04758502bd9&scene=21#wechat_redirect\" target=\"_blank\" data_ue_src=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402764500&idx=1&sn=cfcc178c7718d548b7cdc04758502bd9&scene=21#wechat_redirect\" style=\"color: rgb(0, 128, 255); text-decoration: underline; line-height: 25.6px; font-size: 14px; background-color: rgb(255, 255, 255);\">点击 → 加入专栏作者</a><span style=\"color: rgb(0, 128, 255);\"> </span>）<span style=\"max-width: 100%; color: rgb(62, 62, 62); line-height: 25.6px; white-space: pre-wrap; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"> </span></p> \n<hr style=\"line-height: 25.6px; white-space: normal; max-width: 100%; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\">zhiqiang21：做认为对的事情，如果可能是错的，那就做认为自己承受得起的事情！</p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><img data-src=\"http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib1mzvWXmduZ1pbBz0921I7Fa71zFjuBQiaIYU6J1IVQEFIGkHCgvu3MuBn5pYico4FBV6iaC125pp8WQ/0?wx_fmt=jpeg\" class=\"\" data-type=\"jpeg\" data-ratio=\"1.26\" data-w=\"250\" src=\"http://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib1mzvWXmduZ1pbBz0921I7Fa71zFjuBQiaIYU6J1IVQEFIGkHCgvu3MuBn5pYico4FBV6iaC125pp8WQ/640?wx_fmt=jpeg\"></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(0, 128, 255); box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; color: rgb(62, 62, 62); line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; color: rgb(255, 169, 0); box-sizing: border-box !important; word-wrap: break-word !important;\">打赏支持作者写出更多好文章，谢谢！</span></strong></span></strong></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; color: rgb(136, 136, 136); line-height: 28.4444px; box-sizing: border-box !important; word-wrap: break-word !important;\"></span></p> \n<hr style=\"line-height: 25.6px; white-space: normal; max-width: 100%; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; color: rgb(136, 136, 136); line-height: 28.4444px; box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></span></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; color: rgb(136, 136, 136); line-height: 28.4444px; box-sizing: border-box !important; word-wrap: break-word !important;\">【今日微信公号推荐↓】</span></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><img data-src=\"http://mmbiz.qpic.cn/mmbiz/2A8tXicCG8ylRw2fLo1pdwDtzQuZFdl2AxmbYO7WlufeHl8hffPqBrL8SjicHwyJwYibTVL7Fe49F3ooThvfibicMibg/640?wx_fmt=png\" data-type=\"png\" data-ratio=\"0.6258992805755396\" data-w=\"\" src=\"http://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz/2A8tXicCG8ylRw2fLo1pdwDtzQuZFdl2AxmbYO7WlufeHl8hffPqBrL8SjicHwyJwYibTVL7Fe49F3ooThvfibicMibg/640?wx_fmt=png\"></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"line-height: 25.6px; max-width: 100%; font-size: 14px; box-sizing: border-box !important; word-wrap: break-word !important;\">更多推荐请看</span><strong style=\"line-height: 25.6px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 14px; box-sizing: border-box !important; word-wrap: break-word !important;\">《</span></strong><a href=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402186355&idx=1&sn=72be66e2caaaebb3cc436b2f5fb6ee0c&scene=21#wechat_redirect\" target=\"_blank\" data_ue_src=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402186355&idx=1&sn=72be66e2caaaebb3cc436b2f5fb6ee0c&scene=21#wechat_redirect\" style=\"line-height: 25.6px;\"><span style=\"max-width: 100%; color: rgb(255, 169, 0); box-sizing: border-box !important; word-wrap: break-word !important;\">值得关注的技术和设计公众号</span></a><span style=\"line-height: 25.6px; max-width: 100%; font-size: 14px; box-sizing: border-box !important; word-wrap: break-word !important;\"><strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"><span style=\"max-width: 100%; font-size: 16px; box-sizing: border-box !important; word-wrap: break-word !important;\">》</span></strong></span><br></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; font-size: 14px; color: rgb(136, 136, 136); box-sizing: border-box !important; word-wrap: break-word !important;\"><br style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\"></span></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; font-size: 14px; color: rgb(136, 136, 136); box-sizing: border-box !important; word-wrap: break-word !important;\">其中推荐了包括<strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">技术</strong>、<strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">设计</strong>、<strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">极客 </strong>和 <strong style=\"max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;\">IT相亲</strong>相关的热门公众号。技术涵盖：Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《</span><a href=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402186355&idx=1&sn=72be66e2caaaebb3cc436b2f5fb6ee0c&scene=21#wechat_redirect\" target=\"_blank\" data_ue_src=\"http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402186355&idx=1&sn=72be66e2caaaebb3cc436b2f5fb6ee0c&scene=21#wechat_redirect\"><span style=\"max-width: 100%; font-size: 14px; color: rgb(255, 169, 0); box-sizing: border-box !important; word-wrap: break-word !important;\">值得关注的技术和设计公众号</span></a><span style=\"max-width: 100%; font-size: 14px; color: rgb(136, 136, 136); box-sizing: border-box !important; word-wrap: break-word !important;\">》，发现精彩！</span></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><span style=\"max-width: 100%; font-size: 14px; color: rgb(136, 136, 136); box-sizing: border-box !important; word-wrap: break-word !important;\"><br></span></p> \n<p style=\"line-height: 25.6px; max-width: 100%; min-height: 1em; white-space: pre-wrap; color: rgb(62, 62, 62); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important; background-color: rgb(255, 255, 255);\"><img data-src=\"http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib0RVUkvWkewM35e1fEBOHP9TBlnQnszDMb5F5juUPC6GtqGjdzicicjl9yQ3GPy1WsznPiaPTicyia9S2w/640?wx_fmt=png\" data-type=\"png\" data-ratio=\"0.9172661870503597\" data-w=\"\" src=\"http://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib0RVUkvWkewM35e1fEBOHP9TBlnQnszDMb5F5juUPC6GtqGjdzicicjl9yQ3GPy1WsznPiaPTicyia9S2w/640?wx_fmt=png\"></p>","level":3,"createdAt":1496221416000,"updatedAt":1496221416000}}

原

关注

点赞|0

声明：该内容由作者授权CSDN展示，内容版权归作者所有，如需转载请与作者联系。如有侵权，请联系admin@csdn.net删除。

我来说几句发表

公众号