公司实习笔记

day1

css3薄弱知识点整理

1. 伪类和伪元素的区别？

伪类是选择器的一种，它用于选择处于特定状态的元素，伪类就是开头为冒号的关键字。例如：
:last:child
:only-child
:invalid
以及用户行为伪类：
:hover
:focus
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。例如：
:: first-line可以做到当单词、字符数目改变也始终只选择第一行。
特别的伪元素：
::before和::after伪元素与content属性的共同使用，在CSS中被叫做“生成内容”。

2. css优先级

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器；
属性后插有!important 的属性拥有最高优先级。

3. 过渡与渐变

CSS 过渡（transition）允许您在给定的时间内平滑地改变属性值。
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。CSS 定义了两种渐变类型：线性渐变和径向渐变。

线性渐变：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
重复线性渐变函数：repeating-linear-gradient()
径向渐变：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

4. CSS 选择器

//  :nth-of-type(n)
p:nth-of-type(2) 选择属于其父元素第二个<p>元素的每个<p>元素。

交集选择器,相交的部分就是要设置属性值的标签
        1,格式:
        选择器1选择器2...{
            属性:值;
        }
      
并集选择器
        1,格式:
        选择器1,选择器2,...{
                属性:值;
           }

5. 其他

• skew()
skew()函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个<transform-function> 数据类型。其指定一个或两个参数，它们表示在每个方向上应用的倾斜量。
  在CSS中角度单位有：度(deg)、梯度(grad)、弧度(rad)。无论如何声明，这些值都会解释为0~360范围内的度数。如：-90deg=270deg。
  例如 描述一个向右倾斜的平行四边形：

transform:skew(-20deg);

• cursor规则是设定网页浏览时用户鼠标指针的样式，也就是鼠标的图形形状
  cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式
• 盒模型display:-webkit-box的使用
  box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

JS基本原理方法

1. 深拷贝的实现

• JSON实现的深拷贝

一般大部分的深拷贝都可以用JSON的方式进行解决，本质是因为JSON会自己去构建新的内存来存放新对象。
它的缺点是：
1. 会忽略undefined和symbol；
2. 不可以对Function进行拷贝，因为JSON格式字符串不支持Function，在序列化的时候会自动删除；
3. Map，Set，RegExp，Date，ArrayBuffer（用来表示通用的、固定长度的原始二进制数据缓冲区）和其他内置类型在进行序列化时会丢失；
4. 不支持循环引用对象的拷贝（当对象 1 中的某个属性指向对象 2，对象 2 中的某个属性指向对象 1 就会出现循环引用）。

---

• 递归实现

function cloneDeepDi(obj) {
    const newObj = {};
    let keys = Object.keys(obj);
    let key = null;
    let value = null;
    for (let i = 0; i < keys.length; i++) {
        key = keys[i];
        value = obj[key];
        if (value && typeof value === "object") {
            newObj[key] = cloneDeepDi(value);
        } else {
            newObj[key] = value;
        }
    }
    return newObj;
}

// 缺点是不能解决循环引用的问题

---

• lodash的_.cloneDeep()

最完美的深拷贝方式，日常项目开发中建议使用。

---

2. 继承与原型链

4.闭包

day2

JS模块化

为了解决全局变量的污染
解决方案有 Amd cmd 这二者有何区别
commonjs按需加载 依赖就近
解决模块化的新思路：前端工程化（根本问题：运行时进行依赖分析）
目标：会使用相关工具进行模块化

promise原理及运用

异步操作队列化
多步任务执行顺序；
捕获异常的方法（reject和throw catch）推荐使用后者
promise实例方法
promise.all()
promise实现队列执行
promise.resolve() 可以传递多种类型的值 包括promise
promise.reject() 忽略then()语句的执行直接捕获异常
promise.race() 常见用法：异步操作与定时器放在一起，提醒用户超时
实际开发中，把回调包装成promise可读性更好，返回的结果可以加入任何promise队列
目标：找一些例子帮助理解，在实际开发中会使用promise简化操作