成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React造輪子：拖拽排序組件「Dragact」

yangrd / 851人閱讀

摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調(diào)整后臺(tái)的各種表盤位置。內(nèi)的所有組件必須不能重疊，還要能自動(dòng)排序某些組件要可以設(shè)定靜態(tài)的，也就是固定在那里，不被布局的任何變動(dòng)而影響。為了快速獲得這種心態(tài)的轉(zhuǎn)變，你要做的就是造輪子。

先來一張圖看看：

項(xiàng)目地址：Github地址 (無恥求星?。?/p>

在線觀看（第一次加載需要等幾秒）：預(yù)覽地址

說起來不容易，人在國外沒有過年一說，但是畢竟也是中國年，雖然不放假，但是家里總會(huì)主內(nèi)一頓豐盛的年夜飯。

說吧，人家在上班，我在家里過年，那肯定就不同步了。

不同步會(huì)發(fā)生什么？

拖拽組件

大概三四個(gè)月以前，我寫了一篇《「實(shí)戰(zhàn)」React實(shí)現(xiàn)的拖拽組件》，只不過，這個(gè)組件比較基礎(chǔ)，僅僅支持電腦端的使用，而且不能支持拖拽排序，顯然不是很符合要求。

也嘗試找了幾款組件，想改吧改吧就上了，但是一些組件都蠻老的了，還是jQ的，不是很符合我們的技術(shù)棧。

想想還是算了，自己造一個(gè)輪子吧，反正我那么愛造輪子，順手寫一個(gè)也無所謂。

Typescript（TS）

最近一直在使用TS進(jìn)行開發(fā)，Eggjs的Ts實(shí)踐也寫了一半。這玩意兒，真的是有毒的，因?yàn)槟茏屇闵习a。

隨便將一個(gè)項(xiàng)目遷移到TS之上，在強(qiáng)大的靜態(tài)類型檢測(cè)下，你就能輕松的發(fā)現(xiàn)一堆邏輯和邊界錯(cuò)誤。一番重構(gòu)之后，頓時(shí)感覺代碼神清氣爽，頭皮恢復(fù)了生機(jī)！

所以，這款組件完全是用Typescript進(jìn)行開發(fā)，使得使用TS的小伙伴來說，更加方便快捷。其次，如果你想使用Javascript開發(fā)，也是完全沒有問題的。

造輪子的一些思考

首先，我們的需求是用戶能夠方便的調(diào)整后臺(tái)dash board的各種表盤位置。


圖片來自：https://github.com/yezihaohao/react-admin

類似一個(gè)這樣的界面，我們需要對(duì)其里面的組件進(jìn)行各種各樣的拖動(dòng)（不得不說一句，他媽的，老子都做好了后臺(tái)系統(tǒng)你就用就可以了，拖你妹啊，不讓人好好吃年夜飯。）

那么首先，我們就要考慮幾個(gè)點(diǎn)：

技術(shù)棧是React

固定范圍(Container)內(nèi)的所有掛件不能超出這個(gè)范圍。

每個(gè)掛件可以設(shè)定大小，并且按一定的margin上下分割開。

Container內(nèi)的所有組件必須不能重疊，還要能自動(dòng)排序

某些組件要可以設(shè)定靜態(tài)的，也就是固定在那里，不被布局的任何變動(dòng)而影響。

手機(jī)也可以操作

動(dòng)手開始

得益于之前寫過拖拽組件，避開了很多坑，也是寫下這款組件，主要有得特點(diǎn)是：

React組件

自動(dòng)布局的網(wǎng)格系統(tǒng)

手機(jī)上也可以操作

高度自適應(yīng)

靜態(tài)組件(Live Demo(預(yù)覽地址))

可拖拽的組件(Live Demo(預(yù)覽地址))

終于在大年初二早上，弄完了這款組件，基本可以滿足客戶需求，然而還有一些TODO LIST：

水平交換模式，目前移動(dòng)的時(shí)候不是

用戶動(dòng)態(tài)調(diào)整每個(gè)掛件的大小，就像Windows窗口一樣

掛件拖動(dòng)把手

支持響應(yīng)式

支持ssr，服務(wù)器渲染

如何開始？ 
npm install --save dragact
寫一個(gè)例子 
//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")
);
加點(diǎn)css 
/** index.css */
.plant-layout {
    border: 1px solid black;
}
.layout-child {
    height: 100%;
    background: #ef4;
    display: flex;
    justify-content: center;
    align-items: center;
}
想要一個(gè)新的特色、功能？

如果你想添加一些新功能或者一些非常棒的點(diǎn)子，請(qǐng)發(fā)起issue告訴我，謝謝！
如果你已經(jīng)閱讀過源代碼，并且添加了一些非常牛X?的點(diǎn)子，請(qǐng)發(fā)起你的PR.

有bug?

如果你發(fā)現(xiàn)了本項(xiàng)目的Bug，請(qǐng)務(wù)必馬上告訴我。添加一個(gè)issue，并且?guī)兔o出最最簡(jiǎn)單重現(xiàn)的例子，這能讓我快速定位到Bug幫你解決，謝謝！

最后

