LOADING...

loading

Gregory

因为热爱 旦暮复兮

TypeScript类(class)

学习笔记 2021/6/14

抽象类

抽象类做为其它派生类的基类使用,它们一般不会直接被实例化,抽象类可以包含成员的实现细节。

abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。

比如我们创建一个 Animal 抽象类:

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('roaming the earch...');
    }
}

我在实例化此抽象类会报错:

图片

我们不能直接实例化抽象类,通常需要我们创建子类继承基类,然后可以实例化子类。

class Pig extends Animal {
 
    makeSound() {
        console.log('heng heng')
    }
}
 
const pig = new Pig()
 
pig.makeSound()
pig.move()

访问限定符

传统面向对象语言通常都有访问限定符,TypeScript 中有三类访问限定符,分别是: publicprivateprotected

public

在 TypeScript 的类中,成员都默认为 public, 被此限定符修饰的成员是可以被外部访问。

class Car {
    public run() {
        console.log('启动...')
    }
}
 
const car = new Car()
 
car.run()
private

当成员被设置为 private 之后, 被此限定符修饰的成员是只可以被类的内部访问。

图片
protected

当成员被设置为 protected 之后, 被此限定符修饰的成员是只可以被类的内部以及类的子类访问。

class Car {
    protected run() {
        console.log('启动...')
    }
}
 
class GTR extends Car {
    init() {
        this.run()
    }
}
 
const car = new Car()
const gtr = new GTR()
 
car.run() // [ts] 属性“run”受保护,只能在类“Car”及其子类中访问。
gtr.init() // 启动...
gtr.run() // [ts] 属性“run”受保护,只能在类“Car”及其子类中访问。
阅读全文

TypeScript方法(function)

学习笔记 2021/6/12

定义函数类型

我们在 TypeScript 中的函数并不需要刻意去定义,比如我们实现一个加法函数:

const add = (a: number, b: number) => a + b

实际上我们只定义了函数的两个参数类型,这个时候整个函数虽然没有被显式定义,但是实际上 TypeScript 编译器是能知道到这个函数的类型的:

图片

VSCode 的类型提示看到,TypeScript 已经推断出了整个函数的类型,虽然我们并没有显式定义出来,这就是所谓的 类型推断。

阅读全文

TypeScript接口(interface)

学习笔记 2021/6/10

接口(interface)是一个非常强大的代码类型定义描述

接口的使用

有一个函数,这个函数接受一个 User 对象,然后返回这个 User 对象的 name 属性:

const getUserName = (user) => user.name
阅读全文

attr counter calc使用技巧

在CSS中用attr()显示HTML属性值

attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。要想使用这个功能,你需要用到三种元素:一个:before:after CSS伪类样式,content属性,和一个带有你想使用的HTML属性名称的attr()表达式。

例如,想去显示<h3>标题上的data-prefix属性的值,你可以写成这样:

h3:before{
  content: attr(data-prefix) ""
}

<h3 (data-prefix="Custom prefix">标题</h3>

显然,这个例子并没有展示它有多大用处,只是展示了它的基本用法。

让我们来试一个更有用的例子,attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。

阅读全文

CSS Motion Path技术研究

技术分享 2021/5/13

最近在看css3手册时忽然发现了新的动画属性css, 名叫Motion Path,利用Motion Path,我们可以控制元素按照特定的路径进行位置变换的动画。并且,这个路径可以是非常复杂的一条路径。

CSS Motion Path 规范主要包含以下几个属性:

  • offset-path:接收一个 SVG 路径(与 SVG 的path、CSS 中的 clip-path 类似),指定运动的几何路径
  • offset-distance:控制当前元素基于 offset-path 运动的距离
  • offset-position:指定 offset-path 的初始位置
  • offset-anchor:定义沿 offset-path 定位的元素的锚点。 这个也算好理解,运动的元素可能不是一个点,那么就需要指定元素中的哪个点附着在路径上进行运动
  • offset-rotate:定义沿 offset-path 定位时元素的方向,说人话就是运动过程中元素的角度朝向
阅读全文

nth-child(n)和nth-of-type(n)

学习笔记 2021/4/20

介绍

:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>标签
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个元素开始计数
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素的第二个<p>元素的每个<p>元素
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个元素开始计数

我们通常不会在标签后面,而是 .class后加上这类选择器,但是有时候无法得到我们想要的效果。

.class:nth-child(n) 会直接在 .class 的父元素中找,如果第n个子元素是 .class 属性,则匹配成功。

.class:nth-of-type(n) 会先判断 .class 是什么标签,再在父元素中查找该标签,如果第n个该标签的元素是 .class 属性,则匹配成功。

阅读全文

scss/less书写建议

技术分享 2021/3/25

属性书写顺序

  1. 位置属性(position, top, right, z-index, display, float等)

  2. 大小(width, height, padding, margin)

  3. 文字系列(font, line-height, letter-spacing, color- text-align等)

  4. 背景(background, border等)

  5. 其他(animation, transition等)

总结: 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性

阅读全文

Json.stringify九个特征

2021/1/7

特性一

undefined、任意的函数以及symbol值,出现在非数组对象的属性值中时在序列化过程中会被忽略
undefined、任意的函数以及symbol值出现在数组中时会被转换成 null
undefined、任意的函数以及symbol值被单独转换时,会返回 undefined

阅读全文

用css实现一个旋转的立方体

技术分享 2020/12/23

简介

从perspective说起

perspective作为一个css样式,表示了从屏幕视角出发,与3D元素容器的距离。值越大,透过屏幕看过去,与3D元素距离越远。

阅读全文

头像与国旗的融合

技术分享 2020/10/1

到国庆,大家都急着给祖国母亲庆生。

每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款:
图片

那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何简单实现呢?

有人认为是改变其中一张图的透明度,实际上不是的。仔细观察合成后的头像,最左边的基本上只能看到红旗看不到原本的头像内容,而最右边基本只能看到头像而不再显示红旗的红色背景。

阅读全文
头像
Gregory Wu
陌上花开 可缓缓归矣