MixItUp:排序也能这么动感
发布在GitHub不完全装B指南2014年4月12日view:3755
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here 封面人物:大卫·哈夫曼(David A. Huffman,1925.8.9 - 1999.10.7)

学过算法或者数据结构的朋友应该对二叉树耳熟能详了。二叉树当中有一种非常牛逼的树叫哈夫曼树,哈夫曼树又称最优二叉树,是一种带权路径长度最短的二叉树。哈夫曼编码就是根据哈夫曼树生成的编码,目的是根据字符出现的概率来构造平均长度最短的编码。

今天这个大神就是哈夫曼本人,设计出了哈夫曼树和哈夫曼编码。

1999年,哈夫曼因为患癌症逝世,74岁。

==========================================================

推荐指数:★★★★

使用难度:★

适用范围:动态显示网页元素的排列过程

GitHub数据enter image description here

==========================================================

好像有一段时间没有推荐前端库了,今天恰好看到了这个库,马上推荐给大家。

这个库的作用就是给你的元素排列过程加上动画效果。什么叫元素排列过程呢?假设我们有这么一个网页: enter image description here

我们有12个元素,然后如果想要重新排列的话,MixItUp会通过一个非常炫酷的动画效果来排列元素,如图: enter image description here

这是动画过程中我截的一张图,实际上一个动态效果,非常炫酷,大家可以点击阅读原文去官网看看。

==========================================================

使用教程

<div id="Container">
    <div class="mix" data-my-order="1"> ... </div>
    <div class="mix" data-my-order="2"> ... </div>
    <div class="mix" data-my-order="3"> ... </div>
    <div class="mix" data-my-order="4"> ... </div>
</div>

<button class="sort" data-sort="my-order:asc">升序排列</button>

$(function(){
    $('#Container').mixItUp();  
});

需要排列的div要添加mix类,data-my-order指定了div的顺序。

button当中的my-order:asc定义了排列方式,asc是升序,desc是降序,还有一个选项是随机。

应用这个插件,我们可以做很多好玩的东西,比如结合随机排序来做一个图片展示类的应用,或者做一个拼图类的小游戏,都很不错。

==========================================================

MixItUp官网首页

==========================================================

GitHub Tips

这次是分支系列的最后一篇了,还有点不舍呢。

这次讲讲分支在开发中的使用方法,或者说最佳实践。

主要参考的内容是阮一峰的博文:http://www.ruanyifeng.com/blog/2012/07/git.html ,我认为这篇文章还是很不错的。

首先提炼一下重点:

  • 一个master主分支,用于发布正式版

  • 一个develop分支,用于日常开发

  • 多个feature分支,用于开发不同功能

develop分支是从master分支上分出来的,需要发布正式版时merge到master分支。

feature分支是从develop分支上分出来的,某个新功能开发完成之后merge到develop分支,并删除这个feature分支。

这三类分支是核心的分支,一般来说是不可或缺的。还有两类分支可能需要用到:

  • release分支,用于预发布

  • fixbug分支,用于修补bug

release分支是从develop上分支出来的,预发布完成后,如果要发布正式版,则把预发布分支分别merge到develop分支和master分支,然后删除本分支。

fixbug分支一般来说是从master上分支出来的,因为bug一般是在正式发布之后才会被用户发现。修补完成后,分别merge到develop分支和master分支,然后删除本分支。

大体上是这五类,大家需要注意一下不同分支是从哪个分支上分出来的,以及使用完毕后需要merge到什么分支。

关于merge和rebase的使用,我个人认为在项目开发过程中最好是使用merge,因为rebase会改变分支点,并且commit的记录不如merge清晰明了。通过merge的记录可以很清楚地看出分支从哪里开始从哪里结束,也更容易判断此分支的目的和具体的开发内容。而rebase的线性commit记录很难看出这些信息。

==========================================================

好了,GitHub最重要的分支系列教程就结束了。大家如果有什么不清楚的地方或者想多了解一些其他命令的话,可以发给我~

如果大家觉得这篇文章还过得去的话请动动手指分享一下吧~你们的支持就是我最大的动力!

欢迎扫描二维码关注我的微信号“GitHub不完全装B指南”,获取最新文章。

谢谢~ enter image description here

评论
发表评论
暂无评论
WRITTEN BY
GitHub不完全装B指南
可能是全宇宙最低端的GitHub使用教程,1秒学会如何用别人的库装自己的逼!
TA的新浪微博
PUBLISHED IN
GitHub不完全装B指南

介绍我自己搜集到的一些优秀开源库,希望通过自己的努力让更多的人认识GitHub,了解GitHub,最后从GitHub中受益!

力图用最轻松的方式让大家会用最牛B的库!

我的收藏