第一個移動前端開源項目-dailog

你還在爲手機上沒有忙碌光標而發愁嗎？你還在抱怨彈出框組件要依賴zepto/jqery嗎？你還在糾結是否要本身寫一套仍是去網上尋找成現成的UI組件嗎？YouA爲你輕鬆解決全部煩惱。YouA是我爲移動前端量身打造的一款UI組件，簡單，高效，輕量，獨立，有良好的擴展特性，走過路過，千萬不要錯過。

   開發背景：

      在手機上，多數時候，數據加載都是異步的，爲了在頁面上給用戶一些提示，須要有一個忙碌光標淡化這無聊的數秒鐘。若是直接用一個轉動的gif圖，雖然簡單有效，不存在兼容性問題，可是存在如下幾個缺點：

    1： 不一樣分辨率真下，可能出現邊緣有鋸齒，或者圖標模糊。

    2： 爲了一個小小的圖標，要產生一次http請求。在網速差的狀況下，http請求的時間，遠大於下載圖標所用的時間。

    3： 要更換圖標上的文字，或者要變化圖標的樣式，須要從新制做，再上傳覆蓋，很是不方便。

這對於追求完美的程序媛媛們是不能接受的。

   在pc上咱們用一個alert彈出一些警告信息，這是很日常的事，可是到了手機上，就會自做多情的增長一些地址欄的文件信息，並且界面也因瀏覽器而異。

    

對於confirm也有一樣的問題，並且樣子也不是我想要的。

 

有時候，咱們須要顯示的按鈕名字，不必定是叫"肯定」和「取消」，或者換個本身想的顏色，這些都沒有辦法實現。 還有，我想要實現一個從中間浮出的提示框，3秒後自動消失，還有我想要一行文字從底部慢慢地升起，再慢慢的落下，還有還有......

本身造輪子

人類的慾望是無窮的，系統提供的UI永遠也沒法知足貪婪的人類。因而乎，只有咱們本身造輪子，才能知足最個性化的需求。相似的UI組件，在gihub上也是一搜一大把，其中不乏一些大名鼎鼎的，好比juqeryUI之類的，雖然功能強大，可是有時候，我只是須要一個小小的對話框而已，非得引入這麼多的文件嗎？

基於以上各類緣由，我本身開始動手，在鍵盤上彈起了代碼。

上圖中，左邊是谷歌瀏覽器自帶的效果，右邊是個人組件默認提供的效果。更多效果，請移步個人git 順道打個廣告：https://coding.net/是個好的代碼倉庫，比起github.com來，速度更快，並且它支持演示，支付私有倉，最最重要的，它也是免費的。

根據公司的要求，我用jsdoc簡單作了一個API手冊，裁圖以下：

 

這樣看起來就像模像樣了。爲了方便其它用戶對功能進行自定義，仿造videoJS的做法,第三方用戶能夠直接改YouA的API,也能夠經過傳入新的造 函數進行改寫。對於連這些都不想動的懶人，能夠直接替換默認樣式文件，實現換膚，想必這也是極好的。

作完這一切，在node下gulp build一下，就能夠打包發佈了。若是你沒有node環境，也不會gulp，也沒有關係，僅管用你本身熟的方式去使用好了。個人設計原則是儘可能不依賴第三方庫，也儘可能不增長學習成本。固然，若是你愛學習，愛折騰，我也喜歡。

項目預覽

大段的代碼就不貼了，直接上git:  https://git.coding.net/ouyangli/dailog.git 歡迎你們fork,提issue.

自定義的忙碌光標截圖：

這個效果只須要傳入你本身定義的光標函數就能夠了，其它的事情，YouA已經在前面幫你作過了。

 我想我能作的還有不少，但願你們多多鼓勁，一塊兒加油，學好js。若是你想在javascript這門語言上有新的進步，就多多關注我吧。

臨時演示地址：http://dailog-e29d8.coding.io/

代碼倉庫: https://coding.net/u/ouyangli/p/dailog/git