GridManager 開源歷程

honhon 發布于2019-08-22 18:48 / 3395人閱讀

摘要：歷程啟動于年月日不曾想這一堅持已經多天了。每個午飯后晚飯前。期間對的認知與實踐提升明顯，并沉淀下名為的類庫。每次發布前的，成為一種風險把控。在此之前從沒有如此的認同單元測試，也相信這終將會成為一種大家都遵守的契約。

GridManager歷程

GridManager 啟動于2015年02月10日, 不曾想這一堅持已經1200多天了。
總想為此記錄些什么，但一直未曾動手。
午飯后，公司很安靜。帶上耳機，聽著歌，開始吧。
"我要從南走到北，我還要從白走黑。我要人們都看到我,但不知道我是誰"。
曾經的一個領導和我們說過一句話, 記憶深刻。
"技術不進則死"。
這是一個很好的時代，卻又是一個很壞的時代。
我們不再需要像以前一樣去解決IE兼容問題(IE: 有人喊我？), 但卻有更多的新技術需要不斷的學習。

一個選擇

"這個插件網上就有, 你隨便找上一個copy進來就OK了。"
"網上就有現成的，怎么整了一天還沒整好?"

這些所謂的現成的插件，在引入項目后才會暴露出各種需要投入精力的問題。
或多或少，或簡或易。

從12年開始，開始動手寫日常使用到的前端插件。
從抄到改，再到借鑒...
輪播、上傳、下拉框、表單驗證...

會有成就感，但也會覺著太簡單。

那段時間大數據很火, 各種概念各種解釋。
然而在這個大數據時代，我看到了對前端而言最直接的就是表格展示。

當碼下GridMananager的第一行，很清楚這將會提升自我，就像ztree和ueditor的作者一樣。

開源描述中，我用如下話語來描述:
"快速、靈活的對Table標簽進行實例化，讓Table標簽充滿活力。"
是描述也是目標，是值得去追的一個夢。

彼時追人夢, 此時依然是。

快速迭代

我黨領導人號召我們: "擼起袖子加油干"

每個周未，每個下班后的點滴時間。每個午飯后、晚飯前。
隨著迭代版本的上升，不斷強化功能，漸性優化性能。最終定下以下功能主體:

寬度調整

位置調整

可視化調整

排序功能

分頁功能

用戶偏好記憶

自動生成序號

自動生成全選

導出數據

快捷右鍵菜單

國際化配置

當列出這些功能時，我更多看到的是對應功能開中時遇到的點滴，是當時的很多難點被踩在腳下的那種快感。

jQuery free

思考了許久，終于開始，這是一個艱難的開始。
自從10年開始使用jquery以來，一直很鐘愛這個類庫，簡單方便且鋒利。
然而時代在變化，老夫一把jquery走天下的時代已經過去了。
期間對js的認知與實踐提升明顯，并沉淀下名為jTool.js的類庫。
很想告訴你或者他，動起手來去實現一個類庫，或許在以后的編碼時代會因此受益。

重構

多輪迭代后代碼的可讀性變低，同時ES2015的魅力日漸突顯。
然而時代在變化，ES2015終將引領下一代的javascript。
本次重構對之前的功能進行了大刀闊斧(對下不兼容)的修改:

將gulp替換為webpack

ES5全面替換為ES2015

將listManager更名為GridManager，至于更名，grid和list哪個才能更好的理解為表格？

增加單元測試

在一次發布中出現了一些意外，雖然僅僅是一些小意外.
從issues中的反饋意識到這是一個很嚴重的問題，是急需需要解決的問題。
在一系列的反復調整之后，最終形成karma + jasmine + webapck + coverage的測試體系。
每次發布前的npm run test，成為一種風險把控。
在此之前從沒有如此的認同單元測試，也相信這終將會成為一種大家都遵守的契約。

為了框架

這些年前端框架層出不窮
angularjs剛達成熟練工，react勢頭就上來了。
react上手寫完兩個項目, angularjs割掉了兩字母進入了angular2.0時代。
還沒來的急看angular2.0+typescript, Vue強勢崛起。
好吧，Vue項目練一練, angular2.0先放一放。
時代在變化...

自從GridManager完成jquery free之后，一度蜜汁自信: "不依賴任何框架，所以在各框架下都可以使用"。
然而什么都行，就又代表著什么都不行。
雖然使用沒問題，但是對框架模版卻無法解析。

隨后推出gridmanager-vue, 用于解決在vue框架中的痛點.
然而當0.1.0版本發布時，短時間的興奮過后更多的感到的是壓力。
angular,react這兩個版本正在等待解決
項目結構隨著功能的調整而出現的不清晰感也需要去重新設計。
...

這個時代下，你我同為追夢人。
時代在變化, 技術在更迭。
愿在技術更迭的浪潮中，你我穿戴著被汗水與浪花打濕的衣缽總能平穩著陸。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96223.html

React 表格組件 GridManager-React

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。刷新更新查詢條件其它更多請直接訪問查看當前版本的版本的版本 GridManager React 基于 React 的 GridManager 封裝, 用于便捷的在 React 中使用GridManager. 除過React特性外，其它API與GridManager API相同。 showImg(https://segmentfault...

cyixlq 2019-08-23 18:04 評論0 收藏0
表格組件 GridManager Angular 1.x

摘要：非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。前端雞湯前端框架前端相關篩選選中項，字符串默認為。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封裝, 用于便捷的在 Angular 中使用GridManager. s...

darcrand 2019-08-23 16:46 評論0 收藏0
Vue表格組件--GridManager Vue

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。并且使用服務需要提前通過將注冊至全局組件。刷新或更新查詢條件或其它更多請直接訪問查看當前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridManag...

khs1994 2019-08-23 16:46 評論0 收藏0
vue表格組件

摘要：基于的封裝用于便捷的在中使用除過特性外，其它與相同。非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。非必設項，選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外，其它API與GridM...

ysl_unh 2019-08-26 12:10 評論0 收藏0
GridManager 分頁詳解

摘要：分頁原理首先，注意了表格分頁是需要后端支撐的以下幾個步驟實現分頁由前端發送包含分頁信息的參數，這是由自動實現的。這時可以通過初始化配置對數據進行重組。 showImg(https://segmentfault.com/img/remote/1460000019455185?w=2302&h=1016); GridManager 分頁原理: 首先，注意了: GridManager 表格...

QLQ 2019-08-26 10:15 評論0 收藏0