基础知识

vertical-align 的使用范围

vertical-align 只能应用于 inline 元素,即 display 为 inline、inline-block、inline-table 的元素,img 与 span 都是 inline 元素

基线

图中的 baseline 即为元素的基线,x-height 就是 x 高度

baseline

由图可见元素基线位置是由元素自身的字体大小与行高决定的,还会受到子元素影响。

inline-table 的基线

以表格第一行的基线为基线

inline-block 的基线

  1. 在有正常文档流内容或 overflow 属性计算值为 visible 以外的值的情况下,inline-block 元素的 baseline 就是最后一个 line-box 元素的 baseline;

  2. 除上面两种情况外,baseline 是 margin-box 的下边界;

Read more »

常用方法

  1. 第三方库:clipboard.js
  2. 原生api:Clipboard API(还处于草案阶段,兼容性差)
  3. document.execCommand()

若是项目中需要经常操作剪贴板,推荐使用第三方库,若仅是轻量使用,推荐document.exeCommand()方法。待原生api稳定后,使用原生api是更为优雅的方式。

这里我们着重讲document.execCommand()方法

document.execCommand()

首先需要注意的是document.execCommand()方法只能操作可编辑区域的内容,如input、textarea等,像div这类无法聚焦的元素原则上是无法使用document.execCommand()方法的,在div上增加tabIndex属性,让div变成一个可聚焦可编辑元素,这里仅提供一个思路,不做详细展开。

我们使用textarea做为可编辑区域,在文档对象中新建一个textarea元素,然后挂载到文档末尾,再将要获取的文本赋值给textarea,最后通过document.execCommand()方法获取textarea中选中的值并删除这个textarea元素。

let textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.value  = "test string";
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);

参考链接 JavaScript复制内容到剪贴板

基本概念

SQL 是 Structured Query Language 的缩写。SQL 不是某个特定数据库供应商专有的语言。几乎所有重要的 DMBMS 都支持 SQL。标准 SQL 由 ANSI 标准委员会管理,称为 ANSI SQL。所有主要的 DBMS 即使有自己的扩展,也都支持 ANSI SQL。

发音

  1. S-Q-L

  2. see·kwl

数据库 database:保存有组织数据的容器

人们常用数据库这个术语来代表他们使用的数据库软件,这是不正确的。数据库软件应称为数据库管理系统(DBMS),数据库是通过 DBMS 创建和操纵的容器。

表 table:一种用于存储特定类型数据的结构化的文件

表名是唯一的,用来标识表本身。

模式 schema:关于数据库和表的布局及特性的信息

模式定义了数据在表中如何存储以及数据库中表的关系,也包括对特定表的描述。

列 column:表中的一个字段

所有表都是由一个或多个列组成。

数据类型 datatype:定义了列可以存储哪些数据种类,每个列都有相应的数据类型

数据类型及其名称是 SQL 不兼容的一个主要原因。

注意:字符串类型值在 SQL 中都使用单引号’’

行 row:表中的一个记录 record

主键 primary key:能够唯一标识表中每一行的列或一组列

每个表都应该具有一个主键,以便后续的数据操作与管理。

表中任何列都可以做为主键,只要满足下列条件:

  1. 任意两行都不具有相同的主键值;
  2. 每一行都必须具有一个主键值(主键列不允许 NULL 值);
  3. 主键列中的值不允许修改或更新
  4. 主键值不能重用(如果某行从表中删除,它的主键不能不能赋给以后的新行)

在使用多列做为主键时,上述条件必须应用到所有列,所有列值的组合必须是唯一的(但是单个列的值可以不唯一)。

Read more »

对象与数组的特点

对象与数组都是与字符串、数字、布尔等基本类型不同的类型,当我们将一个对象或数组赋值给另一个变量时,我们并没有复制这个对象或数组,而是将原对象或原数组在内存位置中的索引赋值给了这个变量,这就导致我们在修改这个变量时,最初的对象或数组也被改变了。因为我们通过变量中的内存位置索引,找到的就是最初的对象或数组本身。

对象与数组的浅拷贝

当我们需要复制一个对象或数组,而不是仅仅获得当前对象或数组的索引时,就要用到对象或数组的拷贝。对象的拷贝使用Object.assign方法,Object.assign(target, …sources),target为目标对象,sources为源对象,源对象可以是一个或多个。数组的拷贝使用Array.from方法,Array.from(arrayLike[, mapFn[, thisArg]]),arrayLike是要转换成数组的伪数组对象或可迭代对象;mapFn可选参数,代表新数组中每个元素会执行的回调函数;thisArg可选参数,执行回调函数mapFn时的this对象。

