前端构建:3类13种热门工具的选型参考

2018-11-30
阅读 6 分钟
12.6k
在前端项目的规模和复杂性不断提升的情况下,各类构建思想和相应工具层出不穷。本文竭己所能对比了当下13个构建工具,包括Browserify、Webpack、Rollup、Grunt、Gulp和Yeoman6个广为流行的工具,FIS、Athena、WeFlow和Cooking等4个国产工具,以及三大框架:React,Vue和Angular的官方脚手架。希望能在项目初期的构建工具...

Class:向传统类模式转变的构造函数

2018-09-21
阅读 8 分钟
5.8k
JS基于原型的‘类’,一直被转行前端的码僚们大呼惊奇,但接近传统模式使用class关键字定义的出现,却使得一些前端同行深感遗憾而纷纷留言:“还我独特的JS”、“净搞些没实质的东西”、“自己没有类还非要往别家的类上靠”,甚至是“已转行”等等。有情绪很正常,毕竟新知识意味着更多时间与精力的开销,又不是简单的闭眼享受。

Async:简洁优雅的异步之道

2018-08-31
阅读 9 分钟
16.3k
在异步处理方案中,目前最为简洁优雅的便是async函数(以下简称A函数)。经过必要的分块包装后,A函数能使多个相关的异步操作如同同步操作一样聚合起来,使其相互间的关系更为清晰、过程更为简洁、调试更为方便。它本质是Generator函数的语法糖,通俗的说法是使用G函数进行异步处理的增强版。

Generator:JS执行权的真实操作者

2018-08-20
阅读 8 分钟
8.6k
ES6提供了一种新型的异步编程解决方案:Generator函数(以下简称G函数)。它不是使用JS现有能力按照一定标准制定出来的东西(Promise是如此出生的),而是具有新型底层操作能力,与传统编程完全不同,代表一种新编程逻辑的高大存在。简洁方便、受人喜爱的async函数就是以它为基础实现的。

Set & Map:新生的数据集合及其弱引用衍生

2018-08-10
阅读 5 分钟
2.7k
ES6新增了两种基本的原生数据集合:Set和Map(加上Array和Object现在共有四种),以及由两者衍生出的弱引用集合:WeakSet和WeakMap。从某个不无狭隘的角度看(不无狭隘?到底有多狭隘多不狭隘呢?),Set更为类似Array集合的某种提升,而Map则为Object集合的增强,虽然两类在本质上就不相同。

Iterator:访问数据集合的统一接口

2018-07-20
阅读 5 分钟
7.4k
遍历器Iterator是ES6为访问数据集合提供的统一接口。任何内部部署了遍历器接口的数据集合,对于用户来说,都可以使用相同方式获取到相应的数据结构。如果使用的是最新版Chrome浏览器,那么你要知道——我们所熟悉的数组小姐,已悄悄的打开了另一扇可抵达她心扉的小径。

移除注释的完善思路:真的可以用正则实现?

2018-07-12
阅读 11 分钟
15.2k
网上有很多自称能实现移除JS注释的正则表达式,实际上存在种种缺陷。这使人多少有些愕然,也不禁疑惑到:真的可以用正则实现吗?而本篇文章以使用正则移除JS注释为目标,通过实践,由浅及深,遇到问题解决问题,一步步看看到底能否用正则实现!

ES6精华:Proxy & Reflect

2018-07-10
阅读 6 分钟
5.2k
本文主要介绍了ES6中Proxy和Reflect的精华知识,并附有恰当实例。Proxy意为代理器,通过操作为对象生成的代理器,实现对对象各类操作的拦截式编程。Reflect是一个包揽更为严格、健全的操作对象方法的模块。因为Proxy所能代理的方法和Reflect所包括的方法基本对应,而且在拦截方法里应该使用对应的Reflect方法返回结果,...

完善的输入框监听方案:兼容、高效和组合输入友好

2018-07-04
阅读 4 分钟
7.9k
监听输入框的输入,最原始的方法是使用keyup事件。 不使用change事件,它只会在输入框失去焦点后被触发。 此方式兼容性广,但效率较低,毕竟任意的按键都会触发该事件。

ES6精华:Promise

2018-06-29
阅读 8 分钟
7.8k
某天,突发奇想,发了封邮件给木匠师傅,定制一个如此这般的家具。 木匠有求必应,即是说,邮件一旦发出就得到了他的承诺(Promise):在下一定尽力。

ES6精华:数值扩展

2018-06-26
阅读 3 分钟
2.9k
JS采用IEEE 754标准的64位双精度格式存储数值。 数值的精度最多可达到53个二进制位(1个隐藏位和52个有效位)。 如果数值的精度超过此限度,第54位及后面的会被丢弃。

ES6精华:函数扩展

2018-06-22
阅读 6 分钟
3.5k
箭头函数没有自己的this,其使用的this是引用外层的(类似闭包)。 因此其里面的this是固定的,在定义的那一刻起就已经确定,不会再变。

ES6精华:正则扩展

2018-06-20
阅读 4 分钟
3k
本篇概括了ES6中正则表达式新增部分的精华要点(最好有ES5的基础)。 1 u 标志 使正则处于Unicode模式。 关于ES6的字符扩展知识,可查看这里。 1.1 四字节字符 处于Unicode模式下的正则,可以正确识别32位(四字节)字符。 {代码...} 处于Unicode模式下的正则,支持带{}的Unicode表示法。 {代码...} 处于Unicode模式下的...

ES6精华:字符串扩展

2018-06-13
阅读 4 分钟
3k
JS内部使用UTF-16编码规则(网页通常为UTF-8)。 1字符固定为2字节,1字节为8位(二进制),其码点小于0xFFFF。 有些符号的码点大于0xFFFF,需4字节表示,即常说的32位UTF-16字符。

ES6精华:Symbol

2018-06-11
阅读 4 分钟
5k
它是JS的第七种类型,属于基本类型。 它表示一个独一无二的值,行为类似字符串。 它是直接通过Symbol函数生成的,可以传入字符作为该值的描述。

ES6精华:解构赋值

2018-05-29
阅读 2 分钟
2.6k
当解构的目标为非对象时,会将目标转化成相应类型的对象。 NaN可以使用Number构造函数生成,可以被解构。 null和undefined是单值,没有相应的构造函数,不能被解构。

ES6精华:Let & Const

2018-05-28
阅读 2 分钟
3k
let和const都是声明变量的新方式。 一般的,由于这两种声明方式的特性,现在项目组的开发规范中都会要求:不使用var而是let或const。

谷歌服务:Google Maps JavaScript API

2018-05-07
阅读 2 分钟
5.4k
使用前准备 能访问外网,有Google账户。 进入开发者控制台 谷歌开发者控制台 创建项目 初次需要创建一个项目,作为使用的依托。 我们创建名为test的项目,进入后再选择API和服务模块。 启用相应API 点击左侧库模块,进入API选择页面,找到Google Maps JavaScript API点击并启用。 创建密钥 点击左侧密钥模块,创建一个AP...