一、语法

1

background-image: linear-gradient([<angle>|<side-or-corner>,]?<color-stop>[,<color-stop>]+);

• []在正则中表示一个字符类，这里，你可以理解为一个小单元。

• |表示候选。也就是“或者”的意思，要么前面的，要么就后面的。

• ?为量词，表示0个或1个。

• +也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。

• <>中的是关键字，主要是让开发人员知道这里应该放些什么内容。

一、区别

• drop-shadow没有内阴影效果
• drop-shadow不能阴影叠加
• drop-shadow穿透代码构建的元素的透明部分
• drop-shadow 也可以穿透PNG图片的透明部分

一、对象方法

1
2
3

var dsHandler = function(evt) {
    evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML);
}

• setData(format,data):
  • ​ 将指定格式的数据赋值给dataTransfer对象
  • 参数format定义数据的格式也就是数据的类型，data为待赋值的数据

• getData(format):
  • 从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。

• clearData([format]):
  • 从dataTransfer对象中删除指定格式的数据，参数可选。
  • 若不给出，则为删除对象中所有的数据

1.attr

1
2
3
4
5
6

<p data-unit="元">剩余话费40</p>

[data-unit]:after {
    content: attr(data-unit);
    color: #3b98e0;
}

一、定义

1
2
3

object-fit : css property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

object-position : css property determines the alignment of the replaced element inside its box.

这里的object实际上指的是replaced element 。

二、替换元素

• 其内容不受CSS视觉格式化模型控制的元素。

  • 比如image, 嵌入的文档(iframe之类)或者applet。
  • 比如，img元素的内容通常会被其src属性指定的图像替换掉。
  • 替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。

• CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。

• 使用CSS的content属性插入的对象是匿名替换元素。

一、用法

1
2
3
4
5
6
7

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
        /* 使用这个stream stream */
    })
    .catch(function(err) {
        /* 处理error */
    });

MediaDevices.getUserMedia()会提示用户给予使用媒体输入的许可。它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

二、参数Constraints

1. 以下同时请求不带任何参数的音频和视频：

   1 2 3 4

   { audio: true, video: true }

2. 当由于隐私保护的原因，无法访问用户的摄像头和麦克风信息时，应用可以使用额外的constraints参数请求它所需要或者想要的摄像头和麦克风能力。下面演示了应用想要使用1280x720的摄像头分辨率：

   1 2 3 4 5 6 7 8

   { audio: true, video: { width: 1280, height: 720 } }

   浏览器会试着满足这个请求参数，但是如果无法准确满足此请求中参数要求或者用户选择覆盖了请求中的参数时，有可能返回其它的分辨率。

1
2
3
4
5
6
7
8
9
10
11
12
13

//label: statement;

outPoint:
    if (true) {
        for (var j = 0; j < all.length; j++) {
            for (var k = 0; k < all[j].length; k++) {
                if (all[j][k].id == itemsId[i]) {
                    console.log(all[j][k]);
                    break outPoint; //直接跳出最外层循环
                }
            }
        }
    }

• JavaScript中任何地方都可以定义语句标签
• break和continue是JavaScript中唯一可以使用语句标签的语句
• 控制权无法越过函数的边界

一、使用方式

1

ln [option] source_file dist_file

• -f建立时，将同档案名删除
• -i 删除前进行询问

1
2
3
4
5

#建立abc的软连接
ln -s abc cde

#建立abc的硬连接
ln abc cde

一、语法

1

stringObject.replace(regexp/substr,replacement);

在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。

replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。

一、两个主要特性

• 它们 “面向扩展开放（Open For Extension）”。
  • 模块的行为是能够被扩展的。当应用程序的需求变化时，我们可以使模块表现出全新的或与以往不同的行为，以满足新的需求。

• 它们 “面向修改封闭（Closed For Modification）”。
  • 模块的源代码是不能被侵犯的，任何人都不允许修改已有源代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//检测字符串
//checkType('165226226326','mobile')

let checkType = function(str, type) {
    switch (type) {
        case 'email':
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'mobile':
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case 'tel':
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        case 'number':
            return /^[0-9]$/.test(str);
        case 'english':
            return /^[a-zA-Z]+$/.test(str);
        case 'text':
            return /^\w+$/.test(str);
        case 'chinese':
            return /^[\u4E00-\u9FA5]+$/.test(str);
        case 'lower':
            return /^[a-z]+$/.test(str);
        case 'upper':
            return /^[A-Z]+$/.test(str);
        default:
            return true;
    }
}

这个 API 看着没什么毛病，能检测常用的一些数据。但是有以下两个问题。

1. 但是如果想到添加其他规则的呢？就得在函数里面增加 case 。添加一个规则就修改一次！这样违反了开放-封闭原则（对扩展开放，对修改关闭）。而且这样也会导致整个 API 变得臃肿，难维护。

2. 还有一个问题就是，比如A页面需要添加一个金额的校验，B页面需要一个日期的校验，但是金额的校验只在A页面需要，日期的校验只在B页面需要。如果一直添加 case 。就是导致A页面把只在B页面需要的校验规则也添加进去，造成不必要的开销。B页面也同理。