從0開始寫前端UI框架：概述

緣起

經常聽說：不要重複造輪子，我深同此看法。如果在項目開發階段，你還在研究和仿造現成的輪子，那項目的交付期將會是遙遙無期，能不能造出輪子不說，就算是造出的輪子，功能別人已經實現過了的功能，你的輪子會bug一堆，這種做法事半功倍，得不償失。但是，閒暇之餘，如果你精力充足，又喜歡窺探輪子的祕密，那麼仿造現成輪子造出一個產品也是一件酷斃了的事情。

博主在開發需求過程中，就深刻體會到現成UI框架沒法滿足用戶需求的痛處：當時項目匆匆上線，博主面對用戶的過程中，框架所用的輸入框始終滿足不了用戶的需求：某個每天比用功能中存在衆多時間輸入框，用戶的唯一要求就是智能化。第一點是回車切換輸入框，現成框架用的是tab鍵切換，用戶就是不肯買賬，必須回車切換輸入框(其實有時候原生js能做的事情反而被框架束縛住了)，第二是智能填充24小時。這需求是現成UI框架中沒法滿足的，用戶又是上帝，當時的想法是用原生的JS來實現，但是當時異想天開：爲啥別人能寫出這玩意兒我寫不出呢？ 於是加班加點學習了JavaScript高級編程：JavaScript面向對象，this指針，閉包和作用域、原型以及原型鏈等技能，重點在面向對象封裝這一塊。於是加班熬夜用原生JS寫了一款插件，滿足了用戶的需求，得到了用戶的認可，並且返京途中用戶打電話給我們組長對博主褒揚一番。

這款插件的成功開發爲博主揭示框架(Library)的奧祕。 於是如中毒一般一發不可收，後來嘗試封裝一些前端插件，比如輪播、返回頂部、仿easyui numberbox，datepick等，並仿過jQuery造出mini版Dom框架，不過只是實現了簡單的Dom選擇器和過濾器功能。並且知道猶如jQuery這種經典框架也不是從0開始構建自己的代碼的，他的選擇器就選用了sizzle引擎。

如今在項目竣工之際，留下些許自由時間，於是想鼓搗鼓搗，搗騰搗騰一些開源項目玩玩。希望能從一個博客作者轉變爲開源項目作者，能提高自己編程水平的同時也結實一些志同道合的小夥伴。並寫下一系列文章，爲那些內心也存在着一團熱火，想自己造輪子卻又找不到方向的同學提供一個參考。

介紹

my-ui – 基於jQuery擴展實現的前端UI框架，封裝統一API調用風格，匯聚衆家優秀框架以及插件之所長，借鑑了easyui api設計風格，bootsrap的樣式，追求視角完美的前端框架。

這裏多說一句，博主選擇jQuery家族的UI框架一是在項目開發過程中和jQuery家族的UI框架結下了不解之緣。二是目前網上這方面的博客和資源比較多。第三就是爲造輪子的快感。如果你正在項目開發，博主還是建議你用現成的mvvm框架，那纔是一種優雅的編程方式，博主最近也學完了Vue全家桶，躍躍欲試在下一個項目中小試牛刀。

好了，接下來就開始咱們的輪子之旅了。

• 官網
• 文檔
• 開源地址

由於項目處於剛起步階段，(github代碼才提交上去呢！歡迎大家去github關注一下項目^_)，咱先來看看官網以及文檔，上面羅列了將要實現的功能，這16個組件當然不能和成熟的框架相比，但是博主感覺如果自己能從0開始實現這些個功能，那對自己也算是一種挑戰了。

博主並非兩手空空就敢來發系列博客了，目前框架已經開始起步，已經實現了最基本的組件：table表格組建了。

使用

1. 下載發行版本代碼：https://github.com/Spring-Chang/my-ui/tree/master/release

2. 按需引入框架所需的js以及css文件，或者一次性引入myui.bundle.js文件(無需引入css,css已經打包到myui.bundle.js)。因爲my-ui框架是基於jQuery的擴展，
   所以您需要先引入jQuery文件。

   <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
   <script src="../../release/myui.bundle.js"></script>
   

3. 定義html元素

           <table id="table" class="myui-table">
               <caption>梁山好漢排名</caption>
               <tr>
                   <th style="height: 5px;" field="index" >座次</th>
                   <th style="height: 5px;" field="name" >原名</th>
                   <th style="height: 5px;" field="nickName">暱稱</th>
                   <th style="height: 5px;" field="constellation" >星宿</th>
                   <th style="height: 5px;" field="birthDay" formatter="daily-date">生日</th>
                   <th style="height: 5px;" field="sex" formatter="sexFormatter">性別</th>
                   <th style="height: 5px;" field="effectiveness" formatter="number" >戰鬥指數</th>
                   <th style="height: 5px;" field="specialSkills" >特殊技能</th>
                   <th style="height: 5px;" field="remark" >備註</th>
               </tr>
           </table>
   

4. js代碼調用組件

   $(function () {
       $('#table').table({
           url : './table_data.json',
           method: 'get',
           sexFormatter : function (value, row, index) { //性別格式化回調函數
               if(value) {
                   return "男";
               } else if(!value) {
                   return "女";
               }
               return value;
           }
       });
   });
   

上述例子示範了table組件調用過程，js代碼中傳入了url、menthod、以及格式化性別字段的回調函數。頁面效果如下：

上面截圖是該框架(Library)實現的第一個功能，看似簡單，但裏面包括了一個插件開發(一個Libaray就是衆多的插件集)的全部內容，麻雀雖小，五臟俱全。這裏你已經看到該組件是如何使用的，那麼從下章節起我將開始揭祕這一個個組件是如何實現的。如果你已經迫不及待的想實現這麼一個功能，那麼請繼續關注我後面的文章吧，每當我實現一個功能的時候都會出一篇文章，爲大家揭示框架開發的祕密。如果你想看源碼的話，請關注我的github吧！