JavaScript ES2015 中对象继承的模式

随着期待已久的ES2015(以前称为ES6)到来,JavaScript 配备了专门用于定义 类(classes) 的语法。在这篇文章中,我将探索如何利用类语法用较小的部分来组成一个类。

将层次结构的深度保持在最低限度对于保持代码整洁很重要。这有助于你了解如何巧妙的分割类。对于一个大的代码库,一个选择是用较小的部分创建类;再组合成一个大类。这也是避免重复代码的常见策略。

想像一下,我们正在构建一个游戏,玩家生活在动物世界中。有些是朋友,其他的是敌人(像狗,可能会说所有的猫都是敌人)。我们可以创建一个 HostileAnimal 类,它扩展了类 Animal,作为 Cat 的基类。在某些时候,我们决定添加机器人来伤害人类。我们首先做的是创建 Robot 类。我们现在有两个类具有相似的属性。例如,HostileAnimalRobot 都有 attack() (攻击)方法。

如果我们可以以某种方式在一个单独的类或对象中定义一个称为 Hostile 类来表示敌对, 那么我们可以让 CatRobot 可以重复使用这个类。我们可以以各种方式做到这一点。

多重继承 是传统的 OOP 语言支持的一项功能。顾名思义,它给我们带来一种能力:创建一个继承自多个基类的类。看看 Cat 类如何在以下 Python 代码中扩展多个基类: 继续阅读

Sass入门教程

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。 继续阅读