前言

从事react开发已经四个月有余，期间设计了不少业务组件，也魔改了一些别人的组件。在度过这一段非常react的开发过程之后，我想大致分享一下react组件设计的一些基础知识（以及坑）。

组件划分

在设计组件之前，我们首先要清楚在整个设计中哪些部分应该独立出来成为一个组件，哪些部分应该交给props控制，哪些部分是静态属性无需变动，我将其称之为组件划分。先看一下下面这个组件划分示意图↓

可以看到它将设计图划分为一个个嵌套的容器，其中有交互的部分如搜索框要成为一个组件，固定的属性比如表头的Name和Price是不变动的所以没有划分为组件，而是作为表格组件的静态样式。

组件分类

在划分之后我们脑海中对应会有这么一个组件树的样子出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(
    <ProductTable>
        <Search />
        <Table>
            <Block>
                <BlockItem />
                <BlockItem />
            </Block>
            <Block>
                <BlockItem />
                <BlockItem />
            </Block>
        </Table>
    </ProductTable>
)

前言

之前我负责给项目搭建单元测试环境，对当前的web前端单元测试方案调查了一番，顺便看了一点E2E测试的方案。当时在团队内做了一次技术分享并且与java后端开发人员交流了一下关于测试的看法。我打算在这篇文章总结一下这次工作的收获。

关于测试的基础知识

解释一些关于测试的基础概念

什么是测试

wiki上这么描述：

软件测试的经典定义是：在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否能满足设计要求进行评估的过程。

通俗地说，测试就是看软件是否达到要求，然而这要求有许多种，有的来自程序本身复杂度，有的来自客户需求，所以也诞生了许多测试方法，包括黑盒白盒，单元测试，集成测试等等。在复杂的软件产品中，测试是保证软件质量重要的一环。

HTML(5)

HTML5新特性

• 语义化的标签（header,nav,footer,aside,article,section）
• 拖放事件（drag类事件）
• 跨文档消息传递（postMessage）
• 媒体元素（audio，video标签）
• 画布（Canvas） API
• 地理位置定位（navigator.geolocation）API
• 历史状态管理（更新history对象，pushState等）

前言

打算好好复习面试要用到的知识点，也算是对自己学习的一个总结，一直以来我的学习都是缺乏笔记的（喂你怎么考上大学的？。这次正好培养一下这个习惯。这些笔记可能在我之后看到有错误或者新东西之后继续更新更正，也算是完善一下自己的知识树吧。

浏览器

常见的浏览器内核有哪些？

• Trident（IE,360搜狗的兼容模式）
• Gecko（Firefox）
• Webkit（Chrome,Safari,android Chrome,android,ios,360搜狗的极速模式）

前言

前几天面试的时候被问到了关于跨域请求的问题，我就说用JSONP，iframe这些。面试官姐姐又追问我还有其他的吗，我表示不知道（一脸懵逼），后来告诉还有CORS，这几天就回来研究了下这个，发现是属于XMLHttpRequest2中的一个特性，而且果不其然老IE（IE8/9）是用其他API实现的。

什么是CORS

CORS全称是Cross-Origin Resource Sharing(跨域资源共享)，是W3C提出的跨域请求方案，需要服务器端的支持。与JSONP相比，主要有以下几点不同。

• JSONP只能实现GET请求。CORS支持所有类型的HTTP请求
• 使用CORS，开发者可以用普通的XMLHttpRequest发起请求和获得数据，相比JSONP有更好的错误处理
• JSONP兼容老的浏览器。不过考虑到IE8/9能够通过XDomainRequest实现CORS请求，所以主流浏览器基本实现CORS。