Blog
Blog copied to clipboard
pekonchan
## 前言 关于vue3的插槽用法，在2.6.0版本前，是旧用法；在2.6.0 ~ 3.0版本，新旧用法兼容；但是在vue3之后，旧用法就不支持了。因此有必要掌握新用法。 ## slot > 这部分内容还是原来的情况，并没有新语法，写出来是为了文章内容的完整性。 在自定义组件内部，用`slot`标签来表示接受的插槽内容，预留展示位置。 通过`name`属性来指定该插槽的名字 ```html ``` 如果没`name`属性，那就是一个默认插槽了，只会有一个默认插槽。 默认插槽除了预留位置外，还起到了后备内容的作用，即如果你使用组件时，没有插槽内容的话，就会显示默认插槽的内容。 ## v-slot 新用法是引入了`v-slot`指令，该指令只能用在`template`标签上（除了下面说到的独占默认插槽缩写法外）。 首先我们要知道用插槽的两个个场景： - 具名插槽，指定名字的插槽应用 - 插槽作用域，指定插槽的作用域 新旧用法都是围绕这两个场景来解决问题的。 ### 具名插槽 使用组件时，`v-slot`用参数就能指定插槽名了 ```html 这是默认插槽内容 这是header插槽内容...
## export 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。 导出值是一个接口，而不能是一个静态值，要能与模块内部变量建立一一对应的关系，如导出一个定义表达式，导出一个对象，有点类似指针的意思。 ```js export var a = 1; export function example(){} export class test {} var b = 2; export { b } // 对象缩写写法 function example2 ()...
# 背景 在计算机中，所有的数据在存储和运算时都要使用二进制数表示，例如，像a、b、c、d这样的52个字母（包括大写）以及0、1等数字还有一些常用的符号（例如*、#、@等）在计算机中存储时也要使用二进制数来表示，而具体用哪些二进制数字表示哪个符号，当然每个人都可以约定自己的一套（这就叫编码），而大家如果要想互相通信而不造成混乱，那么大家就必须使用相同的编码规则。 下面分为两个部分来说明一些常见的概念。 **字符集**是上面说的字符和二进制一一对应的一个关系表，当然为了方便阅读，把二进制表示成十进制，形成了字符和数字的一个个对应关系表。根据这个表，我们就可以知道一个字符在计算机里是以什么二进制来表示的。 **编码方案**，我们理解为是依据编码表，来落实转化操作的一个实施方案，毕竟有制定了规则，也是得需要落实规则的方案去执行对吧。所以是将数字转换到程序数据的编码方案 # 字符集 ## ASCII 最初计算机大多数为美国和西欧所使用，他们为了把一些字符统一以二进制来表示，作为计算机所能识别的资源，以方便相互认识和交流，制定出了ASCII码，美国标准信息交换代码（American Standard Code for Information Interchange）的缩写, 为美国英语通信所设计。 ASCII分为标准（基础）ASCII和扩展ASCII。前者是以7位二进制表示（虽然一个字节还是8bit，但是最高位是不用的），即能表示2^7=128个字符，表示了字母数字和常用的符号。这是最初开始制定的，后面觉得128字符太少了，就用8位二进制来表示，即256个字符，后128个称为扩展ASCII码。许多基于x86的系统都支持使用扩展（或“高”）ASCII。扩展ASCII 码允许将每个字符的第8 位用于确定附加的128 个特殊符号字符、外来语字母和图形符号。 ASCII的码表太长，这里就不显示出来了，可以从这里找到： [请跳到标准表目录下](https://baike.baidu.com/item/ASCII) ## Unicode 很明显，ASCII只能代表256个字符。那么对于其他国家的语言文字，却不能标识，例如我们的汉字。为了解决这个问题，出来了Unicode字符集 Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符集。目前的Unicode字符分为17组编排，0x0000 至 0x10FFFF，每组称为平面（Plane），而每平面拥有65536个码位，共1114112个。在基本多文种平面（英文为 Basic...
# encodeURI 这里先单纯介绍该函数的语法规则，场景后续说。先说作为一个函数，它能做什么。 它是全局对象下的方法，在浏览器器客户端里就是`window`对象的方法。它的作用是，对字符串的每个字符进行UTF-8编码，使用一到四个转义序列来表示。参数为要编码的字符串，返回值为编码后的字符串结果。 ``` window.encodeURI(str) ``` 编码的规则是： 除以下字符外，其余字符都进行编码 - `;,/?:@&=+$` （此为URL的特殊字符） - `#` （数字标识） - 字母和数字 - `-_.!~*'()`（保留的字符） 编码实际上是将每个字符先进行UTF-8编码，用16进制表示码值，然后在前面追加%来表示。如 ``` encodeURI('我') // 返回值为 // %E6%88%91 ``` 先将“我”进行UTF-8编码后由0xE6、0x88、0x91三个字节来表示，然后每个字节前面加%，就变成了`%E6%88%91` 有编码自然有解码，对应的解码方法是`decodeURI` #...
## 前言 说句实话的，自从我整理这篇笔记后，基本上项目里遇到的所有正则匹配的问题，不论多复杂，只要回过头看这篇笔记，理解透彻(**请注意我的用词描述，我这里描述比较严谨，理解好中文意思更方便你理解正则意义。这是个文字游戏[奸笑]**)，基本上都能解决的。这里关于深内容的描述，我这边也举了不少内容帮助大家理解。 这是一篇男女老少入门精通咸宜的正则笔记。 ## 正则表达式是什么？ > 字符是计算机软件处理文字时最基本的单位，字符串是0个或更多个字符的序列。 在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具，就是来用于匹配字符串中字符组合的模式。 ## 怎么创建？ 正则表达式字面量 `/ pattern / flag` 调用RegExp对象的构造函数 `new RegExp(pattern, flag)` 这里的pattern，有三种形式： 1. 参数变量 2. 带引号的匹配模式 3. 带//的匹配模式 注意：带引号的方式，需要常规的字符转义规则（在前面加反斜杠 \），而带//的方式，则跟字面量形式一样。 E.g....
# 前言 关于PPI、DPI、DPR、物理像素、逻辑像素等这些名词概念大家有所耳闻，也应该翻找了许多资料，无奈各种资料描述不一，概念混乱，一笔带过，甚至以讹传讹。没有什么实感去好好理解这些概念。 于是我尽自己所能，尽量描述，让大家有个实质性地认识。 # 像素 小时候学过数学我们都知道，点成线，线成面。所以在计算机中，一个图像（面）是有一个个点组合而成的。而这个最小的不可分割的点，就是我们常说的“像素”，pixel。如我们常说的分辩率为1366px*768px，就是指宽有1366个像素，高有768个像素组合而成。 像素是一个抽象的概念，不是一个确切的物理量，而真不是一个“点”，点的描述是方便我们去理解。 像素是在数字领域（虚拟世界）的一个概念，厘米这些长度是现实世界的一个概念，要从虚拟往现实中转化对其的认知，需要借助“图像分辨率”。 当图片尺寸以像素（px）为单位时，我们需要指定其固定的分辨率，才能将图片尺寸与现实中的实际尺寸相互转换。毕竟我们总不能拿把尺子去计算机屏幕上量200px*100px的图片多少厘米吧。 这里说的“图像分辨率”是要用下面所说的用PPI作为单位的表达方式。PPI是英寸和像素的关系桥梁，因此可以把像素往英寸方向转化。 # 分辨率 可以从显示分辨率与图像分辨率两个方向来分类 ## 显示分辨率 又称显示分辨率，是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。 通常用每行像素数数目乘每列像素数目来表示分辨率。如1366px*768px。就是说屏幕水平方向上，有1366个像素点，在垂直方向上，有768个像素点。 屏幕分辩率是机器生产时已经确定好的了，即已经规定好了机器屏幕上是有多少个像素点组合而成。 但我们也知道，我们可以修改电脑的屏幕分辨率，这是怎么回事呢？ 假设电脑的分辨率是1366px*768px，一般这个为电脑推荐你的分辨率，如果你私自调整成`800px*600px`，系统就会分配给你`800*600`个有效像素个数，也就是真实的色彩块。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好`1366*768`个色彩块。 ## 图像分辨率 图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。 从这个定义上来看很明显，跟PPI的含义是一样，所以PPI是用来表示图像分辨率的单位，如一图片分辨率为100ppi，含义是每英寸中所含有100个像素。 跟显示分辨率一样，图像分辨率也可以用“水平像素数×垂直像素数”来表达。其实我们知道ppi，也知道图像的宽高长度（如英寸为单位），就能算出图像是由多少个像素组成，即“水平像素数×垂直像素数”。 这里我们要知道，图像的显示宽高尺寸，不会受到PPI值直接影响，对于计算机的显示系统来说，PPI是没意义的，真正起作用的是图像的“水平像素数×垂直像素数”，只要“水平像素数×垂直像素数”一样，就算PPI不一样，图片同样显示一样的宽高尺寸。 此外，其实在不同的应用领域，图像分辨率也可以用不同的单位进行描述，如在打印领域中，也可以用dpi来描述。 # 分辨率比...
## 前言 跨域的知识是基础中的基础，面试也是经典题。但是跨域的知识很多，一味的罗列解决方案，不容易让人记住。所以分类去理解它的影响，以及针对这些影响去解决，按照这么一个思路去理解跨域，就很容易去记住这些要点。 这就是文章的意义所在。 ## 是什么 顾名思义，不同域之间就叫跨域，那么这个域怎么衡量？ **协议名 + 域名或IP + 端口号 = 这里要说的“域”** 只要有一个不一样，就是跨域了。其中，不仅是主域要一样，子域也要一样；且就算ip对应着域名，ip与域名之间也是跨域 例子 URL | 说明 | 是否允许通信 ---------------------- | ---------- | ------------ http://www.a.com/a.js http://www.a.com/b.js | 同一域名下...
写移动端适配，脱离不了此代码的作用 ```html ``` 接下来我们好好了解下，`viewport`的相关知识。 # 种类 现在的人们，对`viewport`的认知，都会为其区分为三个概念。顺应潮流，为大家介绍下这三种`viewport` ## layout viewport pc端的网站布局空间都比较大，而移动端由于设备屏幕比较小，如果把pc端的网站放到移动端，想必由于屏幕大小差异巨大，而导致网站布局错乱，挤到一块了吧。因此为了避免此种问题，浏览器生厂商并不会直接把屏幕的大小作为网站的布局空间，网站的布局宽度往往会比设备的屏幕宽度要大，基本不会让pc端的网站放在移动设备上太过于混乱，尽量按照pc端的布局来显示。 而生厂商设定的这个布局空间（主要是宽度的差异），就是`layout viewport`，我们说的“布局视口”，可通过`document.documentElement.clientWidth`获取。如图：  但是实际情况下，默认手机里显示pc网站的内容并不会只有网站的一部分，这要结合下面的说`initial-scale`来说了，这里先缓一下。 ## visual viewport 顾名思义，表示“可视视口”，什么是可视呢？就是你所能看见内容的窗口大小。首先我们要明白，`visual viewport`的大小是按照css像素（即css中写的px，是个设备独立像素）来衡量的。当然，`layout viewport`也是css像素衡量，毕竟是通过`document.documentElement.clientWidth`获取到，值固然是css意义上的像素值。 因此，`visual viewport`是可变的，因为你看到的内容范围，也是可变的。如你缩放页面，看到的网站内容范围就会发生变化，然后看到的内容按照你网站内容所占有的css像素，就知道当前`visual viewport`的尺寸了。  ## ideal viewport 这是一个概念上的视口，是个“理想视口”，何为理想？就是你能够不用缩放或拖动浏览器滚动条就能完全看到网站的内容，且展示情况良好，大小适中，在不同设备下展示情况都良好。这么一种视口尺寸下展示出来的网站，就是理想的。 很明显，想让我们的网站能在移动端上显示情况理想，就让网站的`layout...
# 前言 关于srcset & sizes的资料其实不少，但也不多，其中详细讲解其选择图片的机制的文章，更是少数了，连MDN都是粗粗一笔带过，到底哪里文章说的是正确的，哪里有误导人的，其实很难找到一个参考。 于是乎自己亲自去动手研究一下了，不能光看资料，可信度还是值得考虑。 当然出于本人能力限制，也许研究不够透彻导致带来的错误之处，请多多指出，本人虚心请教。 # 简介 H5中img有两个新属性，`srcset`和`sizes`，主要作用： - 控制响应式图片，根据屏幕大小来选择显示不同图片 - 根据屏幕的不同（视网膜屏幕还是普通屏），展示不同质量的图片，合理控制下载资源，以及带给用户高质量享受。 文本有一些名词概念，可能需要事先有了解，方能更好的理解。可先大致浏览此 [前端认知：PPI、DPI、设备像素等概念](https://github.com/pekonchan/Blog/issues/15) # srcset （1）格式一：图片源地址 空格 图片像素宽度[, 图片源地址 空格 图片像素宽度, ...]，如 ``` srcset="1.jpg 580w, 2.png 618w"...