## 编程思维 编程就是解决问题的。 编程是有思维的，但是这种思维并不完全等同于解决问题时的思维。怎么理解这点呢？举个例子： * * * * * ### 贪食蛇游戏的例子 蛇身可以看做是由一个一个格子组成的，没吃一颗药丸，身体就会变长，增加一格。每向前运动一次，身体的所有格子就像前移动一次，移动的位置就是相邻的前一个格子的位置。这就是蛇移动的方式。 看起来是这样的，没有任何问题。 那么我们现在用编程来实现这个过程。 如果每移动一次，所有格子都向前移动一下，那这个开销就会很大了，这样我们就要记录每个格子的位置，在移动的时候每个格子移动到前一个的位置。逻辑上没有问题，但是有性能问题，编程思维必须要高效的，所以这样的设计是有问题的。 来看看用编程思维怎么解决这个问题的： 其实每一次移动我们可以，销毁最后一个格子，然后在蛇将要移动到的位置上创建一个格子，这样就实现了蛇的移动效果了，也就是说每次移动就是增加一个格子和销毁一个格子了，这样就不需要傻傻的移动所有格子了，性能也就提升很多了。可见实现同样的效果，编程思维还是很重要的。 （还有另外一种思想就是由[数据驱动视图](http://www.imooc.com/learn/882)，只需要关心数据结构，而无需关心视图。） * * * * * ### 滚动事件的例子 滚动事件中检测所有目标对象的位置，自动定位到当前标题，常规的思路就是每次滚动时都要遍历所有的对象，检测位置，并计算。 这种问题的解决方式，本身看起来是没有任何问题的。 但是每次这样，遍历，获取位置，这样性能会太低了。 那么此时就说明编程思维出问题了，这时候我们就要打破常规，打破固有思维模式，反其道为主了。 要知道页面中，对象位置一般是不会在变动的，那么我们在一开始就可以遍历对象，并获取位置保存下来，此后滚动事件中就不需要再做耗性能的遍历和实时的检测动作了，直接遍历内存中的数据就可以了，这样效率一下子就提升了，即使对象页面发生变化，那么重新计算一下所有对象位置，就可以了。 总之，我们先用常规的思考方式来进行编程是没错的，但是如果遇到一些问题和阻碍，觉得这样不是最好的方式时，那么就该转变思维，跳出常规，使用我们的**编程思维**了。 参考：[cai_info_sliding() 函数](http://hbdscy.com/v1/public/templates/wap/default/home/default/static/js/5el_shop_.js) [谈谈IntersectionObserver懒加载](https://mp.weixin.qq.com/s/Pcrxbsh3iCSckVGZktxrHA) [pagescroller.min.js - jquery页面滚动定位（支持上下滑动）](http://www.jq22.com/jquery-info8373) * * * * * ### 通常黑名单模式没有白名单模式可靠好用 ```javascript document.getElementById("cai_z").onclick = function () { img.onload = null; var e = event || window.event; var target1 = e.target ? e.target : e.srcElement; if (target1.id == 'cai_z_' || target1.id == 'cai_img' || target1.id == 'cai_num' || target1.id == 'cai_content' || target1.nodeName == 'IMG' || target1.nodeName == 'P' || target1.nodeName == 'SPAN' || target1.nodeName == 'I' || target1.nodeName == 'FONT' || target1.nodeName == 'HR') return; this.style.display = 'none'; }; ``` 改进： ```javascript if (target1.id == 'cai_z' || target1.id == 'close') { this.style.display = 'none'; } ``` last update：2018-2-9 23:07:33