TypeScript 中的 type 和 interface:你真的了解它们的不同吗?
如果你有写过 Vue3 的项目,那么对 TypeScript 肯定不会陌生。不管是公司新项目技术选型还是个人学习开发新的前端项目,Vue3 + TypeScript 已经成为首选技术方案之一
在 TypeScript 这个强大的静态类型系统中,type 和 interface 是两个重要的关键字,用于定义和描述数据类型。然而,这两者之间的区别是什么,在实际开发过程中我们要怎么用呢?废话不说,直接进入正题,就让我们一起深入探讨吧
一、type 和 interface 的定义
type: 可以定义一个集合,可以包含各种类型的属性和值,以用来描述对象、函数、联合类型、交叉类型等
12345type Person = { name: string; age: number; sex: 0 | 1;};
interface:它定义了一个对象的形状,描述了对象应该具有的属性及其类型12345interface Person { name: string; age: number; sex: 0 | 1;}
通过上面的示例,我们可以看到,虽 ...
手摸手,带你实现移动端H5瀑布流布局
移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状。但是它们的宽度通常都是相同的
因为移动端瀑布流布局主要为竖向瀑布流,因此本文所探讨的是竖向瀑布流
特点竖向瀑布流布局主要有下面几种特点:
一般出现在移动端 H5 页面底部
主要以图片或视频为主
降低页面复杂度,节省空间,可以容纳更多内容
不规则展示,不会那么枯燥,用户体验好
难以或者说不能滚动到页面最底部
不同于传统的分页,瀑布流因为以上这些特点一般被用在这些场景下:
推荐机制下的信息 即根据用户画像推荐或者运营人员推荐的信息
大分类下的信息流 展示的信息有很多,它们的大分类都是相同的,适合用户不明确详细需要获得什么信息或商品的情况下
各个信息或商品之间没有比较强的相关性 和上面一条类似,展示的不是千遍一律的东西,相对独立的信息或商品也许能让用户意外发掘到想要的东西
实现一般来说主要分为 CSS 实现和 JS 实现
CSS 实现主要是用到一些专门的样式属性,实现起来简单,但是往往会有兼容性问题
JS 实现的方法则 ...
这几种方法帮你快速实现回到页面顶部
背景介绍当页面内容很多的时候,用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时,他可能需要不断滚动鼠标滚轮,这就导致用户体验将很差。鉴于这种情况, “回到顶部”这一功能便出现了。
如今在我们浏览网站的时候,常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种,一种是直接回到页面的顶部,这种方式简单粗暴;另外一种则是自动滚动间接回到页面顶部,这样一来视觉体验上可能更好,但是用户需要过几秒才能看到顶部内容。
例如掘金,在滚动到一定高度时会出现“回到顶部”按钮,点击后会直接回到页面顶部,就是上文说到的第一种情况。
实现动态显示滚动按钮“回到顶部”并不是一直显示的,而是滚动到一定值才出现的,因此应该在window.onscroll里定义一个判断事件。
123456789101112window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scr ...
前端都应该要掌握的防抖和节流
说到防抖和节流相信大家都不陌生,这两个东西大家可能多多少少都有用到过,最少也有听过
古人云,温故而知新。虽然可能已经很熟悉防抖和节流了,但不妨再看一看巩固一下知识
什么?你说你不仅不会手写防抖和节流,也没有听过。那也没事,下文会详细介绍的
防抖和节流有什么用?简单来说,防抖和节流都是用来减少函数执行的频率,以达到优化项目性能或者实现特定功能的效果
防抖定义:事件被触发一定时间后再执行回调。如果在这段时间内又被触发了,则重新开始计算时间
常用场景
输入框远程查询事件
在线文档自动保存
浏览器视口大小改变
例子张三在某平台搜索一本书籍,发现搜索建议并不是瞬间就出现的,而是自己输入词组结束后出现的。那么该平台在此搜索框可能做了什么操作?代码实现
123456789101112131415161718<body> <input type="text" id="searchElement" /></body><script> const searchElement = document.getEleme ...
在网站copy时自带的版权小尾巴以及复制代码,可以怎么实现
前言每天网上的博客各个领域都会涌现新文章,有时候看到感兴趣的知识就想把某段文字 copy下来 摘录下来,等有时间后慢慢品味
在部分网站上,如果只是复制少量文字,并没有什么不同。但是当我们复制的文字多的话会发现多了一个小尾巴
所谓小尾巴是指在复制文本的最后会多一个作者和出处信息,如下:
···(复制的内容)···————————————————版权声明:本文为xxx的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://www.cnblogs.com/rainy-night/
博客园可能并没有这种情况,但是在很多技术论坛、博客都有这样的处理。当我们复制文章内容的时候,往往会自动加上一段文本信息版权
那么如果我们也想实现这样的效果要怎么做呢?
实现版权小尾巴前提:假定所选择的字符串长度大于等于130时带上版权信息
12345678910111213141516171819202122232425<div id="copy"> <div>示例一:这不是一个 bug,这只是一个未列出来的特性。 ...
