自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(57)
  • 收藏
  • 关注

原创 【css】层叠上下文

我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

2024-06-04 15:42:01 1126

原创 【vue】通过js加载vue组件

【代码】【vue】通过js加载vue组件。

2024-05-09 16:40:38 319

原创 vue history模式下$router.push为什么不会刷新页面

该方法不会刷新页面,会向浏览器的会话历史栈增加一个条目。

2024-04-19 16:15:05 470

转载 语义化版本 2.0.0

主版本号:当你做了不兼容的 API 修改,次版本号:当你做了向下兼容的功能性新增,修订号:当你做了向下兼容的问题修正。先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面,作为延伸。在软件管理的领域里存在着被称作“依赖地狱”的死亡之谷,系统规模越大,加入的包越多,你就越有可能在未来的某一天发现自己已深陷绝望之中。在依赖高的系统中发布新版本包可能很快会成为噩梦。如果依赖关系过高,可能面临版本控制被锁死的风险(必须对每一个依赖包改版才能完成某次升级)。

2024-04-08 15:07:45 23

原创 flex布局——align-content

如果项目只有一根轴线,该属性不起作用。align-content属性定义了。

2024-04-08 14:40:22 358

原创 ES6——26、编程风格

本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范,下面的内容主要参考了公司的 JavaScript 风格规范。

2024-04-07 09:31:11 928

原创 ES6——25、Module 的加载实现

JavaScript 现在有两种模块。一种是 ES6 模块,简称 ESM;另一种是 CommonJS 模块,简称 CJS。CommonJS 模块是 Node.js 专用的,与 ES6 模块不兼容。语法上面,两者最明显的差异是,CommonJS 模块使用require()和,ES6 模块使用import和export。它们采用不同的加载方案。从 Node.js v13.2 版本开始,Node.js 已经默认打开了 ES6 模块支持。Node.js 要求 ES6 模块采用.mjs后缀文件名。

2024-04-07 09:21:42 524

原创 ES6——24、Module 的语法

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。

2024-04-06 15:35:36 874

原创 ES6——23、Class 的继承

Class 可以通过extends关键字实现继承,让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承,要清晰和方便很多。上面示例中,Point是父类,ColorPoint是子类,它通过extends关键字,继承了Point类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point类。下面,我们在ColorPoint内部加上代码。上面示例中,方法和toString()方法内部,都出现了super关键字。super。

2024-04-06 15:18:25 918

原创 typescript——15.命名空间和模块

这篇文章将概括介绍在TypeScript里使用模块与命名空间来组织代码的方法。我们也会谈及命名空间和模块的高级使用场景,和在使用它们的过程中常见的陷阱。查看模块章节了解关于模块的更多信息。查看命名空间章节了解关于命名空间的更多信息。

2024-04-03 10:35:02 891

原创 typescript——16.模块解析

这节假设你已经了解了模块的一些基本知识 请阅读文档了解更多信息。模块解析是指编译器在查找导入模块内容时所遵循的流程。假设有一个导入语句;为了去检查任何对a的使用,编译器需要准确的知道它表示什么,并且需要检查它的定义moduleA。这时候,编译器会有个疑问“moduleA的结构是怎样的?” 这听上去很简单,但moduleA可能在你写的某个.ts.tsx文件里或者在你的代码所依赖的.d.ts里。首先,编译器会尝试定位表示导入模块的文件。编译器会遵循以下二种策略之一:Classic或Node。

2024-04-03 10:22:57 828

原创 typescript——21.三斜线指令

三斜线指令是包含。。三斜线指令仅可放在包含它的文件的最顶端。一个三斜线指令的前面只能出现单行或多行注释,这包括其它的三斜线指令。如果它们出现在一个语句或声明之后,那么它们会被当做普通的单行注释,并且不具有特殊的涵义。

2024-04-03 10:02:55 769

原创 typescript——20.Mixins

除了传统的面向对象继承方式,还流行一种通过可重用组件创建类的方式,就是联合另一个简单类的代码。你可能在Scala等语言里对mixins及其特性已经很熟悉了,但它在JavaScript中也是很流行的。

2024-04-03 09:54:47 126

原创 typescript——17.声明合并

