许小墨のBlog

Less 必知必会 Less 的使用：https://less.bootcss.com/#-functions- 一、Less 的介绍Less 是一个较为流行的 css 预处理语言。支持变量、混合(Mixin)、函数、计算、循环等特点。由于 Less 是预处理语言，所以不能直接运行，需要先进行编译。 凡是能用 css 编写的效果，都可以用 Less 编写。Less 中支持所有的 css 的语法，向下兼容。 常见预处理语言：LESS SASS stylus 二、Less 中变量的使用(Variables)使用@符号声明一个变量 变量作为 css 的属性值使用 123456@width: 1200px;@height: 50px;.box1 { width: @width; height: @height;} 编译后 1234.box1 { width: 1200px; height: 50px;} 变量作为类名使用（需要将变量名加上大括号） 12345@selector:box2;.@{selector}& ...

Sass 完整指南Sass 是一个 CSS 预处理器，完全兼容所有版本的 CSS。实际上，Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码，节省开发时间。下面就来看看 Sass 中常用的功能吧！ 1. 注释在 Sass 中支持两种类型的注释： 123// 注释一/* 注释二 */ 需要注意，当 Sass 编译成 CSS 时，第一种注释不会编译到 CSS 中（只在 Sass 文件中可见），第二种注释会编译到 CSS 中。 2. 嵌套嵌套的写法是 Sass 的一大特点，通过嵌套这些代码，可以得到类似 HTML 结构的 CSS 代码，使代码更具可读性。 12345678910111213141516nav { background: #c39bd3; padding: 10px; height: 50px; ul { display: flex; list-style: none; justify-content: flex-end; li { color: ...

011_TypeScript 第十一章( TS 的模块和命名空间 ) 模块 前言 : JavaScript 在 ES2015 中引入了模块的概念, 我们的 JS 也开始进行了标准的模块化开发阶段, 在 TS 内沿用了这个概念 在 TS 中, 从语法到概念, 其实和 JavaScript 中基本一致的 因为我们主要是学习 TS, 在这里对模块的语法和概念做一个简单的复习 导出 在一个文件中, 所有的声明都可以利用 export 关键字进行导出 其实就是向外暴露该内容, 被其他模块使用 基础导出 moduleA.ts 1234567891011121314151617// 导出一个变量export const num = 100export const str = 'hello world'export const reg = /^许小墨$/// 导出一个函数export function fn() {}// 导出一个类export class Student {}export class Person extends ...

010_TypeScript 第十章( TS 的装饰器 ) 装饰器 ( Decorators ) 注意 : 装饰器目前是一项实验性特性，在未来的版本中可能会发生改变 装饰器一般使用在以下几个地方 类 类属性 类方法 类方法的参数 通过这些我们也能看得出来, 其实说白了, 就是在类中会使用到装饰器 装饰器的意义 : 说白了, 装饰器就是一个方法, 可以注入到 类, 属性, 方法 中对其进行一些扩展 让我们的一个类变得更加的多样化, 更加的完善 类装饰器 其实就是自己书写一个方法, 对一个类进行扩展 123456789// 准备一个装饰器函数function fn(params: any) { // params 就是将来 fn 去装饰的类 params.prototype.name = 'Jack' params.prototype.sayHi = function () { console.log('hello world') }} 我们就可以在定义这个类的时候, 使用 fn 方 ...

009_TypeScript 第九章( TS 的类 ) 类 ( class ) : 不仅仅是 TS 内给出的, 在 ES6 里面就有类这个概念了, 只不过 TS 让我们的类更加的强大了 我们默认你是认识 ES6 内的 类 的, 如果你还不会, 那么建议你先学习一下 ES6 内的类 定义类 在定义类的时候, 我们通常会在 constructor 内定义属性, 就像这样 12345class Person { constructor(name: string) { this.name = name }} 咋又报错了呢, 是因为在 TS 内, 定义类的属性, 需要提前在 类 内进行说明 1234567class Person { name: string constructor(name: string) { this.name = name }} 只有提前说明过得属性, 才可以在 constructor 内进行定义和赋值 类的继承 这里类的继承其实和 ES6 没有什么区 ...

