# day01_10.26_react

**Repository Path**: YJQ1027/day01_10.26_react

## Basic Information

- **Project Name**: day01_10.26_react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、rem 布局

#### 什么是rem

​		rem 是css 的一个相对单位，相对于html根元素； 例：html{font-size:16px}  p{font-size:1rem},那么段落的字体大小为16像素

#### 自适应原理

##### 		可以通过监测屏幕大小的改变html的字体大小，从而实现自适应大小的效果

​		例：获取设备的宽度与设计稿宽度的比例 作为html | font-size 的大小；

​		假如是750/750*100，那么font-size:1px; 设计稿上200px，代码就要写200rem ；这样写太大，通常750/750 * 100，多除100，100作为px 转换rem的换算比例，100px =1rem;那么设计稿750px代码就要写7.5rem;

```
(function(designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem,rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 640;
        };
        if (width > maxWidth) {
            width = maxWidth;
        }
        var rem = width * 100 / designWidth;
        //兼容UC开始
        rootStyle="html{font-size:"+rem+'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if(!document.getElementById('rootsize')){
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id='rootsize';
        }
        if(rootItem.styleSheet){
        rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
        }else{
        try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);
```

## 二、Object.defineProperty

#### 基本语法；

​		 1.数据描述符——特有两个属性 **value、writable**

​		2、存取描述符——**setter、getter**函数功能来描述的属性

#### 定义

​		Object.defineProperty()  直接在一个对象上定义一个新属性，或者修改现有属性，并返回该对象。



#### 参数的作用

​			obj 要定义属性的对象。

​		prop 要定义或修改的属性的名称。

​		descriptor 将被定义或修改的属性描述符。

#### 返回值

​		返回被操作的对象，即返回 obj 参数

#### 注意点

​			1）  当把 configurable 值设置为 false 后,就不能修改任何属性了,包括自己本身这个属性

​			2）  想用访问器属性模拟默认行为的话,必须得在里面新顶一个属性,不然的话会造成循环引用

​			3）  可枚举属性对 for/in, Object.keys(), JSON.stringify(), Object.assign() 方法才生效(for/in 是对所有可枚举属性，而其他三种是对自身可枚举属性)

#### 使用场景

​		1） vue 通过 getter-setter 函数来实现双向绑定

​		·    getter 是一种获得属性值的方法

​		·    setter是一种设置属性值的方法  

​		2） 俗称属性挂载器

​		4） 专门监听对象数组变化的 Object.observe()(es7)也用到了该方法