混入

JavaScript ES2015 中对象继承的模式

发表于 by 愚人码头 被浏览 1,262 次

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

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

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

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

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

Sass入门教程

发表于 by 愚人码头 被浏览 6,225 次

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

使用 Sass 优点：

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

Sass 的语法分为：

  • 新的SCSS  ( Sassy CSS、Sass 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 。 继续阅读 →