一、属性描述符

ECMAScript对象中目前存在的属性描述符主要有两种，数据描述符(数据属性)和存取描述符(访问器属性)。

• 数据描述符是一个拥有可写或不可写值的属性。
• 存取描述符是由一对 getter-setter 函数功能来描述的属性。

二、数据描述符属性

当修改或定义对象的某个属性的时候，给这个属性添加一些特性：

1
2
3
4
5
6

Object.defineProperty(obj, "newKey", {
    configurable: true | false,
    enumerable: true | false,
    value: 任意类型的值,
    writable: true | false
});

• Value：属性对应的值,可以使任意类型的值，默认为undefined
• Writable：属性的值是否可以被重写，默认为false。
• Enumerable：此属性是否可以被枚举，默认为false。
• Configurable：设置为true可以被删除或可以重新设置特性，默认为false。

提示：一旦使用Object.defineProperty给对象添加属性，那么如果不设置属性的特性，那么configurable、enumerable、writable这些值都为默认的false

1
2
3
4

Object.defineProperty(person, 'name', {
    configurable: false,
    value: 'John'
});

一、视图层V

1
2
3
4

<div>
    <p>你好，<span id='nickName'></span></p>
    <div id="introduce"></div>
</div>

二、视图控制器C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var userInfo = {};


Object.defineProperty(userInfo, "nickName", {
    get: function() {
        return document.getElementById('nickName').innerHTML;
    },
    set: function(nick) {
        document.getElementById('nickName').innerHTML = nick;
    }
});


Object.defineProperty(userInfo, "introduce", {
    get: function() {
        return document.getElementById('introduce').innerHTML;
    },
    set: function(introduce) {
        document.getElementById('introduce').innerHTML = introduce;
    }
})

三、数据M

1
2

userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx，我来自云南，..."

一、防抖动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
 * 防抖动
 * @method debounce
 * @param {function} callback 回调函数
 * @param {number} delay 时间间隔
 * */
export const debounce = function(callback, delay) {
    let timer = null;
    return function() {
        let context = this;
        let args = arguments;

        clearTimeout(timer);

        timer = setTimeout(function() {
            callback.apply(context, args);
        }, delay);
    }
};

二、节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/**
 * 节流
 * @method throttle
 * @param {function} callback 回调函数
 * @param {number} delay 时间间隔
 * */
export const throttle = function(callback, delay) {
    let prev = Date.now();
    return function() {
        let context = this;
        let args = arguments;
        let now = Date.now();
        if (now - prev >= delay) {
            callback.apply(context, args);
            prev = Date.now();
        }
    }
};

一、height:auto

• 因为页面没有缺省的高度值，当设置百分百的高度时，无法根据父元素获取高度

• 父元素的高度只是一个缺省值height：auto，只有子元素撑开父元素

只要给父元素设置一个缺省值

1
2
3
4
5
6

html,body{  
    margin: 0;  
    padding: 0;  
    height: 100%;  
    width: 100%;  
}

二、line-height和height

CSS中对高度起作用的是height和line-height。如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用 。

在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下 – inline boxes干的。line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。

三、垂直居中

• line-height值设置为height一样大小的值可以实现单行文字的垂直居中 (height是多余的)
• 把line-height设置为您需要的box的大小可以实现单行文字的垂直居中

一、变量

1. 变量定义方式是 @变量名:值
2. 变量使用方式是 @{变量名} || @变量名

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

@kuandu:width;
@green: #801f77;
@imgurl:"https://www.baidu.com/img/";
.@{kuandu}{
    @{kuandu}:150px;
    //使用""将变量的值括起来
    background: @green url("@{imgurl}bdlogo.png");
}
	
/*编译后*/
.width {
    width: 150px;
    background: #801f77 url("https://www.baidu.com/img/bdlogo.png");
}

注：

1. 变量作为 属性名时 @{变量名}
2. 变量作为 属性值时 @变量名 || “@{变量名}”

二、多参数混合

1、命名参数：引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值

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

.mixin(@color: black; @margin: 10px; @padding: 20px) {
    color: @color;
    margin: @margin;
    padding: @padding;
}

.class3{
    .mixin(@padding: 80px;)
}

/*编译后*/
.class3 {
    color: black;
    margin: 10px;
    padding: 80px;
}

2、匹配模式：传值的时候定义一个字符，在使用的时候使用哪个字符，就调用那天规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.border(b-l, @w: 5px) {
    border-bottom-left-radius: @w;
}