TypeScript中有些独特的概念可以在类型层面上描述JavaScript对象的模型。这其中尤其独特的一个例子是“声明合并”的概念。理解了这个概念,将有助于操作现有的JavaScript代码。同时,也会有助于理解更多高级抽象的概念。

2024-04-03 09:51:43 728

原创 typescript——11.Symbols

自ECMAScript 2015起,symbol成为了一种新的原生类型,就像number和string一样。symbol类型的值是通过Symbol构造函数创建的。Symbols是不可改变且唯一的。像字符串一样,symbols也可以被用做对象属性的键。Symbols也可以与计算出的属性名声明相结合来声明对象的属性和类成员。

2024-04-03 08:47:30 369

原创 ES6——22、Class 的基本语法

类的属性和方法,除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。this.x = x;this.y = y;上面代码中,x和y都是实例对象point自身的属性(因为定义在this对象上),所以方法返回true,而toString()是原型对象的属性(因为定义在Point类上),所以方法返回false。这些都与 ES5 的行为保持一致。

2024-04-01 15:54:05 656

原创 ES6——21、async 函数

ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是什么?一句话,它就是 Generator 函数的语法糖。前文有一个 Generator 函数,依次读取两个文件。上面代码的函数gen可以写成async函数,就是下面这样。一比较就会发现,async函数就是将 Generator 函数的星号()替换成async,将yield替换成await,仅此而已。

2024-04-01 14:42:33 947

原创 ES6——20. Generator 函数的异步应用

异步编程对 JavaScript 语言太重要。JavaScript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。本章主要介绍 Generator 函数如何完成异步操作。

2024-04-01 14:09:58 872

原创 typescript——14.命名空间

这篇文章描述了如何在TypeScript里使用命名空间(之前叫做“内部模块”)来组织你的代码。就像我们在术语说明里提到的那样,“内部模块”现在叫做“命名空间”。另外,任何使用 module关键字来声明一个内部模块的地方都应该使用namespace关键字来替换。这就避免了让新的使用者被相似的名称所迷惑。

2024-04-01 10:31:31 638

原创 typescript——13.模块

从ECMAScript 2015开始,JavaScript引入了模块的概念。TypeScript也沿用这个概念。模块在其自身的作用域里执行,而不是在全局作用域里这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import形式之一。模块是自声明的两个模块之间的关系是通过在文件级别上使用imports和exports建立的。模块使用模块加载器去导入其它的模块。

2024-04-01 10:23:34 1002

原创 typescript——12.迭代器和生成器

本节可参考。

2024-04-01 09:34:29 261

原创 typescript——9.类型兼容性

