使用ES6进行开发的思考

ECMAScript6已经于近日进入了RC阶段,而早在其处于社区讨论时,我就开始一直在尝试使用ES6进行开发的方案。在Babel推出后,基于ES6的开发也有了具体可执行的解决方案,无论是Build还是Debug都能得到很好的支持。

而在有了充足的环境、工具之后,我们面临的是对ES6众多新特性的选择和分析,以便选取一个最佳的子集,让我们可以享受ES6带来的便利(减少代码量、提高可读性等)的同时,也可以顺利运行于当前以ES3-ES5为主的浏览器环境中。

经过分析后,本文试图对ES6各个特性得出是否适合应用的初步结论,并一一解释其使用场景。ES6的特性列表选自es6features

  • ★★★ 推荐使用
  • ★★ 有考虑地使用
  • ★ 慎重地使用
  • ☆ 不使用
特性 推荐程度
arrows ★★★
classes ★★★
enhanced object literals ★★★
template strings ★★★
destructuring ★★
default + rest + spread ★★★
let + const ★★★
iterators + for..of ★★
generators
unicode
modules ★★
module loaders
map + set + weakmap + weakset ★★
proxies
symbols
subclassable built-ins
promises ★★★
math + number + string + array + object APIs ★★★
binary and octal literals
reflect api
tail calls ★★

接下来我们以上特性挨个进行介绍。需要关注一点:如果你不想使用shim库(如Babel的browser-polyfill.jsgeneratorsRuntime.js)或者想使用尽可能少的helper(Babel的externalHelpers配置),那么需要按你的需求进一步缩减可使用的ES6特性,如MapSet这些就不应该使用。

阅读全部

VIM的JavaScript补全

最近微软出了个Visual Studio Code,听说很diao,尤其是对JavaScript的补全支持很令人惊艳!

如果你是一个vim党,那么请淡定!

在JavaScript开发过程中,使用vim内置的ins-completion再加上一些插件,我们同样可以获得很牛逼的completion支持!

阅读全部

ETpl的演进

如果有人看过我写的《AMD系列三部曲 》,就会知道我是个唐僧。这次,唐僧想说说ETpl

ETpl是一个JavaScript的模板引擎。JavaScript最广泛被应用于浏览器端,通常JavaScript模板引擎的作用就是生成HTML串。ETpl当前的版本是3.0,也就是说,算上最初设计时,它经历了3次技术上比较大的选型。

今天,ETpl号称是一个强复用灵活高性能的JavaScript模板引擎,有很多别人有或者别人没有的功能,这些都是what。而我一直认为why比what更重要,了解背后的原因、了解思考的过程比知道是什么有更大的收获,所以这次想要啰嗦的,是ETpl在走到今天的过程中,那些what背后的why。如果你能忍受我的八婆把它看完,应该多少能有点收获,越到后面技术点越多噢。

因为本篇比较长,开始先求个star支持下呗,反正不花钱

阅读全部

嵌套条件的重构

嵌套的条件判断会导致方法的正常执行路径不明晰,使代码可读性下降。本文提供一种对嵌套条件重构的方法,能有效提升代码的可读性。

原文:http://sourcemaking.com/refactoring/replace-nested-conditional-with-guard-clauses

条件判断会导致方法的正常执行路径不明晰。

特例一概使用 Guard Clauses

阅读全部

在 Javascript 中实现调用父类同名方法的语法糖(this._super())

在很多 OO 的语言中,都提供了某种便捷的语法糖去调用基类中被子类覆盖的方法,比如在 Java 中:

1
2
3
4
5
6
7
8
9
10
11
12
public class A {
void method() {
System.out.println("A");
}
}

public class B {
void method() {
super.method();
System.out.println("B");
}
}

在 Python 中:

1
2
3
4
5
6
7
8
class A
def method():
print('A')

class B(A)
def method():
super(B, self).method()
print()

这种调用方式的好处在于:基类名称变化后,子类不用多处的修改,同时语义也比直接引用父类方法更加清晰。

在 JS 中,我设想了以下方式的语法调用:

阅读全部

PC端大型单页式商业内容管理系统的JS模块化构建探索

前提

为了不被喷得太惨,给标题加了这么多的限制定语也是相当不容易的了。此文讨论的是我所处的环境下对JavaScript构建的一些简单探索,因此有相当多的前提限制。

首先,何为大型。从我们的系统来看,20多个业务模块,近100个页面组成的单页系统,对应的业务源码代码量如下:

阅读全部