郁达夫在《故都的秋》中说，北国的秋来得清，来得静。但今年北京的雨比往年分外多些，随着一层秋雨一层凉，已然渐入佳境了。趁着“袅袅兮秋风，洞庭波兮木叶下”的萧索还没有来临之前，给大家分享一些前端日常开中小知识、资源，便于高效开发，早点下班，及到冬日，便可同白居易一起享受绿蚁新醅酒，红泥小火炉的惬意了，长吆一声“晚来天欲雪，能饮一杯无？”
前言
本次分享主要focus在具体的项目，提到的点均是基于最近几个月，项目中用到的一些功能、技术点，以及团队内部技术体系，后续有其他资源需要，还请关注、联系我们。 作为前端日常开发友好系列的一次分享，且听我从前端日常项目开发、日常学习以及单元测试说起。
图片编辑类：
-
来自sandbox的插件：
- 图片裁剪：图片裁剪demo 该案例可以实现原始图片的展示，裁剪过程中的预览，以及裁剪后的效果图预览。对于不太复杂的图片裁剪场景，做简单改造，基本都是可以满足的。下面贴出demo核心代码。
核心代码(代码来自shekhar-shubhendu的demo)：
<Cropper style={{ height: 400, width: "100%" }} zoomTo={0.5} preview=".img-preview" src={image} viewMode={0} guides={true} minCropBoxHeight={10} minCropBoxWidth={10} background={false} responsive={true} autoCropArea={1} checkOrientation={false} onInitialized={(instance) => { setCropper(instance); }} ref={ref} />面对这一堆属性，不知道什么含义，无从下手？不要紧，文档奉上：cropperjs文档
-
来自同事的图片编辑器： 如果上方单纯的图片裁剪还不能满足较为复杂的开发场景，做更多功能的图片编辑操作，下面为团队小伙伴做的较上面的Cropper,功能更强大、更全面的图片内容编辑器。主要是基于canvas绘制，以及和一些插件的集成开发的。具体信息可以参见口袋同学之前写的文章。
-
口袋同学的掘金文章：掘金链接
-
核心代码：（基于插件和canvas绘制）
<ImageEditorContext.Provider value={{ imageEditor: imageEditorInst, rootEl: rootEl.current, imageEditorInfo: imageEditorInfo, undoStackLength: undoStackLength, redoStackLength: redoStackLength, }} > {props.imageEditorHeader} <Controls controls={props.controls} /> <div className={styles.contain}> <div ref={rootEl} className={styles.tuiImageEditorContain} /> </div> <Footer controls={props.controls} /> </ImageEditorContext.Provider> -
拖拽类：
最近做的项目中，需要做拖拽相关的功能，各种场景的拖拽，在这一个项目中都有用到，并且不断的去扩展功能。那是选择自己造轮子呢，还是找一个现有的轮子，做二次开发和改造呢？这还是一个智者见智，仁者见仁的问题，还是要结合现有的项目情况，迭代频率和周期，以及团队人员的开发能力做综合考量的。
我和团队的小伙伴，选择的方案是基于react-beautiful-dnd去做的拖拽相关的一系列开发。就目前大概3个月，5个版本的迭代来看，没有发现有任何的不适应，以及满足不了的场景。现在就把这款插件分享给大家：
就个人来看，这款插件可以满足你所有拖拽想象的插件，水平方向拖，垂直方向拖？整个模块拖，单个子元素拖？还想跨模块拖？没问题，你想要的都在这里，而且注释也很全，就不一行一行解释了哈~
直接上代码了：(循环输出可拖拽元素列表)
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
{this.state.items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
小小的排一下序：
// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
悄悄告诉你： 这个作者的案例，虽然功能很强大，但是样式，咱还是自己调一下吧。汗~
整合类
上面说到了图片，也说到了拖拽，那就再絮叨一下可实现图片拖拽的画廊效果。一般的图片画廊效果，其实没太多要说的，通过react-photo-gallery就可以实现一个简单的效果了，没太多出彩的地方。今天看到两个相对来说，还比较喜欢的两种画廊效果分享给大家。
- 图片位置可拖拽调整的画廊效果：sandbox demo链接 核心代码：
import React, { useState } from "react";
import { render } from "react-dom";
import Gallery from "react-photo-gallery";
import Photo from "./Photo";
import arrayMove from "array-move";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import { photos } from "./photos";
/* popout the browser and maximize to see more rows! -> */
const SortablePhoto = SortableElement((item) => <Photo {...item} />);
const SortableGallery = SortableContainer(({ items }) => (
<Gallery
photos={items}
renderImage={(props) => <SortablePhoto {...props} />}
/>
));
function App() {
const [items, setItems] = useState(photos);
const onSortEnd = ({ oldIndex, newIndex }) => {
setItems(arrayMove(items, oldIndex, newIndex));
};
return (
<div>
<h2>Sortable Gallery</h2>
<h3>Drag photo to rearrange</h3>
<SortableGallery items={items} onSortEnd={onSortEnd} axis={"xy"} />
</div>
);
}
render(<App />, document.getElementById("app"));
- 画廊图片支持轮播效果：sandbox demo 链接
核心代码：
import React, { useState, useCallback } from "react";
import { render } from "react-dom";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { photos } from "./photos";
function App() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);
const openLightbox = useCallback((event, { photo, index }) => {
setCurrentImage(index);
setViewerIsOpen(true);
}, []);
const closeLightbox = () => {
setCurrentImage(0);
setViewerIsOpen(false);
};
return (
<div>
<Gallery photos={photos} onClick={openLightbox} />
<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={photos.map(x => ({
...x,
srcset: x.srcSet,
caption: x.title
}))}
/>
</Modal>
) : null}
</ModalGateway>
</div>
);
}
render(<App />, document.getElementById("app"));
红宝书-《高级程序设计》阅读指南：
作为前端开发，初学者入门或者有经验的研发进一步学习，红宝书都是必读的（当然，前端还有其他必读好书，就不一一列举，每本书都有各自的侧重点）。那么面对这样一本厚厚的技术书，按照什么样的一个顺序，能更好的帮助理解，快速形成体系化的知识结构，从而实现有点到面的串联呢？下面就把我私藏的Richard Bovell 写的阅读方法和学习路线分享给大家。文章分为中文和英文版本，大家可以根据自己的需要，自行选择。
-
英文版：英文原文
- 中文版：中文原文
备注：红宝书现在是第四版了，文档提供的是第三版的，大同小异，大家根据自身情况，有的放矢。
Jest单测学习：
随着工程化的不断完善与推进，国内外大大小小的公司已陆续引入前端自动化技术，通过TDD（测试驱动开发）的这种方式，来保证和提高代码质量，释放出不必要的测试人力。
- 首先，什么是单元测试？
维基百科是这么说的：
In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use.
- 为什么要写单测？
根据上面的定义，其实已经可以看出了，单测主要是为了检测方法，看它是否满足使用。通过流程的完善与控制，研发通过编写单元测试用例，自我检查验证，提高代码的质量，并且降低测试成本；另外，项目一旦交接给别人或者有重构的需要，一套完善的测试用例会帮助后续的研发快速了解和把控项目功能以及制定调整策略。据不完全统计，几乎所有的大型开源项目，都有单测支撑。
- 市面上都有哪些单测框架？
针对不同的开发语言，每个人在开发中的选择的框架略有差异。目前世面上用的单测框架比较多，诸如：Jest、Mocha、Cypress、AVA、Jasmine等。
由于做React相关的项目，首选了Jest。关于Jest相关的资料，除了官方资料，视频资料非常少，而且质量也大多不如人意。
-
官方文档：DOCS
-
目前为止，看到的免费类视频，讲解最好的：Jest video
-
其他付费类：Dell lee 针对Jest有一个系列课程，大家就自行查找吧。
备注：如果你可以翻墙看，YouTube上有很多相关资料，就不一一列举了。
技术专栏 & 团队开源：
无论你是想要按周推荐，还是按月推荐的技术文章，我们都在做。快来领取啊~
- 技术专栏：
- 周刊： TNT-Weekly
- 月刊： 图说前端github：图说前端github TNTWeb-Diagram
- 团队开源： 还在为react+TS的开发苦恼吗？每次标注类型，有没有一点小情绪？想了解一些成体系的数据流方案吗？组内大神开源的concent帮你搞定一切。
- concent的定位：自带依赖收集，类vue开发体验的高性能react数据流方案。
- concent开源地址：concent
以上专栏，如果有错误指正或者建议，欢迎提issue， 我们会定期或者不定期做更新维护。
