資訊專欄INFORMATION COLUMN
摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調整后臺的各種表盤位置。內的所有組件必須不能重疊，還要能自動排序某些組件要可以設定靜態的，也就是固定在那里，不被布局的任何變動而影響。為了快速獲得這種心態的轉變，你要做的就是造輪子。
先來一張圖看看：
項目地址：Github地址 (無恥求星！）
在線觀看（第一次加載需要等幾秒）：預覽地址
說起來不容易，人在國外沒有過年一說，但是畢竟也是中國年，雖然不放假，但是家里總會主內一頓豐盛的年夜飯。
說吧，人家在上班，我在家里過年，那肯定就不同步了。
不同步會發生什么？
拖拽組件大概三四個月以前，我寫了一篇《「實戰」React實現的拖拽組件》，只不過，這個組件比較基礎，僅僅支持電腦端的使用，而且不能支持拖拽排序，顯然不是很符合要求。
也嘗試找了幾款組件，想改吧改吧就上了，但是一些組件都蠻老的了，還是jQ的，不是很符合我們的技術棧。
想想還是算了，自己造一個輪子吧，反正我那么愛造輪子，順手寫一個也無所謂。
Typescript（TS）最近一直在使用TS進行開發，Eggjs的Ts實踐也寫了一半。這玩意兒，真的是有毒的，因為能讓你上癮。
隨便將一個項目遷移到TS之上，在強大的靜態類型檢測下，你就能輕松的發現一堆邏輯和邊界錯誤。一番重構之后，頓時感覺代碼神清氣爽，頭皮恢復了生機！
所以，這款組件完全是用Typescript進行開發，使得使用TS的小伙伴來說，更加方便快捷。其次，如果你想使用Javascript開發，也是完全沒有問題的。
造輪子的一些思考首先，我們的需求是用戶能夠方便的調整后臺dash board的各種表盤位置。
圖片來自：https://github.com/yezihaohao/react-admin
類似一個這樣的界面，我們需要對其里面的組件進行各種各樣的拖動（不得不說一句，他媽的，老子都做好了后臺系統你就用就可以了，拖你妹啊，不讓人好好吃年夜飯。）
那么首先，我們就要考慮幾個點：
技術棧是React
固定范圍(Container)內的所有掛件不能超出這個范圍。
每個掛件可以設定大小，并且按一定的margin上下分割開。
Container內的所有組件必須不能重疊，還要能自動排序
某些組件要可以設定靜態的，也就是固定在那里，不被布局的任何變動而影響。
手機也可以操作
動手開始得益于之前寫過拖拽組件，避開了很多坑，也是寫下這款組件，主要有得特點是：
React組件
自動布局的網格系統
手機上也可以操作
高度自適應
靜態組件(Live Demo(預覽地址))
可拖拽的組件(Live Demo(預覽地址))
終于在大年初二早上，弄完了這款組件，基本可以滿足客戶需求，然而還有一些TODO LIST：
水平交換模式，目前移動的時候不是
用戶動態調整每個掛件的大小，就像Windows窗口一樣
掛件拖動把手
支持響應式
支持ssr，服務器渲染
如何開始？npm install --save dragact寫一個例子
//index.js
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Dragact } from "dragact";
import "./index.css"
ReactDOM.render(
0
1
2
,
document.getElementById("root")
);
加點css
/** index.css */
.plant-layout {
border: 1px solid black;
}
.layout-child {
height: 100%;
background: #ef4;
display: flex;
justify-content: center;
align-items: center;
}
想要一個新的特色、功能？
如果你想添加一些新功能或者一些非常棒的點子，請發起issue告訴我，謝謝！
如果你已經閱讀過源代碼，并且添加了一些非常牛X?的點子，請發起你的PR.
如果你發現了本項目的Bug，請務必馬上告訴我。添加一個issue，并且幫忙給出最最簡單重現的例子，這能讓我快速定位到Bug幫你解決，謝謝！
最后這是2018年的第二個輪子了。
造輪子訓練的能力當然不是只有把輪子重新寫一遍的能力，還有一個很重要的因素就是：心態。
為什么我說的是心態呢？我舉一個生活中的例子，你去新買一臺iPhone，假設以前根本沒有用過iPhone，買到手的時候，肯定會小心翼翼的去使用其中的功能，基本上就是這個不敢設置，另外一個不敢設置，這個不敢按，那個不敢碰。但是隨著時間久了，你熟悉了iPhone，每個角落都被你玩透了，你就不在乎了，隨便玩，隨便調，厲害的刷機越獄改主題。
這就是心態的變化，應用到編程之中也是如此。剛開始的時候，你拿到別人框架來用，非常的不熟練，跟著作者寫的案例，設置成功，解決了你的問題，你就不敢再碰那一段代碼了。隨后，新的需求來了，你必須要在原有的基礎上加新功能，然而作者這時候因為某些原因不再維護那個軟件了，你要么找新的，要么就是深入看代碼。
剛開始的時候，你可能只是調整框架代碼里面的參數，隨著越來越的需求，你改的越來越多，這個框架你開始熟悉，逐漸逐漸的，你就壓根不怕需求來了，因為你太熟悉了。
這個過程相當的漫長，聰明的人幾個月，比較笨的人或者懶惰的人，可能10年。為了快速獲得這種心態的轉變，你要做的就是「造輪子」。這是一個最快的辦法，也是最土最笨的辦法，但是確實是一個「必須有效的辦法」。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115676.html
摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調整后臺的各種表盤位置。內的所有組件必須不能重疊，還要能自動排序某些組件要可以設定靜態的，也就是固定在那里，不被布局的任何變動而影響。為了快速獲得這種心態的轉變，你要做的就是造輪子。 先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...
摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調整后臺的各種表盤位置。內的所有組件必須不能重疊，還要能自動排序某些組件要可以設定靜態的，也就是固定在那里，不被布局的任何變動而影響。為了快速獲得這種心態的轉變，你要做的就是造輪子。 先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...
摘要：新特性性能提升通過對組件渲染的優化以及內部算法的優化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...
摘要：新特性性能提升通過對組件渲染的優化以及內部算法的優化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實例，我提供了一個，用于獲取當前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...
摘要：但是強迫癥犯了，為了使得性能達到極致，再次進行了深度的優化。把移動中心設置在物體的重力中心，最為舒適。你可以狠狠的點擊預覽地址到此，組件，無論從性能，還是手感上來說，都已經相當的符合我們的需求了。 倉庫地址：Dragact手感絲滑的拖拽布局組件 預覽地址：支持手機端噢～ 上回我們說到，Dragact組件已經進行了一系列的性能優化，然而面對大量數據的時候，依舊比較吃力，讓我們來看看，優化...
閱讀 1748·2021-10-13 09:39
閱讀 1317·2019-08-30 13:58
閱讀 1412·2019-08-29 16:42
閱讀 3561·2019-08-29 15:41
閱讀 2991·2019-08-29 15:11
閱讀 2469·2019-08-29 14:10
閱讀 3405·2019-08-29 13:29
閱讀 2087·2019-08-26 13:27
