在 Jquery 时代,实现轮播的基本思路是第一帧与最后一帧使用相同的元素,播放至最后一帧的时候,不使用动画效果切换到第一帧,形成轮播的效果。
但还有别外一种思路,不需要额外复制元素,更多是的通过样式控制。让我们分析下一个完整轮播所经历的过程与所处状态,如下图。

分享编程的乐趣与珠玑
大多数情况下,浏览器默认的的 checkbox 样式都满足不了我们对外观的需求,这时候就需要在 checkbox 的基础上实现自定义样式,核心是如何使用“打勾”效果
有三种方式:
这里主要说明第三种,目前很多网站使用的 WebFont 就是在 content 属性中写字体代码实现图标。其实浏览器自带很多特殊符号,其中又分 html 特殊符号与 css 特殊符号。在 css 的特殊符号中,就有“打勾”这个符号,先看效果图:
本文例子的 GitHub 地址:https://github.com/codelegant/react-action
React 有自己的测试工具:Jest,就像 Angular 自己的 Karama。
使用 Jest 测试 React,主要分两部分,快照测试(Snaptshot Testing)与 DOM 测试(DOM Testing)。
首先安装依赖:
1 |
npm i -D jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer |
然后配置package.json
与.babelrc。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// package.json "dependencies": { "react": "<current-version>", "react-dom": "<current-version>" }, "devDependencies": { "babel-jest": "<current-version>", "babel-preset-es2015": "<current-version>", "babel-preset-react": "<current-version>", "jest": "<current-version>", "react-test-renderer": "<current-version>" }, "scripts": { "test": "jest" } // .babelrc { "presets": ["es2015", "react"] } |
实现 react 服务器渲染的通常思路是使用 node 服务器即时渲染组件并生成页面数据流返回给浏览器,最简单版本的 node 服务器渲染:https://github.com/codelegant/react-server-simple
但是这种实现方式有以下缺点:
那有没有不需要架设 node 服务器,实现方式又很前端,并且可以预渲染并生成静态文件的方式呢?答案是:有的!只需要用到两个工具:webpack 与 html-webpack-plugin。
查看全文
stateless
)组件的简写
1 2 3 4 |
const clickHandler = e=>alert(e.type); const Button = props=>(<button type="button" onClick={clickHandler} className={props.className}>Button</button>); |
1 2 3 4 5 6 |
const Button = props=> { const clickHandler = e=>alert(e.type); return (<button type="button" onClick={clickHandler} className={props.className}>Button</button>); }; |
1 2 3 4 5 6 |
const Button = props=> { const clickHandler = e=>alert(e.type); return (<button type="button" onClick={this.clickHandler} className={props.className}>Button</button>); }; |
上一篇文章讲解了 BEM 的核心概念,今天这篇文章主要讲解 BEM 的命名约定。
当时工作中遇到 BEM 实体的时候,你需要了解他们的命名规则。
命名约定的主要思想是要使得 CSS 选择器尽量的清晰并且能够携带最多的信息。这将有助于代码的开发与调试,并且解决 web 开发者所面临的一些问题。
假设我们有一个叫做menuitemvisible
的选择器。这种符号的第一眼不能让我们从选择器的名称中识别出 BEM 实体的类型。
让我们加入定界符:menu-item-visible
或者mentItemVisible
以这种方式书写,选择器的名称被清晰的分割成多个逻辑部分。我们能确定menu
是一个块,item
是一个元素,然后visible
是一个修饰语。但是,实际项目中的例子通常更为复杂,并不像之前的例子那样简单易懂,这就是 BEM 命名约定发挥作用的地方。
BEM 方法论提供了一种创建命名式规则的思路,并将它落实为典型的 CSS 选择器命名规则。但是,还有其它基于 BEM 的替代方案。
要想编写高性能的 web 站点或应用,你需要充分了解浏览器是如何处理 HTML/JavaScript/CSS 的,从而确保你写的代码(或引用的第三方代码)是尽可能高效的。
当今大多数设备的屏幕刷新率都是 60次/秒 。因此,如果在页面中有一个动画或渐变效果,或者用户正在滑动页面,那么浏览器渲染动画或页面的每一帧的速率,也需要跟设备屏幕的刷新率保持一致。
也就是说,浏览器对每一帧画面的渲染工作需要在16毫秒(1秒 / 60 = 16.66毫秒)之内完成。但实际上,在渲染某一帧画面的同时,浏览器还有一些额外的工作要做(比如渲染队列的管理,渲染线程与其他线程之间的切换等等)。因此单纯的渲染工作,一般需要控制在10 毫秒之内完成,才能达到流畅的视觉效果。如果超过了这个时间限度,页面的渲染就会出现卡顿效果,也就是常说的掉帧,它是很糟糕的用户体验。