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

標籤：

在前端界混了這麼久，一直在索取，從未奉獻過。於是下定決心，要做一個自己的開源項目，以自己微薄的力量，為帶動國內開源環境做一點點貢獻。這過想法在心裡醞釀已久，只是一直忙於生計，沒有時間和精力做這事。今天正好有一點時間，於是在coding.net上發布了，順便寫篇水文，希望能博取一些掌聲。口水篇到此為此，下面進入正題。

   開發背景：

      在手機上，多數時候，資料載入都是非同步，為了在頁面上給使用者一些提示，需要有一個忙碌游標淡化這無聊的數秒鐘。如果直接用一個轉動的gif圖，雖然簡單有效，不存在相容性問題，但是存在以下內個缺點：

    1： 不同解析度真下，可能出現邊緣有鋸齒，或者表徵圖模糊。

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

    3： 要更換表徵圖上的文字，或者要變化表徵圖的樣式，需要重新製作，再上傳複蓋，非常不方便。

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

   在pc上我們用一個alert彈出一些警告資訊，這是很平常的事，但是到了手機上，就會自作多情的增加一些地址欄的檔案資訊，而且介面也因瀏覽器而異。

    

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

 

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

自己造輪子

人類的慾望是無窮的，系統提供的UI永遠也無法滿足貪婪的人類。於是乎，只有我們自己造輪子，才能滿足最個人化的需求。類似的UI組件，在gihub上也是一搜一大把，其中不乏一些大名鼎鼎的，比如juqeryUI之類的，雖然功能強大，但是有時候，我只是需要一個小小的對話方塊而已，非得引入這麼多的檔案嗎？

基於以上各種原因，我自己開始動手，在鍵盤上彈起了代碼。

中，左邊是Google瀏覽器內建的效果，右邊是我的組件預設提供的效果。更多效果，請移步我的git 順道打個廣告：https://git.coding.net/是個好的代碼倉庫，比起git來，速度更快，支援示範，支付私人倉。

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

 

這樣看起來就像模像樣了。為了方便其它使用者對功能進行自訂，仿造videoJS的作法,第三方使用者可以直接改YouA的API,也可以通過傳入新的造 函數進行改寫。對於連這些都不想動的懶人，可以直接替換預設樣式檔案，實現換膚，想必這也是極好的。

做完這一切，在node下gulp build一下，就可以打包發布了。如果你沒有node環境，也不會gulp，也沒有關係，僅管用你自己熟的方式去使用好了。我的設計原則是盡量不依賴第三方庫，也盡量不增加學習成本。當然，如果你愛學習，愛折騰，我也喜歡。

項目預覽

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

 我想我能做的還有很多，希望大家多多鼓勁，一起加油，學好js。

臨時示範地址：http://dailog-3e6f3.coding.io/

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