PostCSS简易教程

2017年7月16日

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more


PostCSS是个平台，在这个平台上你可以找到各种对CSS进行编译转换的插件。通过使用插件你可以达到CSS预编译器的效果。但PostCSS的用途不是只是一个CSS预处理器，它是个CSS生态系统。

阅读更多

React应用测试

2017年5月17日

开发人员编写测试单元已经是软件开发很重要的一部分。如果你的代码结构清晰组织良好，你编写测试单元时会觉得很轻松。但是如果你发现单元测试无法下手写时，往往是因为你的代码结构上有问题了，这时你需要重新组织下代码结构了。
Jest 是Facebook 开源维护的一款测试React应用的测试框架。Jest 不限于测试React应用，它能够满足前端各种测试需求。

阅读更多

TypeScript中的class

2017年5月10日

在ES6中 Javascript迎来了 class, 虽然它只是原型链的一种变种写法.它也很大的改变了Javascript世界中的编码方式.Typescript的class完全兼容ES6中的class, 并提供了一些特殊的能力.

基础概念介绍

虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。

  • 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
  • 对象（Object）：类的实例，通过 new 生成
  • 面向对象（OOP）的三大特性：封装、继承、多态
  • 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
  • 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
  • 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
  • 存取器（getter & setter）：用以改变属性的读取和赋值行为
  • 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
  • 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  • 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

类的定义

1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
    public name;
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}

let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

class关键字定义类名,首字母推荐大写.

constructor是类的构造器,在实例化类的时候自动调用该方法.

在类体中可以定义,类的属性(name)和方法(sayHi)

阅读更多

TypeScript中的泛型

2017年5月3日

泛型的作用是在运行时动态的指定变量的类型. 从而做到静态类型的最大代码复用.

泛型基本用法

没有使用泛型,代码会显的比较机械:不同类型的变量,虽然方法体一样,但我们还是会写两遍:

1
2
3
4
5
6
7
8
9
10
11
function operateNumber (a:number,b:number):number {
  //xxxx
  let c:number;
  return c
}

function operateString(a:string, b:string):string {
  //xxxx
  let c:string;
  return c
}
阅读更多

Jest实例教程

2017年4月24日

Jest 是个开源的基于Jasmine框架的JavaScrit 单元测试框架。

Jest的目标是减少开始测试一个项目所要花费的是件和认知负荷。

  • Jeff Morrison

Jest的特点，易于组织，快速响应，测试快照。

阅读更多

TypeScript中的interface和type

2017年4月22日

Typescript的本质就是Javasript,只是提供了Javascript目前没有的一些特性.它并不是一门新的编程语言.它和Dart、Cofferscript这些可以转换成Javascript语言是不同的.

Typescript和Javacript最大的不同点就是它的类型系统.围绕类型系统,Typescript提供了:interface和type来声明一个值的类型.

interface和type初看起来没啥区别,官方给的解释是:

Unlike an interface declaration, which always introduces a named object type, a type alias declaration can introduce a name for any kind of type, including primitive, union, and intersection types.

阅读更多

TypeScript实践手册

2017年4月14日

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。

TypeScript拥有JavaScript还没有的特性，例如：类型，接口，模块，类型注释。使用这些特性和功能，我们可以更容易开发大规模的JavaScript应用。

阅读更多