文章列表
结一 于 6个月前发表 979 0 0
首先React本身是有动画插件的React.addons.TransitionGroup,当你使用该组件时,会添加对应的动画生命周期函数来控制动画,分别为componentWillEnter,componentDidEnter,componentWillLeave,componentDidLeave。而更高级点的ReactCSSTransitionGroup则是ReactTransitionGroup是基于ReactTransitionGroup的,在React组件进入或者离开DOM的时候,它是一种简单地执行CSS过渡和动画的方式。 今天我们来探讨的是另一种实现方式,而非使用官方的插件。先抛开React,我们一般实现动画都是添加或删除对应的动画class,这是因为DOM结构本身就存在,所以可以任意操作,而React则不同,每个组件都是有生命周期的,componentDidMount则是组件挂载到DOM结构,而componentWillUnmount则在组件被移除DOM前调用。所以我们可以使用外包一层,把控制动画的责任落在这个已经存在的DOM结构上。
6个月前
javascript技术
kurtshen 于 6个月前发表 539 0 0
ES6 SET ES6 新增了几种集合类型,本文主要介绍Set以及其使用。 其基本描述为 Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。 它的声明 new Set([iterable]); 其中iterable是一个可迭代对象,其中的所有元素都会被加入到 Set 中。null被视作 undefined。也可以不传入[iterable],通过其add方法来添加元素。 对于ruby或者是python比较熟悉的同学可能会比较了解set这个东东。它是ES6 新增的有序列表集合,它不会包含重复项。 SET的属性 * Set.prototype.size:返回Set实例的成员数量。 * Set.prototype.constructor:默认的构造Set函数。 SET方法 * add(value):添加某个值,返回Set结构本身。 * delete(value):删除某个值,返回一个布尔值,表示删除成功。 * has(value):返回一个布尔值,表示参数是否为Set的成员。
6个月前
javascript技术
何方舟 于 6个月前发表 3147 5 2
REACT + REDUX 组件化方案 在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。 WHY REACT 理想中的组件化,第一步应该就是组件的标签化, 例如有一个 Header 组件,如下图所示 Alt text [http://7xjduk.com1.z0.glb.clouddn.com/header.png] 无需关注组件内部的实现,我们只需要使用一个 <Header/> 标签就能调用它,通过设置属性的方式,来控制它的显示的内容,和对应的事件。 classPageextendsComponent { render () { <div> <Header onAttend={click} anchorInfo={anchorInfo} members={members}/> </div> } } onAttend 决定点击关注时会触发的事件 anchorInfo 决定左侧展示的主播信息 members 坐定右侧展示的成员信息 借助 jsx 语法,React 已经实现上述想法。
6个月前
javascript技术
朱灵子 于 6个月前发表 737 2 0
ES6浅析 Babel 是一个 JavaScript编译器,它可以把我们编写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保转换后的语言良好地运行在所有主流 JavaScript引擎中。我们可以把babel简单地理解为 从源代码到源代码的编译器 。 以下是ES6新特性在Babel下的兼容性列表 [http://7tszky.com1.z0.glb.clouddn.com/FotkhQdmSPM7DCq3czho7NWy7oXT] 今天我就使用babel编译器这个强大的工具来理解Es6的一些语法,主要从以下几个方面的对比来进行理解: * Let、const与var * 箭头函数与普通函数 * 原型方法静态方法 -------------------------------------------------------------------------------- LET、CONST与VAR 使用babel编译工具我们发现let const编译以后都变成了var,那他们和var到底有哪些方面的区别呢?
6个月前
javascript技术
孙世吉 于 6个月前发表 976 0 0
1 简介 JSON 模式(JSON Schema)是一种基于 JSON 格式定义 JSON 数据结构的规范 。其用于: * 描述现有数据格式。 * 干净的人类和机器可读的文档。 * 完整的结构验证,有利于自动化测试,可用于验证客户端提交的数据。 表现形式上来说 JSON Schema实际上也还是JSON数据。 JSON Schema制定了一系列规范,使得我们可以使用它来定义JSON数据的格式。 这有点像我们先定义了“语言”是什么怎么用,然后可以用“语言”来规定什么是诗词歌赋。“诗词歌赋”以及“诗词歌赋的定义”实际上也都还是“语言”。 简单来说,我们有JSON数据①,我们可以定义JSON数据②用来描述①的结构。这时候JSON数据②也就是JSON Schema,它可以 描述 以及 验证 JSON数据①。 JSON数据①: { "name": "shijisun", "age": 24, "gender": "male"} JSON数据②(JSON Schema): { "type": "object", "properties": {
6个月前
javascript技术
Red626 于 7个月前发表 952 0 0
ECMAScript 6 (or ECMAScript 2015) is the newest version of the ECMAScript standard and has remarkably improved parameter handling in JavaScript. We can now use rest parameters, default values and destructuring, among other new features. PS:这篇文章主体是根据Faraz Kelhini的文章(见引用1)翻译而来,加入了自己的一些理解。 背景介绍 随着ES6的出现,javascript具备了很多新的特性,很多特性不仅仅在语法上更加清晰简洁,同时也提高了效率和可靠性,便于后期扩展和维护。不过很多新特性普及度并不高,通过学习ES6的一些特性后,可以更好地将其运用到实际项目中,对于浏览器支持度,我觉得可以乐观一些,毕竟ES6是趋势,而且现在也有诸如babel这类工具可以帮助我们将ES6转换为ES5来实现兼容,所以开发中去用ES6,何乐而不为呢? 概念介绍
7个月前
javascript技术
孙世吉 于 7个月前发表 2722 0 1
引言 最近实践中需要用到大量的异步回调风格代码的编写,作者最近处于同步编程风格转为异步编程风格的状态。同时第一时间遇到了下面提到的代码,第一直觉就是该代码肯定有问题!但是问题在哪里有讲不出来,感觉非常蛋疼与疑惑。先上当时遇到的代码: // 删除,先检查是否存在,存在再执行真正的删除动作functiondel() { // 查找return find().then(function(resultOfFind) { // 如果没找到,直接返回if (!resultOfFind) { returnfalse; } // 执行真正做删除操作的方法return reallyDelete(); }, function(err) { // 处理错误情况 handle(err) }) } functiondeleteItem(req, res) { // 删除 del().then(function(resultOfDelete) {
7个月前
javascript技术
王少飞 于 7个月前发表 853 1 0
React diff 作为Virtual DOM的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘、最不可思议的部分,本文将剖析 React diff 的不可思议之处。 React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合,特别是其高效的 diff 算法,让用户可以无需顾忌性能问题而”任性自由”的刷新页面,让开发者也可以无需关心 Virtual DOM 背后的运作原理,因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分,并只针对该部分进行实际 DOM 操作,而非重新渲染整个页面,从而保证了每次操作更新后页面的高效渲染,因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。 DIFF 策略 1 Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计。 2 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构。 3 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。
7个月前
javascript技术
json 于 7个月前发表 1094 0 0
什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的代码: // 未使用JSXReact.render( React.createElement('ul', { className: 'list' }, React.createElement('li', null, 'fist li'), React.createElement('li', null, 'second li'), React.createElement('li', null, 'third li') ), document.getElementById('example') ); // 使用JSX React.render( <ul class="list"> <li>fist li</li> <li>second li</li> <li>third li</li> </ul>,
7个月前
javascript技术
coverguo 于 7个月前发表 2693 2 0
前言 最近,团队对测试用例十分的注重,因此,下面是我对测试用例的一些解析。 首先,我们需要知道:为什么需要测试用例? 理由很简单,就是为了在测试用例的辅助下,编写出高质量,可维护代码。 -------------------------------------------------------------------------------- 问题 正如因为地震的爆发,才会有地震仪的诞生。 测试用例的诞生,也必然有其需要解决的问题: 当我们在开发,我们往往会有以下的问题: 需求和开发脱节 当一份需求来了, 开发人员往往不能百分百的理解需求的内容(抛弃产品自己变更需求的可能性。。),这往往会让开发人员开发出的功能会有跟需求有所差别,这会带来额外的工作量 开发和测试脱节 什么是开发和测试脱节,说的是,当开发人员按照自己的想法开发完了一个需求。然后测试人员也按照自己的想法去测试这个需求,然后由于双方的分歧,导致测试认为开发有bug,开发认为测试是sb. 那么如何解决上面的问题呢? 答案就是 选择一种软件敏捷开发模式
7个月前
javascript技术
zzbozheng 于 7个月前发表 978 2 0
最近在做一些关于JSON Schema的基建,JSON Schema可以描述一个JSON结构,那么反过来他也可以来验证一个JSON是否符合期望的格式,于是我想到之前lqlong 之前的一篇 《数据字段防卫探索》 [http://www.imweb.io/topic/56f3892f14ea0f7263803d46] 发现JSON Schema可以做这个事情。 如果之前看我写的 《使用joi来验证数据模型》 [http://www.imweb.io/topic/572561798a0819f17b7d9d3e] 可能会问,为什么不使用JOI,反而使用JSON Schema?因为JOI这个nodejs库,除了验证格式,还带有验证字段关系的功能,库体积相对庞大,而且对于含有嵌套格式的JSON,用JOI来编写验证配置,极为繁琐。JSON Schema清晰简读,用来验证接口数据非常合适。 假设我们有一个期望JSON: { users: [ { id: 1, username: "zzbo", } ] } 我们理解这个JSON结构如下:
7个月前
javascript技术
jaychen 于 8个月前发表 2412 0 0
[http://7tszky.com1.z0.glb.clouddn.com/FpcixPJjbpH-f-CxmctWXwDcOhie] 什么是javascript函数节流?从其字面意思可以大概猜到是一种为提升函数调用执行性能的一种方法。javascript函数节流就是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。 函数节流的经典应用场景:onresize,scroll,mousemove ,mousehover等事件回调函数的无间断执行。其主要实现思路就是通过setTimeout定时器,通过设置缓冲时间,在第一次调用时,创建定时器,并在定时时间结束调用。第二次调用时,会清除前一个定时器并设置新的定时器。如果这时前一个定时器暂未执行,则将其替换为新的定时器。目的在于在一定的时间内,保证多次函数的请求只执行最后一次调用。我们看一个简单实现。
8个月前
javascript技术