008_TypeScript 第八章( TS 的断言 ) 断言: 其实就是告诉 TS, 我知道我自己在做什么, 不要你管 因为我们在 TS 的开发过程中, TS 会识别我们写的所有的内容, 然后会傻傻的根据代码去识别你写的内容 先来看个例子吧 123const box = document.querySelector('.box')console.log(box.innerHTML) 一段看似简单的代码, 谁都认识 但是一旦运行起来 这是什么鬼, 为什么会报错呢 浅浅的解释一下 我们通过 querySelector 方法从页面上获取一个元素 这是没有问题的, 但是根据语法, 我们获取到的有可能是一个元素 也有可能是 null, 也就是页面上根本没有这个元素 但是 TS 在识别的时候, 其实是傻傻的, 不会去识别你的 html 元素, 也不会去捕获你的页面 只是单纯的看你书写的 ts 代码, 那么他就会认为, 你有可能获取不到元素 这个时候, 就会给你提示错误了 因为如果万一真的是 null, 那么肯定是不能调用 innerHTML 属性的 错 ...

007_TypeScript 第七章( TS 函数相关 ) 函数, 一个再熟悉不过的话题了, 之前几章里面我们也多次提到过, 而且提到过各种各样的 TS 内和函数相关的内容 今天, 咱们来详细说一下函数内的各种详细内容的使用 函数的可选参数 在 TS 中, 是可以给函数的参数添加类型限制的, 先来看一个例子 1function fn(a: number, b: number): void {} 这就是一个很简单的函数 我们使用的时候, 只要给两个 number 类型的数据作为参数即可 现在呢, 我有一个想法, 就是我使用这个函数的时候, 第二个参数可不可以不填 小伙伴: “这还不简单吗, 给形参来一个默认值”1function fn(a: number, b: number = 0): void {} 完成任务了, 好简单 但是我要说的不是这个, 而是当你的逻辑内需要判断用户是不是没有传递参数的时候 咱们来看下面两个需求 需求 1: 如果确实传递了两个参数, 那么我按照两个参数去计算结果, 如果第二个没有传递, 我给个默认 ...

006_TypeScript 第六章 这一章我们来聊一下 TS 内的高级类型 其实就是把一些基础的东西进行各种各样的组合, 一些相对高级的用法 在之前几章里面我们也或多或少的提到过某些内容 现在就来汇总专门说一下这个事情 交叉类型( Intersection Types ) 这个就和我们运算符里面的 与( && ) 是一样的, 既要 … 又要 … 还要 … O(∩_∩)O~ 使用 & 作为交叉符号 一个小栗子 123456789101112131415161718192021// 对象接口 1interface One { name: string age: number}// 对象接口 2interface Two { gender: string classRoom: number}// 简单准备一个函数function combine(o1: One, o2: Two) { const result = { ...o1, ...o2 } return ...

005_TypeScript 第五章 泛型( generic ) : 先来看一下百度给出的中文解释 这一章我们就来学习一下什么是 TS 内的泛型 泛型 废话不多说, 直接上例子 初识泛型 一个函数, 需要参数是 number 数据类型, 返回值也是 number 数据类型 123function fn(arg: number): number { // 代码忽略不计} 又一个函数, 需要参数是 string 类型, 返回值也是 string 数据类型 123function fn(arg: string): string { // 代码忽略不计} 我们发现, 我们给函数的参数和返回值都进行了限制 假设, 如果两段代码的业务逻辑一样 我们可以不可把两个函数写成一个 需求 : 我传递的是 数字, 返回值就是数字, 传递的是 字符串, 返回值就是 字符串 思考过后, 我们想到可以用 或( | ) 123function fn(arg: number | string): number | string { // 代 ...

004_TypeScript 第四章( TS 的枚举与类型约束 ) 上一章我们讲了 TS 的接口 这一章, 我们就来聊一聊 TS 的枚举和约束 枚举认识枚举 在很多计算机语言中都有枚举的概念, 但是 JS 中是没有枚举这个概念的, 为了弥补这个缺憾 在 TS 加入了枚举类型 什么是枚举呢 ? 枚举( mei ju ) : 枚举的意思就是一一列举, 把所有情况都列举出来, 那么取值的时候, 只有这几个可以使用, 其他的都不行 计算机语言里面的枚举( enumerations ) : 把所有的常量放在一个集合内, 让若干个常量变成一组有关联的内容 12345// 针对一个业务逻辑, 我需要频繁用到四个方向的字符串const UP = 'up'const RIGHT = 'right'const DOWN = 'down'const LEFT = 'left' 对于以上四个变量来说 我不管做任何逻辑, 我没办法限制你只能使用这四个变量中的一个 12// 封装一个功能函数function util(d ...