TypeScript里的类型兼容性是基于的。结构类型是一种只使用其成员来描述类型的方式。它正好与名义(nominal)类型形成对比。(译者注:在基于名义类型的类型系统中,数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。这与结构性类型系统不同,它是基于类型的组成结构,且不要求明确地声明。在使用基于名义类型的语言,比如C#或Java中,这段代码会报错,因为Person类没有明确说明其实现了Named接口。TypeScript的结构性子类型是根据JavaScript代码的典型写法来设计的。

2024-04-01 09:29:59 1080

原创 typescript——8.类型推论

这节介绍TypeScript里的类型推论。即,类型是在哪里如何被推断的。

2024-04-01 08:56:37 229

原创 typescript——7.枚举

使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举。

2024-03-30 15:10:45 1064

原创 typescript——6.泛型

软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

2024-03-30 10:41:51 842

原创 typescript——5.函数

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript能够根据返回语句自动推断出返回值类型,因此我们通常省略它。

2024-03-30 10:10:01 1005

原创 typescript——4.类

​ // ...) {}它可能看上去不像是有属性的类,但它确实有,利用的是 Typescript 提供的简写形式 — 用构造函数的参数直接定义属性。声明了一个构造函数参数及其类型声明了一个同名的公共属性当我们 new 出该类的一个实例时,把该属性初始化为相应的参数值。

2024-03-30 09:56:14 967

原创 typescript——3.接口

接口:约束、限制类型检查器会查看printLabel的调用。printLabel有一个参数,并要求这个对象参数有一个名为label类型为string的属性。需要注意的是,我们传入的对象参数实际上会包含很多属性,但是编译器只会检查那些必需的属性是否存在,并且其类型是否匹配。然而,有些时候TypeScript却并不会这么宽松,我们下面会稍做讲解。LabelledValue接口就好比一个名字,用来描述上面例子里的要求。它代表了有一个 label属性且类型为string的对象。

2024-03-29 13:43:48 1092

原创 typescript——1.基础类型

TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。

2024-03-29 13:42:08 670

原创 ES6——19. Generator 函数的语法

1、简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数

2024-03-29 13:33:14 1058

原创 ES6——18. Iterator 和 for...of 循环

本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作 Map 结构使用,ES5 没有 Map 结构,而 ES6 原生提供了。其次,Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。上面代码中,我们将它的遍历接口改成数组的。由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。

2024-03-28 15:34:49 887

原创 ES6——17. Promise对象

到了那个时候,Promise 的运行已经结束了,所以这个错误是在 Promise 函数体外抛出的,会冒泡到最外层,成了未捕获的错误。方法接受一个数组作为参数,数组的每个成员都是一个 Promise 对象,并返回一个新的 Promise 对象。这就是说,Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是“Promise 会吃掉错误”。事件的监听函数有两个参数,第一个是错误对象,第二个是报错的 Promise 实例,它可以用来了解发生错误的环境信息。方法,依次指定了两个回调函数。

2024-03-28 14:49:23 1360

原创 ES6——16.Reflect

Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。将Object对象的一些明显属于语言内部的方法(比如),放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。也就是说,从Reflect对象上可以拿到语言内部的方法。修改某些Object方法的返回结果,让其变得更合理。比如,在无法定义属性时,会抛出一个错误,而则会返回false。// 老写法。

2024-03-28 10:41:29 1048

原创 ES6——15. Proxy

Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。${} , {`);`);} });!`);`);} });!`);

2024-03-28 08:56:22 1063

原创 ES6——14. Set 和 Map 数据结构

另外,由于 WeakSet 内部有多少个成员,取决于垃圾回收机制有没有运行,运行前后很可能成员个数是不一样的,而垃圾回收机制何时运行是不可预测的,因此 ES6 规定 WeakSet 不可遍历。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。也就是说,上面的 DOM 节点对象除了 WeakMap 的弱引用外,其他位置对该对象的引用一旦消除,该对象占用的内存就会被垃圾回收机制释放。WeakMap 保存的这个键值对,也会自动消失。

2024-03-27 11:20:50 1009

原创 ES6——12.运算符的扩展

不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。这个运算符的一个特点是右结合,而不是常见的左结合。如果属性链有圆括号,链判断运算符对圆括号外部没有影响,只对圆括号内部有影响。现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。也就是说,链判断运算符一旦为真,右侧的表达式就不再求值。运算符相当于一种短路机制,只要不满足条件,就不再往下执行。上面代码中,首先计算的是第二个指数运算符,而不是第一个。

2024-03-27 11:00:39 604

原创 ES6——11.对象的新增方法

ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。不同之处只有两个:一是+0不等于-0,二是NaN。

2024-03-27 10:19:02 557

原创 ES6——10.对象的扩展

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。除了属性简写,方法也可以简写。CommonJS 模块输出一组变量,就非常合适使用简洁写法。注意,简写的对象方法不能用作构造函数,会报错。

2024-03-27 10:18:10 867

原创 ES6——9.数组的扩展

含义扩展运算符(spread)是三个点(...它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。扩展运算符与正常的函数参数可以结合使用,非常灵活。扩展运算符后面还可以放置表达式。如果扩展运算符后面是一个空数组,则不产生任何效果。注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。上面三种情况,扩展运算符都放在圆括号里面,但是前两种情况会报错,因为扩展运算符所在的括号不是函数调用。替代函数的 apply 方法由于扩展运算符可以展开数组,所以不再需要apply。

2024-03-27 10:17:26 867

原创 ES6——8.函数的扩展

ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。参数变量是默认声明的,所以不能用let或const再次声明。使用参数默认值时,函数不能有同名参数。另外,一个容易忽略的地方是,参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。上面代码中,参数p的默认值是x + 1。这时,每次调用函数foo,都会重新计算x + 1,而不是默认p等于 100。

2024-03-27 10:15:20 1032

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除