const foo = {
  a: 1,
  b: 2
};
const newFoo = Object.assign({}, foo);
const bar = [1, 2];
const newBar = Array.from(bar);

对象与数组的深拷贝

当对象或数组中嵌套了对象或数组时,对象与数组的浅拷贝无法将嵌套的对象或数组拷贝进去,得到的还是原对象或原数组内存位置的索引。这个时候就要对对象或数组进行深拷贝了。深拷贝需要递归对象或数组进行拷贝,代码如下:

export const deepCopyObject = obj => {
  let newObj;
  // 判断对象是否为数组
  Array.isArray(obj) ? (newObj = []) : (newObj = {});
  // 获取对象可迭代的键值并遍历
  Object.keys(obj).forEach(key => {
    // 若对象内的值还是一个对象,则递归;否则直接赋值
    if (typeof obj[key] == "object") {
      newObj[key] = deepCopyObject(obj[key]);
    } else {
      newObj[key] = obj[key];
    }
  });
  return newObj;
}

自定义组件 prop 的双向绑定

在 vue 中当我们要用到双向绑定的时候,第一反应是使用 v-model 属性,但 v-model 属性只能用在部分表单相关的组件上,如 input、select、textarea。如果我们在自定义的组件传递的 prop 上也想达到双向绑定的效果该如何做呢?答案是使用.sync 修饰符

.sync 修饰符实质上是 v-bind 与 update 事件的语法糖,我们通过在子组件内给父组件传递事件来更新父组件传给子组件的 prop,以实现双向绑定。

<!-- 在父组件内 -->
<template>
  <custom-component :foo="bar" @update:foo="bar = $event"></custom-component>
  <!-- 上面的写法等同于 -->
  <custom-component :foo.sync="bar"></custom-component>
</template>
<!-- 在子组件内 -->
<script>
  export default {
    props: ["foo"],
    methods: {
      updatePropFoo(newFoo) {
        this.$emit("update:foo", newFoo);
      }
    }
  };
</script>
Read more »

系统环境 centos7,本文中默认使用 root 用户,故没有 sudo 命令,实践中根据用户不同酌情添加。

安装 nginx 服务器

1. 在 yum 中安装 nginx 源

安装前置环境

yum install yum-utils

新建文件/etc/yum.repo.d/nginx.repo,内容为

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key

默认使用 nginx-stable 的源,若要使用 nginx-mainline 的源,将 enabled 更改为 1。或直接使用以下命令

yum-config-manager --enable nginx-mainline
Read more »

依赖库及其安装

Marked.js 将markdown语法的字符串解析成为html的库

raw-loader webpack插件,将.md文件做为文本引入

highlight.js 使页面上代码实现高亮的库

安装Marked.js与highlight.js依赖,将raw-loader安装为开发环境依赖

npm install marked highlight.js
npm install --save-dev raw-loader
Read more »

Canvas自适应的问题

在使用Canvas的过程中,我们遇到的第一个问题就是屏幕自适应的问题,与普通的html标签不同,Canvas标签虽然支持长宽百分比的写法,但是内部绘制的图像并不适应百分比的缩放,我们会发现图像是糊的根本无法查看。好在浏览器的api中有一个resize事件,那么我们就利用resize事件来重新改变Canvas标签的长宽,来达到自适应的效果。

<!-- 这里要注意的一点是使用了flex,因为没有flex属性时,canvas超出了container,产生了滚动条 -->
<div id="container" style="width: 100%; heigth: 100%; display: flex;">
  <canvas id="canvas"></canvas>
</div>
Read more »

CSS上古时代连圆形都要靠切图,到了CSS3之后,我们已经可以使用各种方法绘制不同的形状了

圆形

通常我们都是依靠设置宽高相同的盒,再设置border-radius为50%来绘制圆形

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
Read more »

注意:octet 与 byte 相同都是指 8 位 1 字节,但在计算机网络中 byte 易引起混淆,故都用 octet,译为八位字节

TCP 头部格式

TCP Header Format

    0                   1                   2                   3
    0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |          Source Port          |       Destination Port        |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |                        Sequence Number                        |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |                    Acknowledgment Number                      |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |  Data |           |U|A|P|R|S|F|                               |
   | Offset| Reserved  |R|C|S|S|Y|I|            Window             |
   |       |           |G|K|H|T|N|N|                               |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |           Checksum            |         Urgent Pointer        |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |                    Options                    |    Padding    |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
   |                             data                              |
   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

                            TCP Header Format

          Note that one tick mark represents one bit position.

TCP 协议头部一般为 20 字节,最大不超过 60 字节,且是一个整数的 32 位长。

Read more »
0%