【51CTO.com原創稿件】本期主人公小星星坐標廣州，一個非常有活力的城市。他幾年前的一次彌留，居然從Flash動畫開始了他的代碼人生，誤入了IT部落。后來的幾年，他做過VB桌面程序，做過復雜的C/C++算法，也寫過浩大的Java門戶，還玩過混合編程即AppCan，現在操著一手世界上***大的語言PHP（^_ ^），哈哈，就是醬紫。回顧下這些時間的經歷，他最深入的算是Java語言Android相關的東西，可謂他的編程***；小星星涉足時間最長的則是PHP，畢竟現在系統是用它構建的；而最有意思最刻骨銘心的，是使用AppCan的那段時光！

[[198091]]

小星星·PHP開發

編程意識萌芽

小星星***份工作離職后，他跟團隊接外包項目做了一段時間，其中很大一部分是微信端的應用，因為是生手，對HTML5和CSS3相關的東西特別糾結，可以說幾個項目下來人都減了一圈（嗯，本來已經是大瘦子了），感覺特別燒腦。不過他熟悉了移動App開發需要考慮各種適配、各種兼容，異步請求是改善交互的很好的方法，交互中數據安全該做哪些操作等等，收獲還是挺大的。之后小星星在面試一個開發工作的時候，被問到一個有關移動端開發的趨勢問題，他認為“基于H5進行跨平臺App構建會是一個趨勢”，那時候還沒了解到有關Hybrid App的任何信息（嗯，信息滯后或者說認知缺失非常可怕，不過項目各種折騰下來還是有這種覺悟），他還是對自己的“預見”感到贊賞！

App定制組件開發思路

當外包項目做得水深火熱的時候，負責人突然丟過來一個系統，這是一個非常“龐大”的系統，至少在那時他的團隊看來，它，非常地復雜（到了修改個菜單欄選項直接花了三天時間的地步，是的，非常恐怖）！然后，非常地榮幸，接手這項目的重任放到了小星星肩上，結果是大年三十和大年初一他都接到了催進度的電話，2015年的春節他過得很特別，至此小星星跟那個系統結上了仇，復雜不說，關鍵本身還超多不能理解和接受的各種Bug。沒想到淚奔的東西還在后面，那個“可愛”的系統，他接手之后直接做到了現在，沒錯，是現在！

系統糾結歸糾結，但它畢竟能給小星星的團隊帶來營收，它也需要一個移動端。愁于開發資源非常稀缺不能走常規道路，于是他對混合開發的平臺和工具各種物色，最終他的團隊選擇了AppCan。

由于有H5的經驗，他擔起了基于AppCan的App構建工作。準備工作是官網文檔各種翻、IDE各種嘗試、官方交流群各種加，反正就這么開干了，那時候是7月份，廣州正熱，小星星也做得熱火朝天。由于前面花了時間研究了官方文檔，他在構建App的時候并沒遇到太大的困難，基本都能自己消化。難點在于自己App需要一些定制性特別強的組件，比如滑塊，比如進度條，比如圖片裁剪，比如折線圖，這些都是統一的前景和背景，統一的字體和線條風格，用現成的是不可能的只有自己造輪。從簡單的入手，***刀是個進度條，如下：

這個當時做的思考是分解，將它拆成文本提示、前景、背景以及右邊的狀態這幾個部分，每個部分都用div實現，并且他還想實現復用，需要的時候new一個實例，設置些參數就能出來這么個東西。說干就干，思路簡單，實際也很簡單，確實是：

1）這是組件目標位置：

2）引入自定義css和JS：

3）實例化：

用法就是醬紫，嗯，還算優雅，這里做了樣式的擴展入口，***最小值的定義，前景背景的定義。

