# 緣起 經(jīng)常聽說：不要重復(fù)造輪子，我深同此看法。如果在項(xiàng)目開發(fā)階段，你還在研究和仿造現(xiàn)成的輪子，那項(xiàng)目的交付期將會(huì)是遙遙無期，能不能造出輪子不說，就算是造出的輪子，功能別人已經(jīng)實(shí)現(xiàn)過了的功能，你的輪子會(huì)bug一堆，這種做法事半功倍，得不償失。但是，閑暇之余，如果你精力充足，又喜歡窺探輪子的秘密，那么仿造現(xiàn)成輪子造出一個(gè)產(chǎn)品也是一件酷斃了的事情。

博主在開發(fā)需求過程中，就深刻體會(huì)到現(xiàn)成UI框架沒法滿足用戶需求的痛處：當(dāng)時(shí)項(xiàng)目匆匆上線，博主面對(duì)用戶的過程中，框架所用的輸入框始終滿足不了用戶的需求：某個(gè)每天比用功能中存在眾多時(shí)間輸入框，用戶的唯一要求就是智能化。第一點(diǎn)是回車切換輸入框，現(xiàn)成框架用的是tab鍵切換，用戶就是不肯買賬，必須回車切換輸入框(其實(shí)有時(shí)候原生js能做的事情反而被框架束縛住了)，第二是智能填充24小時(shí)。這需求是現(xiàn)成UI框架中沒法滿足的，用戶又是上帝，當(dāng)時(shí)的想法是用原生的JS來實(shí)現(xiàn)，但是當(dāng)時(shí)異想天開：為啥別人能寫出這玩意兒我寫不出呢？ 于是加班加點(diǎn)學(xué)習(xí)了JavaScript高級(jí)編程：JavaScript面向?qū)ο?#xff0c;this指針，閉包和作用域、原型以及原型鏈等技能，重點(diǎn)在面向?qū)ο蠓庋b這一塊。于是加班熬夜用原生JS寫了一款插件，滿足了用戶的需求，得到了用戶的認(rèn)可，并且返京途中用戶打電話給我們組長對(duì)博主褒揚(yáng)一番。

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

如今在項(xiàng)目竣工之際，留下些許自由時(shí)間，于是想鼓搗鼓搗，搗騰搗騰一些開源項(xiàng)目玩玩。希望能從一個(gè)博客作者轉(zhuǎn)變?yōu)殚_源項(xiàng)目作者，能提高自己編程水平的同時(shí)也結(jié)實(shí)一些志同道合的小伙伴。并寫下一系列文章，為那些內(nèi)心也存在著一團(tuán)熱火，想自己造輪子卻又找不到方向的同學(xué)提供一個(gè)參考。

介紹

my-ui -- 基于jQuery擴(kuò)展實(shí)現(xiàn)的前端UI框架，封裝統(tǒng)一API調(diào)用風(fēng)格，匯聚眾家優(yōu)秀框架以及插件之所長，借鑒了easyui api設(shè)計(jì)風(fēng)格，bootsrap的樣式，追求視角完美的前端框架。

這里多說一句，博主選擇jQuery家族的UI框架一是在項(xiàng)目開發(fā)過程中和jQuery家族的UI框架結(jié)下了不解之緣。二是目前網(wǎng)上這方面的博客和資源比較多。第三就是為造輪子的快感。如果你正在項(xiàng)目開發(fā)，博主還是建議你用現(xiàn)成的mvvm框架，那才是一種優(yōu)雅的編程方式，博主最近也學(xué)完了Vue全家桶，躍躍欲試在下一個(gè)項(xiàng)目中小試牛刀。

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

• 官網(wǎng)
• 文檔
• 開源地址

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

博主并非兩手空空就敢來發(fā)系列博客了，目前框架已經(jīng)開始起步，已經(jīng)實(shí)現(xiàn)了最基本的組件：table表格組建了。

使用

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

按需引入框架所需的js以及css文件，或者一次性引入myui.bundle.js文件(無需引入css,css已經(jīng)打包到myui.bundle.js)。因?yàn)閙y-ui框架是基于jQuery的擴(kuò)展， 所以您需要先引入jQuery文件。

<

定義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" >戰(zhàn)斗指數(shù)</th> <th style="height: 5px;" field="specialSkills" >特殊技能</th> <th style="height: 5px;" field="remark" >備注</th> </tr> </table>

js代碼調(diào)用組件

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

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

上面截圖是該框架(Library)實(shí)現(xiàn)的第一個(gè)功能，看似簡單，但里面包括了一個(gè)插件開發(fā)(一個(gè)Libaray就是眾多的插件集)的全部內(nèi)容，麻雀雖小，五臟俱全。這里你已經(jīng)看到該組件是如何使用的，那么從下章節(jié)起我將開始揭秘這一個(gè)個(gè)組件是如何實(shí)現(xiàn)的。如果你已經(jīng)迫不及待的想實(shí)現(xiàn)這么一個(gè)功能，那么請(qǐng)繼續(xù)關(guān)注我后面的文章吧，每當(dāng)我實(shí)現(xiàn)一個(gè)功能的時(shí)候都會(huì)出一篇文章，為大家揭示框架開發(fā)的秘密。如果你想看源碼的話，請(qǐng)關(guān)注我的github吧！

總結(jié)

以上是生活随笔為你收集整理的原有ui项目调用qml_从0开始写前端UI框架：概述的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。