## 編程思維 編程就是解決問題的。 編程是有思維的，但是這種思維并不完全等同于解決問題時的思維。怎么理解這點呢？舉個例子： * * * * * ### 貪食蛇游戲的例子 蛇身可以看做是由一個一個格子組成的，沒吃一顆藥丸，身體就會變長，增加一格。每向前運動一次，身體的所有格子就像前移動一次，移動的位置就是相鄰的前一個格子的位置。這就是蛇移動的方式。 看起來是這樣的，沒有任何問題。 那么我們現在用編程來實現這個過程。 如果每移動一次，所有格子都向前移動一下，那這個開銷就會很大了，這樣我們就要記錄每個格子的位置，在移動的時候每個格子移動到前一個的位置。邏輯上沒有問題，但是有性能問題，編程思維必須要高效的，所以這樣的設計是有問題的。 來看看用編程思維怎么解決這個問題的： 其實每一次移動我們可以，銷毀最后一個格子，然后在蛇將要移動到的位置上創建一個格子，這樣就實現了蛇的移動效果了，也就是說每次移動就是增加一個格子和銷毀一個格子了，這樣就不需要傻傻的移動所有格子了，性能也就提升很多了。可見實現同樣的效果，編程思維還是很重要的。 （還有另外一種思想就是由[數據驅動視圖](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