目前較為流行的react確實有很多優點,例如虛擬dom,單向資料流狀態機的思想。還有可複用元件化的思想等等。加上搭配jsx語法和es6,適應之後開發確實快捷很多,值得大家去一試。其實元件化的思想一直在提,原來的開發中也會抽一些公共的模組出來。但是react帶來的思想衝擊是革命性的,套用一句可能不太合適的話來,描述:萬事萬物皆元件,在這種思想的影響下,不管什麼框架都可以抽一些公共的模組出來,應該秉持一種心態:任何程式碼都儘量不要重複寫兩遍,如果存在那麼就可以考慮封裝起來作為元件。當然不是一味的提倡盲目抽離,這個度還是要把握好的。

要相容這些特立獨行的文藝青年,react真的有點力不從心了。雖然有一些辦法可以解決一些問題,例如引入es-shims轉換es6語法的不備支援現象。但是整體來說還是不能用的。現身說法,前段時間一個專案使用react來開發,要求相容ie8,但是react路由的hash值在ie8下面竟然會丟失。。。。最後還是用一些其他方式繞過了。所以jquery還是有存在的必要性的。

  要是開發兩套元件,成本還是蠻大的,並且重複的工作量也不小。所以就有個想法能不能開發一個公用元件,jquery和react技術棧都可以使用。剛開始的時候也覺得不太現實,畢竟兩種技術的定位和開發模式存在很大差異。不過空想是沒什麼用的,動手實踐一下才是王道。(今天的前言說的有點多了。。。)所以打算實現一個celling元件這個名字還真不好想,就是實現簡單的吸頂、吸底和中間特定條件下的吸頂的一個定位元件。

這裡就不貼全部程式碼了,直接把核心程式碼粘貼出來就夠了.程式碼和上面所說的思想基本是一致的.並且還有相關的註釋,我就不多做解釋了.這樣我們也是僅僅實現了在新的Layer上畫了這樣一個圓圈.那麼如何實現縮放和平移圖片,然後獲取到圖片這才是比較重要的一個部分.

既然要實現縮放和平移,那麼必須要重寫手勢事件.這基本是習以為常的事情了.先貼程式碼,然後再說其中的道理.

當我們兩個手指同時按壓到螢幕上的時候,這裡做了一個簡單的判斷,就是兩指之間的距離,如果距離小於10f,那麼就還是表示要執行平移操作,否則執行縮放操作,那麼當需要執行縮放操作的時候首先需要記錄兩指按下的中心點座標,然後根據初始兩指之間的距離和移動後兩指之間的距離做除法運算,就可以計算出我們具體要縮放多少,縮放就是通過根據最開始的中心點以及matrix的配合實現縮放效果.最後基本就是獲取圖片隨機生成一個uri返回就可以了.

需要注意一點就是圖片在放置到ImageView上的時候我們是需要對圖片進行加工的,因為我們現在手機內部的圖片已經不僅僅是720*1280那麼簡單了現在手機拍攝出來的圖片畫素一般是4000+*3000+的,這個取決於我們相機的畫素,和螢幕的解析度是沒有什麼關係的,因此在篩選完圖片之後就需要對圖片進行相關的處理.因此我為ClipView註冊了一個檢視樹監聽,也就是說當ClipView監聽到整個檢視樹狀態發生了相關的變化,那麼就表示圖片需要顯示在ImageView上了,這時我們就需要對圖片進行加工處理.每一個Layout都構成一個檢視樹,其實我感覺它和DOM樹結構差不多,都是按層級劃分的.還有註冊完之後,觸發的同時需要remove掉,否則會多次呼叫.