文章列表
ShiJianwen 于 4个月前发表 735 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
4个月前
javascript技术
ouven ,https://ouvens.github.io/ 于 4个月前发表 973 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
4个月前
javascript技术
否子戈 于 5个月前发表 2652 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'
5个月前
javascript技术
否子戈 于 5个月前发表 816 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是命令型的关键字,所以它的用法是:
5个月前
javascript技术
zzbozheng 于 6个月前发表 1066 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 });
6个月前
javascript技术
结一 于 7个月前发表 1131 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结构上。
7个月前
javascript技术
kurtshen 于 7个月前发表 668 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的成员。
7个月前
javascript技术
何方舟 于 7个月前发表 3478 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 已经实现上述想法。
7个月前
javascript技术
朱灵子 于 7个月前发表 855 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到底有哪些方面的区别呢?
7个月前
javascript技术
孙世吉 于 7个月前发表 1162 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": {
7个月前
javascript技术
Red626 于 8个月前发表 1099 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,何乐而不为呢? 概念介绍
8个月前
javascript技术
孙世吉 于 8个月前发表 3068 0 1
引言 最近实践中需要用到大量的异步回调风格代码的编写,作者最近处于同步编程风格转为异步编程风格的状态。同时第一时间遇到了下面提到的代码,第一直觉就是该代码肯定有问题!但是问题在哪里有讲不出来,感觉非常蛋疼与疑惑。先上当时遇到的代码: // 删除,先检查是否存在,存在再执行真正的删除动作functiondel() { // 查找return find().then(function(resultOfFind) { // 如果没找到,直接返回if (!resultOfFind) { returnfalse; } // 执行真正做删除操作的方法return reallyDelete(); }, function(err) { // 处理错误情况 handle(err) }) } functiondeleteItem(req, res) { // 删除 del().then(function(resultOfDelete) {
8个月前
javascript技术