spin遮罩

前言

我们加载资源等待时，需要将指定区域覆盖，使其失去原有的功能(如: 点击事件，移入移出效果)。在指定区域加上一个半透明的蒙板，也可以再在蒙版上面再加一个你想要实现的效果。一般通过定位(position) ，使用层级z-index来实现遮罩层的效果。

知识基石

+

作为二元操作符放操作对象之后，其中一个操作数为字符串类型时，另一个操作数将会被无条件转为字符串类型:

//值类型
var foo = 3 + '';            // "3"
var foo = true + '';         // "true"
var foo = undefined + '';    // "undefined"
var foo = null + '';         // "null"
// 引用类型
var foo = [1, 2, 3] + '';    // "1,2,3"
var foo = {} + '';           // "[object Object]"

作为一元操作符操作对象之前，将操作数转换为数字类型，如果转型失败，则会返回NaN：

//值类型
var foo = +'';            // 0
var foo = +'3';           // 3
var foo = +'3px';         // NaN
var foo = +false;         // 0
var foo = +true;          // 1
var foo = +null;          // 0
var foo = +undefined;     // NaN
//引用类型
var foo = Object("12")
console.log(+foo)// 12

?和！

读ECMA规范时长会有Let key be ? ToPrimitive(argument, string)或者Return ! ToString(key).函数前带?或!。要理解它们，需要先理解完成记录(Completion Record),完成记录是一种规范类型（只在规范中使用）。JavaScript 引擎不需要实现对应的内部数据类型。完成记录是一种记录类型(Record),而记录具有一组固定的命名字段。

所有抽象操作都会隐式返回一个完成记录。即便一个抽象操作看起来返回简单类型（如 Boolean）的值，这个值也会被隐式包装在一个normal类型(正常完成)的完成记录中返回。规范本身在这方面也不是完全一致。有一些辅助函数会返回裸值，而这些值将直接被使用，无需从完成记录中提取。不过这种情况在上下文中通常能够一目了然。如果某个算法抛出异常，则意味着返回的完成记录的[[Type]]为throw，[[Value]]为异常对象。我们这里不讨论break、continue和return类型(规范中没有相应的例子，因为这几种类型不能跨函数)。

对于完成记录，如果是硬性完成，则立即返回；如果是正常完成，则提取完成记录的值。
ReturnIfAbrupt看起来虽然像函数调用，但它不是。ReturnIfAbrup会导致它所在位置的函数返回，而不是ReturnIfAbrupt本身返回。
1.令obj为Foo()；（obj是一个完成记录。）
2.ReturnIfAbrupt(obj)；
3.Bar(obj)。（如果到了这一步，obj已经变成了从完成记录中提取出来的值。）

---

所以? Foo()等价于ReturnIfAbrupt(Foo())
同理

1. let val为! Foo()
2. 断言：val非硬性完成
3. 设val为val.[[Value]]。

叹号表示从正常完成记录中提取值。

[ ]和.

根据ECMA标准它们都是属性访问器，也同属于Left-Hand-Side Expressions。

.点号
MemberExpression . IdentifierName
CallExpression . IdentifierName

---

[ ]括号
MemberExpression [ Expression ]
CallExpression [ Expression ]

---

共通点
MemberExpression.标识符名称≈MemberExpression [ <标识符名称字符串>]
CallExpression.标识符名称≈CallExpression [<标识符名称字符串>]
区别体现在对key值的计算
中括号 EvaluatePropertyAccessWithExpressionKey ( baseValue, expression, strict )

1. Let propertyNameReference be the result of evaluating expression.
2. Let propertyNameValue be ? GetValue(propertyNameReference).
3. Let propertyKey be ? ToPropertyKey(propertyNameValue).
4. Return the Reference Record { [[Base]]: baseValue, [[ReferencedName]]: propertyKey, [[Strict]]: strict, [[ThisValue]]: empty }.

---

点号 EvaluatePropertyAccessWithIdentifierKey ( baseValue, identifierName, strict )

1. Let propertyNameString be StringValue of identifierName.
2. Return the Reference Record { [[Base]]: baseValue, [[ReferencedName]]: propertyNameString, [[Strict]]: strict, [[ThisValue]]: empty }.

样式

style和class同时对标签的同一个属性进行个性化时，style中的属性设置优先使用。class中多个，最后一个覆盖前面的。设置css(