.border(b-r, @w: 5px) {
    border-bottom-right-radius: @w;
}

footer {
    .border(b-r, 10px);
    background: #33acfe;
}

/*编译后*/
footer {
    border-bottom-right-radius: 10px;
    background: #33acfe;
}

3、返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.average(@x, @y) {
    @average: ((@x + @y) / 2);
    @he: (@x + @y);
}

div {
    //执行混合
    .average(16px, 50px);
    //使用返回变量
    padding: @average;
    margin: @he;
}

/*编译后*/
div {
    padding: 33px;
    margin: 66px;
}

灰度化

在RGB模型中，当R=G=B时，则彩色表示一种灰度颜色，其中R=G=B的值叫灰度值（又称强度值、亮度值），灰度范围为0-255。获取每个像素点的灰度值有以下几种方式：

1. 分量法

将图像中的三分量的亮度作为三个灰度值，可根据应用需要选取一种灰度值。

2. 最大值法

将图像中的三分量亮度的最大值作为灰度值。

3. 平均值法

将图像中的三分量亮度求平均得到一个灰度值。

　　4. 加权平均法

根据重要性及其它指标，将三个分量以不同的权值进行加权平均。由于人眼对绿色的敏感最高，对红色敏感较低，对蓝色敏感最低，因此，按下式对RGB三分量进行加权平均能得到较合理的灰度值。

0. 正常模式

   this的指向只有函数执行的时候才能确定，指向调用它的对象

   
   

1. 全局作用域中的this

   在严格模式下，在全局作用域中，this指向window对象

   
   

2. 全局作用域中函数中的this

   在严格模式下，这种函数中的this等于undefined

   
   

3. 对象的函数（方法）中的this

   在严格模式下，对象的函数中的this指向调用函数的对象实例

   
   

4. 构造函数的this

   在严格模式下，构造函数中的this指向构造函数创建的对象实例。

   
   

5. 事件处理函数中的this

   在严格模式下，在事件处理函数中，this指向触发事件的目标对象。

   
   

6. 内联事件处理函数中的this

   在严格模式下，在内联事件处理函数中，有以下两种情况：

   1 2 3 4 5 6 7 8 9 10

   <button onclick="alert((function(){'use strict'; return this})());"> 内联事件处理1 </button> <!-- 警告窗口中的字符为undefined --> <button onclick="'use strict'; alert(this.tagName.toLowerCase());"> 内联事件处理2 </button> <!-- 警告窗口中的字符为button -->

createObjectURL

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL。这个URL的生命仅存在于它被创建的这个文档里。新的对象URL指向执行的File对象或者是Blob对象。

1

objectURL = URL.createObjectURL(blob || file);

• File对象，就是一个文件。比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象。
• Blob对象，就是二进制数据。比如通过new Blob()创建的对象就是Blob对象。又比如，在XMLHttpRequest里,如果指定responseType为blob，那么得到的返回值也是一个blob对象。

注意：

每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL。 如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法。**当页面被关闭，浏览器会自动释放它**，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。

一、像素

• 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。（物理像素）
• CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。（逻辑像素）

一个width:200px 的元素跨越了 200 个CSS像素。CSS像素相当于多少个设备像素取决于屏幕的特性（是否高密度）和用户进行的缩放。

• 当缩放程度为100%时:
  • 在旧的屏幕上，1个CSS像素等于1个设备像素。
  • 在高密度屏幕上（iphone6），1个CSS像素跨越了2（dpr）个设备像素。
• 当缩放程度为200%时：
  • 在旧的屏幕上，1个css像素等于2个设备像素
  • 在高密度屏幕上，1个css像素跨越了2*dpr个设备像素
• 当缩放程度为50%时：
  • 在旧的屏幕上，2个css像素等于1个设备像素
  • 在高密度屏幕上，1个css像素跨越了dpr/2个设备像素

下图是在旧屏幕手机上css像素（红色）和设备像素（蓝色）的具体情况：

二、设备像素比

• 设备像素比（DPR）= 设备像素个数 / 理想视口像素个数（device-width）

注：理想视口（device-width）和设备像素比（dpr）一般不改变

一、高清图问题

1、理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。用一张图来表示：

如上图：对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。

2、如果用了两倍图片，会怎样呢？很明显，在普通屏幕下，200×300(css pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是200×300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。