JQ-bootstrap我的開源前端框架


    因為實在不知道寫啥,所以遲遲沒有相關的介紹。但是必須要積累過程資產,所以還是介紹一下,不定哪天就有人用了。
 
    首先還是介紹遇到的問題,我是做傳統后台管理系統的,公司趕時髦,要用bootstrap。公司其他團隊已經用bootstrap作為前端做出一套系統了,算是當前系統的升級,我沒參與,進入測試階段后,我偷偷看了一眼——嗯,可能是我眼光高,可能是測試版,我可以忍住不吐槽,我又不上項目。抱着這樣的心理,我被通知開發其中的一個模塊,這時我又看到了jsp代碼——嗯,可能是我開發經驗少,可能是……。反正要讓我開發我忍不了,一個表單,輸入框能不一樣長,一個保存按鈕就挨在輸入框旁邊,換個行也行啊,這是我認識的bootstrap么,表格頭和分頁條挨着是什么鬼,沒數據?有了數據要滾動整個屏幕是哪樣,我在滾動到頂上看表頭么;HTML你倒是縮進啊,倒是寫注釋啊,還有內部樣式啊,以后不改了么,我新建個頁面,要把寫好的整個頁面都粘貼過去,然后在一層一層的找就為修改個標題,然后拉到最下面修改數據源,還得靠搜索找到事件到底在哪。我百度了一下,發現bootstrap沒有面向后台開發人員的框架,最多是組件控件,html和css還是要寫一堆。
 
    1.由於后台管理程序界面大同小異,頁面的大多數功能就是對數據的增刪改查,復雜的邏輯由后台程序執行;所以當使用Bootstrap時有很多HTML是需要反復重復的粘貼復制,使用模板頁又不能保證靈活性如果做了很多頁面后需要統一修改,就會相當麻煩,對於專注后台代碼人員是一個很大的工作量;
    2.后台代碼人員對前端不是很熟悉,而且不會花大量時間優化前端代碼,導致不同程序員開發的頁面樣式不統一,整個軟件看着就不是一個風格;
    3.原生Bootstrap部分控件並不能滿足客戶需求,需要引用其他第三方插件,當多個第三方插件組合在一起的時候程序員的噩夢又開始了;
 
    所以如果公司沒有專門的前端人員,也沒有成熟的Bootstrap模板框架,將會遇到三個問題:重復的工作量,影響開發周期;頁面風格不統一;前台代碼邏輯復雜很難維護;
 
    當我發現這三個問題后着手用jquery封裝原生Bootstrap和第三方插件,使頁面引用統一的js和css,在盡量保證開發靈活的同時統一頁面布局和樣式。
 
    再來分享下具體的實現思路,
 
    1.首先作為控件要有一個統一的類,我命名為bsEx,隨便起的,類包括 控件,基礎屬性和方法,事件也要走統一接口,要支持多語言,如果是第三方組件,要支持其所有屬性和方法,這個類包含在一個js包里,組件要盡量減少前台html,保證一個控件一行或直接沒有;
    2.要有一個css文件,調整組件樣式;要為每個組件寫出示例及API方便學習參考;
    3.要開源,以為只有我用到項目中了(jq22那上也有人用了但是沒有跟蹤不知道使用情況),源碼要注釋的明確方便修改;
    4.要有更新日志;
 
    實現的話就很簡單了,只不過把屬性提出來,輸出html罷了。
 
    這是我的第一個開源項目,大家多多支持,有不好的地方一定要通知我,我會不要臉的接受的。

    項目源碼

    https://gitee.com/shixixiyue/MyBootstrapEx

    可以通過右上角 [查看本頁面源碼] 進行在線查看,方便學習

    v2.0版本 https://shixixiyue.gitee.io/mybootstrapex/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM