React实现轮播的一种思路

在 Jquery 时代,实现轮播的基本思路是第一帧与最后一帧使用相同的元素,播放至最后一帧的时候,不使用动画效果切换到第一帧,形成轮播的效果。

但还有别外一种思路,不需要额外复制元素,更多是的通过样式控制。让我们分析下一个完整轮播所经历的过程与所处状态,如下图。

轮播的状态与过程

查看全文

使用伪类的 content 属性实现自定义选择框

大多数情况下,浏览器默认的的 checkbox 样式都满足不了我们对外观的需求,这时候就需要在 checkbox 的基础上实现自定义样式,核心是如何使用“打勾”效果

有三种方式:

  • 使用图上实现
  • 使用元素,隐藏两个边框,并旋转
  • 使用伪元素 content 属性中的特殊字符

这里主要说明第三种,目前很多网站使用的 WebFont 就是在 content 属性中写字体代码实现图标。其实浏览器自带很多特殊符号,其中又分 html 特殊符号与 css 特殊符号。在 css 的特殊符号中,就有“打勾”这个符号,先看效果图:

查看全文

使用 Jest 对 React 进行快照测试与 DOM 测试

本文例子的 GitHub 地址:https://github.com/codelegant/react-action

React 有自己的测试工具:Jest,就像 Angular 自己的 Karama

使用 Jest 测试 React,主要分两部分,快照测试(Snaptshot Testing)与 DOM 测试(DOM Testing)。

首先安装依赖:

然后配置package.json.babelrc。

查看全文

使用 webpack 与 html-webpack-plugin 进行 react 服务器渲染并生成静态页面文件

实现 react 服务器渲染的通常思路是使用 node 服务器即时渲染组件并生成页面数据流返回给浏览器,最简单版本的 node 服务器渲染:https://github.com/codelegant/react-server-simple

但是这种实现方式有以下缺点:

  • 如果原来有 node 服务器还好,否则需要额外架设服务器
  • 对前端开发者并不是特别友好
  • 即时渲染组件,比较耗费资源

那有没有不需要架设 node 服务器,实现方式又很前端,并且可以预渲染并生成静态文件的方式呢?答案是:有的!只需要用到两个工具:webpack 与 html-webpack-plugin。
查看全文

React+ES6写法小记

1、无状态(stateless)组件的简写

查看全文

CSS 的后代伪类选择器用法浅析

CSS 的后代伪类选择器共五对,两种类型(我命名为:child 型与 type 型),分别是:

child 型 type 型
:first-child :first-of-type
:last-child :last-of-type
:only-child :only-of-type
:nth-child(n) :nth-of-type(n)
:nth-last-child(n) :nth-last-of-type(n)

两种类型的主要区别在于查找元素的顺序,child 型先查找元素位置,再查找元素类型;而 type 型则刚好相反,先找类型,后找位置。

查看全文

在 WebStorm 中结合 Eslint 规范代码

JavaScript 的代码检查工具有:JSLint,JSHint, JSCS, ESLint,本文着重介绍 ESLint。

ESLint 在一系列的代码质量检查工具中,是最年轻的一个,当然也是最现代化的。配置多样,支持 JavaScript, JSON 以及 YAML 格式的 .eslintrc.*文件,同时也支持在package.jsoneslintConfig字段配置(Configuration File Formats)。

安装

ESLint 基于 Node 平台,所以 Nodejs 是必须安装的,然后通过 npm 安装 ESLint 包,至于全局安装还是作为开发依赖安装,取决于个人。

然后在 WebStorm 中,打开设置(File>Setting或者Alt+F7),按路径进入 ESLint 的配置界面(Languages&Frameworks>JavaScript>Code Quality Tools>ESLint)。开启 ESLint,并配置相应路径,配置文件默认使用.eslintrc

查看全文

Requirejs 中的 require.config() 全局化

在使用 Requirejs 实践中,将require.config()作为全局配置是一个好习惯

假设我们使用 requirejs 在页面中引入 main.js 脚本文件,最基本的配置可能是这样:

查看全文