具體實現思路是：背景固定寬度和高度，前景與背景同高，靠左跟背景重合對齊，前景設置高亮顏色，寬度由進度指定，根據進度占比確定前景在背景中的寬度占比，這就實現了進度展示，另外展示文本需要設置大一點的z-index屬性，在背景上方上下左右居中，最右側的狀態原理相同，不過是上下居中靠右放置，附上實現代碼，點此下載extra目錄（嗯，以文件的方式，代碼太多不貼這里了，另外還有其他幾個組件，都是基于AppCan3.2版本構建的，至于現在的新版本是否適用，小星星就沒驗證了）。

技術圈子找到歸屬感

這是小星星在H5方面的***個組件封裝，成就感滿滿，好像當時某混合開發群里有人問到進度條組件類似的問題，于是他很樂意地將自己的“研究”分享了出去，能夠幫助他人，這也是自己的價值體現。分享，也是很開心的事，接下來的時間里將他封裝的幾個組件都跟大家進行了分享。逐漸地，他在群里成了活躍分子，某天心血來潮，受大家影響（大家都是很萌很可愛的人），他將自己的備注改成了“廣州-小星星”，就是技術交流群里很多人認識的小星星。

在群里打拼的日子里，他認識了很多碼友，實話說這是很開心的一個團隊。在某月的某一天，技術群里的官方代表邀請他加入管理團隊，理由是他比較活躍，問了具體事項之后他順利入圍，至此，小星星就在技術交流群扎下了根，更多的是因為這個團隊，與此同時收到了一份特別的禮物。

技術交流群從活力的角度來考慮，這個團隊確實可以托付，且不說它背后代表的技術方向，大家從不同地域不同公司不同行業匯聚于此，一起討論一起解決問題一起提出改進建議，這本就代表著頑強的生命力，它活著，可以說代表的技術就活著。IT行業，保有一個有活力的團隊，這就有堅持做大做強的理由和動力！

小星星回顧走過的坑，可以用分解、總結，記錄、分享這四點來歸納。

1、分解。開發過程中遇到的問題有難有易，在遇到一個棘手的問題時需要做的是將其分解，比如一個復雜的UI組件可以分解成多個簡單的div塊，一個復雜的功能可以分解成多個簡單的功能，即復雜化簡，做到了這點就是自己能力的提升。

2、總結。而在解決問題的過程當中，適時回過頭來做些總結，不僅能鞏固自己解決問題的思路，還能找到處理問題時不妥或者不夠好的方式，從而歸納總結出更好的處理或者改進方式，這也是一個能力提升的過程。

3、記錄。記錄還有一個好處，詳細的有條理的記錄，還是他人處理相同或者類似的問題時一個很好的參考依據，這是分享，從這一角度，如何能夠更好地將自己的東西分享出去而盡可能地減少他人的疑問，這又是一個功能規劃和信息整理的一個提升。

4、分享最重要的，也許你的生活里需要一個“小星星”，成長的過程當中總有不如意，有個精神支柱，或者說有個價值標尺，逆境時不至于讓自己一蹶不振，順境時不至于得意忘形，這道理大家都懂！

生活會齊酸甜苦楚才有意義，曾經有幾個月，小星星過得有點困難，與此同時，他所在的團隊也過得有點困難，正因為有技術群里這些人的存在，他才有精神的支撐走了過來，小星星團隊的領導也因為他和同事們的堅持吃定定心丸，帶領團隊走過了困難期。感謝有你們！

小星星是個愛分享的小星星，自己寫的很好的或者感覺不錯的demo，都會整理打包出來，有需要的盆友可以直接拿去用，這是其一；另一個，在整理的過程中他還能夠找到那些不太和諧的因素，比如引入的資源文件是否足夠簡潔，實例化過程是否足夠方便，參數是否足夠明確，說明文檔是否足夠直白簡單。這些都是使用者需要的，也是對他自己做類似封裝的一個方向指導，這無形當中對他的思維、編碼技能都是很好的提升。完成一個項目回過頭來總結和記錄，是對自身和他人成長都很有價值的事情。

如果你也愿意分享你的故事，請加51CTO開發者QQ交流群 542270018聯系群主小官，期待你精彩的故事！

【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】