文章列表
结一 于 17天前发表 338 0 0
在DOM操作时代,tabs的结构一般如下: div.tabs ul.tabs-hd li.hd-tt*n div.tabs-bd div.bd-con*n 然后通过判断 li.hd-tt 的索引值来控制对应的 div.bd-con 的显示隐藏,由此封装成一个非常高效率的组件。 到了以React为代表的数据变化引起UI更新的时代,基于上面方式实现的tabs组件还是非常多的,以Ant Design,IMUI为例,都是这种实现方式。 那么现在我的问题是:在React中,tabs组件是否真的还需要按照这种显示隐藏多个 div.bd-con 的方式? 关于这个问题,这里抛出两个支撑观点: * 在使用tabs组件的时候,需要维护一个state来控制各个tab的切换 * 一般来说各个tab的内容结构多半相似甚至相同,只是数据不同而已 基于这两点,简化版本的tabs其实只需要 ul.tabs-hd 部分,对于内容部分,根本不需要放到tabs里面去封装成组件
17天前
javascript技术
ouven ,https://ouvens.github.io/ 于 23天前发表 704 0 0
2016年结束了,前端技术的发展也将进入到一个新的阶段,那么未来又会给我们带来什么呢?这里就个人发表下意见,欢迎点评。 就前端主流技术框架的发展而言,过去的几年里发展极快,在填补原有技术框架空白和不足的同时也渐渐趋于成熟。未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来,并进入技术迭代优化阶段,例如语言标准、前端框架等。但这并不代表前端领域技术就此稳定了,因为新的技术方向已经出现,并在等待着下一个风口的到来。那么什么是下一个风口?虚拟现实?人工智能?或者其它的?不管未来如何,就前端应用开发方向来讲,MVVM、Virtual DOM和同构的技术解决方案依然会延续发展一段时间。而且这段时间内前端框架技术的变化将不会像原来一样具有颠覆性。 当 MVVM、Virtual DOM或同构等技术实践都有很成熟高效的框架和方案去实现了。那么对于移动端应用,前端要重点发展的下一步可能就是MNV 的原生NativeView开发,例如使用通用的MNV
23天前
javascript技术
孙世吉 于 1个月前发表 439 0 0
1. 尾递归 说起 尾递归 就不能不提一下 尾调用(Tail Call) 。 尾调用:在函数的最后一步调用另外一个函数。 functionfunc(){ // ... other codereturn otherFunc();// 尾调用 } 尾递归:在函数的最后一步调用自身 functionfunc(){ // ... other codereturn func();// 尾递归 } 2. 尾调用和非尾调用 说到递归,那就必然要以斐波那契数列为例子 [http://7tszky.com1.z0.glb.clouddn.com/FnBilj1jvdqTOG8EkuDnazoeLKZg] 斐波那契数列(Fibonacci sequence),又称黄金分割数列、因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个数列:1、1、2、3、5、8、13、21、34、…… 简单的说,斐波那契数列中的每一项都是前两项的和。
1个月前
javascript技术
ShiJianwen 于 1个月前发表 267 0 0
原文链接: https://dotdev.co/clean-up-your-vue-modules-with-es6-arrow-functions-2ef65e348d41#.vkndfgci3 [https://dotdev.co/clean-up-your-vue-modules-with-es6-arrow-functions-2ef65e348d41#.vkndfgci3] 众成翻译地址: http://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev-1872.html [http://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev-1872.html] 最近在重构一个用 Vue1.0 写的项目,我通过使用 ES6 的箭头函数来让代码在不升级 Vue2.0
1个月前
javascript技术
ouven ,https://ouvens.github.io/ 于 2个月前发表 569 0 0
原文链接: http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html [http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html] 前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项目需要长期维护,这时就可以考虑使用一下自动化测试了。 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块,评估运行结果。预设条件应包括正常条件和异常条件,以达到自动运行测试过程、减少或避免人工干预测试的目的。在前端自动化测试中,我们通常是通过不同的工具来解决不同场景下不同的问题的。就测试类型来看,主要分为BDD(Bebavior Driven Developement,行为驱动测试)和TDD(Testing Driven
2个月前
javascript技术
否子戈 于 2个月前发表 859 0 0
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。 不把require和import整清楚,会在未来的标准编程中死的很难看。 REQUIRE时代的模块 node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。 node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。 // a.js// -------- node -----------module.exports = { a : function() {}, b : 'xxx'
2个月前
javascript技术
否子戈 于 3个月前发表 531 0 1
ES6真是颠覆JavaScript的东西,随便翻一个新特性出来,就让自以为是的老古董们傻眼跳楼。在之前接触ember.js的时候,接触到了yield,嫩是半天没明白,yield到底是什么,想要实现什么目的。后来在看ES6的东西的时候,总算好像知道了一点,迫不及待的写出来。 在MDN上,对yield的第一句解释就是: The yield keyword is used to pause and resume a generator function. // yield这个关键字是用来暂停和恢复一个遍历器函数(的运行)的。 这也就是yield的所有解释了,可谓大道至简,然并卵,深层的意思不去挖掘,根本还是没法用它,还是老老实实做老古董。 关键字YIELD 没错,yield是个关键字,不是函数。关键字用来干啥?它的作用是“命令”。和var不同,不是用来声明,但是和return一样,用来告知程序某种状态,return告诉程序要返回什么值(也意味着结束,结束的时候才会返回值嘛),而yield告诉程序当前的状态值,而且你运行到这里给我暂停一下。 因为yield是命令型的关键字,所以它的用法是:
3个月前
javascript技术
zzbozheng 于 4个月前发表 759 0 0
最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB。 PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来打造浏览器的离线应用。 如果你要使用PouchDB,那么建议你的远程数据库使用CouchDB,那样的话可以更好地协调起来。 建立数据库 const localDB = new PouchDB('docs'); const remoteDB = new PouchDB('http://localhost:5984/docs'); 同步本地数据到远程数据库 PouchDB API 提供了方法可以让你备份本地数据到服务器: sync。 live: true 表示如果数据一发生变更,就立即同步到远程服务器。 retry: true 表示如果在离线状态下导致同步失败之后,会自动重新尝试重连,直到连接建立成功为止。该选项在 live:true 时生效。代码如下: const sync = localDB.sync(remoteDB, { live: true, retry: true });
4个月前
javascript技术
结一 于 4个月前发表 835 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结构上。
4个月前
javascript技术
kurtshen 于 5个月前发表 470 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的成员。
5个月前
javascript技术
何方舟 于 5个月前发表 2922 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 已经实现上述想法。
5个月前
javascript技术
朱灵子 于 5个月前发表 667 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到底有哪些方面的区别呢?
5个月前
javascript技术