這是2018年的第二個(gè)輪子了。

造輪子訓(xùn)練的能力當(dāng)然不是只有把輪子重新寫一遍的能力，還有一個(gè)很重要的因素就是：心態(tài)。

為什么我說的是心態(tài)呢？我舉一個(gè)生活中的例子，你去新買一臺(tái)iPhone，假設(shè)以前根本沒有用過iPhone，買到手的時(shí)候，肯定會(huì)小心翼翼的去使用其中的功能，基本上就是這個(gè)不敢設(shè)置，另外一個(gè)不敢設(shè)置，這個(gè)不敢按，那個(gè)不敢碰。但是隨著時(shí)間久了，你熟悉了iPhone，每個(gè)角落都被你玩透了，你就不在乎了，隨便玩，隨便調(diào)，厲害的刷機(jī)越獄改主題。

這就是心態(tài)的變化，應(yīng)用到編程之中也是如此。剛開始的時(shí)候，你拿到別人框架來用，非常的不熟練，跟著作者寫的案例，設(shè)置成功，解決了你的問題，你就不敢再碰那一段代碼了。隨后，新的需求來了，你必須要在原有的基礎(chǔ)上加新功能，然而作者這時(shí)候因?yàn)槟承┰虿辉倬S護(hù)那個(gè)軟件了，你要么找新的，要么就是深入看代碼。

剛開始的時(shí)候，你可能只是調(diào)整框架代碼里面的參數(shù)，隨著越來越的需求，你改的越來越多，這個(gè)框架你開始熟悉，逐漸逐漸的，你就壓根不怕需求來了，因?yàn)槟闾煜ち恕?/p>

這個(gè)過程相當(dāng)?shù)穆L(zhǎng)，聰明的人幾個(gè)月，比較笨的人或者懶惰的人，可能10年。為了快速獲得這種心態(tài)的轉(zhuǎn)變，你要做的就是「造輪子」。這是一個(gè)最快的辦法，也是最土最笨的辦法，但是確實(shí)是一個(gè)「必須有效的辦法」。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107507.html

相關(guān)文章

  • React造輪子：拖拽排序組件「Dragact」

    摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調(diào)整后臺(tái)的各種表盤位置。內(nèi)的所有組件必須不能重疊，還要能自動(dòng)排序某些組件要可以設(shè)定靜態(tài)的，也就是固定在那里，不被布局的任何變動(dòng)而影響。為了快速獲得這種心態(tài)的轉(zhuǎn)變，你要做的就是造輪子。 先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...

    Charlie_Jade 評(píng)論0 收藏0

  • React造輪子：拖拽排序組件「Dragact」

    摘要：造輪子的一些思考首先，我們的需求是用戶能夠方便的調(diào)整后臺(tái)的各種表盤位置。內(nèi)的所有組件必須不能重疊，還要能自動(dòng)排序某些組件要可以設(shè)定靜態(tài)的，也就是固定在那里，不被布局的任何變動(dòng)而影響。為了快速獲得這種心態(tài)的轉(zhuǎn)變，你要做的就是造輪子。 先來一張圖看看： showImg(https://segmentfault.com/img/remote/1460000013305417?w=600&h=...

    tracymac7 評(píng)論0 收藏0

  • React組件：拖拽布局Dragact v0.1.6 發(fā)布

    摘要：新特性性能提升通過對(duì)組件渲染的優(yōu)化以及內(nèi)部算法的優(yōu)化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡(jiǎn)單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實(shí)例，我提供了一個(gè)，用于獲取當(dāng)前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...

    since1986 評(píng)論0 收藏0

  • React組件：拖拽布局Dragact v0.1.6 發(fā)布

    摘要：新特性性能提升通過對(duì)組件渲染的優(yōu)化以及內(nèi)部算法的優(yōu)化，把大量的遍歷和渲染都省掉。新特性不一樣的掛件渲染依賴注入式的掛件可以從最簡(jiǎn)單的例子看出，我們渲染子組件的方式和以往有些不同。通過獲取組件的實(shí)例，我提供了一個(gè)，用于獲取當(dāng)前的布局信息。 showImg(https://segmentfault.com/img/remote/1460000013377768?w=600&h=375); ...

    caozhijian 評(píng)論0 收藏0

  • React拖拽組件Dragact V0.1.7：教你優(yōu)化React組件性能與手感

    摘要：但是強(qiáng)迫癥犯了，為了使得性能達(dá)到極致，再次進(jìn)行了深度的優(yōu)化。把移動(dòng)中心設(shè)置在物體的重力中心，最為舒適。你可以狠狠的點(diǎn)擊預(yù)覽地址到此，組件，無論從性能，還是手感上來說，都已經(jīng)相當(dāng)?shù)姆衔覀兊男枨罅恕? 倉庫地址：Dragact手感絲滑的拖拽布局組件 預(yù)覽地址：支持手機(jī)端噢～ 上回我們說到，Dragact組件已經(jīng)進(jìn)行了一系列的性能優(yōu)化，然而面對(duì)大量數(shù)據(jù)的時(shí)候，依舊比較吃力，讓我們來看看，優(yōu)化...

    fizz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<