个人技能点(郎)

个人技能点

1. 熟悉 h5 和 c3 新特性：语义化标签，flex 布局，动画等

H5 新特性：

• 我所了解到的 h5 新特性主要有：新的语义化标签，新的表单增强和表单控件，本地存储，音视频 API，Geolocation (地理定位HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。)等

  • 为什么要语义化标签：

    • 语义化标签有：header、nav、footer、section、article、aside等。
    • 语义化标签更具有可读性，便于团队的开发和维护。
    • 在没有 css 的情况下也能很好的展现出页面的结构。
    • 关于 seo，搜索引擎能够更好的理解页面之间的关系，能够更准确的搜索信息。
    • 新增 canvas，video，audio 等新标签元素。新增特殊内容元素：article, footer, header, nav, section等，新增表单控件：calendar，date，time，email，url，search。

  • 盒模型：可通过 box-sizing 来控制盒模型的方式：

    • content-box
    • border-box
    • padding-box
    • margin-box（未实现）

  • flex 布局：

    • 可以通过 display: flex 来开启

    • flex 的简写形式

      flex 属性是 flex-grow 属性、flex-shrink 属性、flex-basis 属性的简写。默认值为：0 1 auto；

      .item{
               
          flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto)
      }
      

      1. flex-grow 属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

         .green-item{
                    
             order:-1;
             flex-grow:2;
         }
         

      2. flex-shrink 属性表示元素的缩小比例。默认值为 1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为 0，则空间不足时该项目也不缩小。

      3. flex-basis 属性表示项目占据主轴空间的值。默认为 auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。

      • flex-flow 属性：是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row/nowrap;

      • align-items 和 align-content 的区别：

        1. align-items 属性适用于所有的 flex 容器，它是用来设置每个 flex 元素在交叉轴上的默认对齐方式。

        2. align-items 和 align-content 有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

        3. align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。

  • css3新特性：

    1. border-radius：圆角。

    2. background-clip：规定背景的绘制区域。

    3. background-size：规定背景图片的尺寸。

    4. Gradients：渐变(linear Gradient 线性渐变 和 Radial Gradients 径向渐变)

       线性渐变：从上到下、从左到右、对角一种或多种颜色的过渡。

       径向渐变：由它的中心定义。

    5. transform：转换。

       <div>
       	transform: rotate(度数)
         使用步骤：
           - 给元素添加转换属性transform
           - 属性值为 rotate(角度) 如：transform: rotate(30deg) 顺时针方向旋转30度
         
         缩放：scale()
         	- scale 用来控制元素的放大与缩小
           - 语法：transform: scale(x, y), transform: scaleX(x), transform: scaleY(y)
         
         倾斜：skew() 音标：/skjuː/
           - skew定义了一个元素在二维平面上的倾斜转换
           - skew语法：skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量
           - skew(ax)
           - skew(ax, ay)
       </div>
       

    6. transition：过渡。

       <div>
         transition: property duration timing-function delay;
         transition-property	指定CSS属性的name，transition效果
         transition-duration	transition效果需要指定多少秒或毫秒才能完成
         transition-timing-function	指定transition效果的转速曲线
         transition-delay	定义transition效果开始的时候
       </div>
       

    7. animation：动画。

    8. @media：媒体查询。

    9. 选择器：

       伪类：:before :after

       :first-child :last-child

       :nth-child :nth-of-type

    10. :first-child 和 first-of type 的区别：

        :first-child 选择器匹配其父元素中的第一个子元素。:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。

        **p:first-of-type **是所以特定类型 p 的第一个子元素；只要是该类型元素的第一个就行了，不要求是是第一个子元素了。

2. 熟悉 js 作用域、原型、事件轮询机制、闭包等原理；

js 作用域

• 首先，作用域是变量起作用的一个范围。

• 作用：用来隔绝变量，防止命名冲突。

• js 作用域的分类：

  • 全局作用域：全局代码就是一个全局作用域。
  • 局部作用域：也被称为函数作用域。
  • 块级作用域：es6 新增块级作用域就是一个大括号，并且变量要使用 let/const 进行定义才能生效。

• 作用域产生的条件和销毁：

  • 代码定义的时候就会产生。
  • 代码执行完毕销毁的是变量对象而不是作用域。
  • 作用域从代码定义的时候就会产生，除非关闭程序才会销毁。

• 作用域的实现是变量对象：

  • 变量对象存在于执行上下文环境中，只有生成执行上下文的时候，变量对象才会被激活，只有激活变量对象，才能访问当前作用域的属性和方法。
  • 变量对象分为全局变量对象和局部变量对象
    • 全局变量对象：window。
    • 局部变量对象
  • 变量对象：
    • 首先包含形参和实参。
    • 扫描定义的函数，并将函数作为名值对储存在函数变量对象的属性中，如果变量对象中有同名，则直接覆盖。
    • 扫描定义的变量，保存在变量对象中，如果与变量对象中的形参和函数同名， 则直接不会影响到他们。

• 执行上下文环境

  js 代码在正式执行之前 js 引擎会先做一些准备工作：

  1. 创建执行上下文环境。
  2. 创建一个空的对象(执行上下文对象)，该对象用于收集当前作用域的：变量，函数，函数的参数。
  3. 确认this 的指向。
  4. 创建当前环境的作用域链。

• 作用域链

  • 作用域链就是查找变量的一个过程，首先会在自身的作用域中查找，如果有就使用，如果没有，去上级作用域中查找，一直查找到 window，如果还没有找到就会报错 xxx is not defined。

闭包

• 什么是闭包：
  • 函数嵌套函数，闭包是嵌套的内部函数。
  • 闭包是包含被引用变量的对象，在 chrome 开发者工具中查看，闭包是 closure 属性，他存在于 scope 属性中。
  • 闭包是一个意外存活的变量对象：
    • 证明：两个内部函数同时引入外部函数的同一个变量的时候，他们的闭包是同一个闭包。
• 闭包的形成条件：
  • 函数嵌套函数。
  • 内部函数引用外部函数的变量。
  • 外部函数调用。
• 闭包的产生时机：内部函数定义执行。
• 闭包的作用：
  • 延长局部变量起作用的范围。
  • 外部能够操作内部局部变量。
• 闭包的缺点
  • 容易造成内存泄漏，甚至造成内存溢出。
  • 解决方法让内部函数 = null。
• 闭包的应用
  • React 的高阶函数。
  • Vue 源码中的数据劫持，watcher 保存 node 节点以及保存更新函数。

事件轮询机制

• js 事件轮询机制：

  • js 中的代码分为初始化代码（同步代码）和异步回调代码（异步代码）
    • 初始化代码主要是一些设置定时器，绑定事件，发送 ajax 等。
    • 异步回调代码主要是：定时器的回调函数，事件处理回调函数，ajax 的回调函数。
  • 事件轮询中有个重要模块：
    • 事件管理模块
      1. 定时器管理模块。
      2. dom 事件管理模块。
      3. ajax 管理模块。
      4. MutationsObserver 管理模块。
    • 回调对列：
      • 宏任务：setTimeout，setInterval，ajax，dom事件监听等。
      • 微任务：promise，async/await，MutationsObserver 等。
  • js 代码的执行过程是：
    • 首先会执行同步代码，如果遇到了异步回调代码，会先将异步回调代码交给事件管理模块处理。
    • 当事件管理模块中的事件触发，将对应的回调函数注册到回调队列中。
    • 当初始化代码执行完毕的时候，会遍历回调队列中的回调函数执行。
  • 微任务和宏任务
    • 如果不将主线程中的代码视为第一宏任务，那么微任务优先于宏任务。
    • 执行过程是：
      • 会优先执行微任务中的所有回调，只有当清空微任务，并且执行完 GUI 渲染线程，才能执行宏任务中的第一个回调函数，每执行完一个宏任务中的回调都会检查微任务中是否有回调，如果有，则必须清空微任务，再继续执行宏任务中的第一个回调。

• nodejs 中的事件轮询

  • node 中的事件轮询一共分为六个阶段，

    • timers 计时器阶段。
    • I/O callback I/O 事件回调。
    • idle，prepare 准备阶段。
    • poll 轮询阶段。
    • check 检查阶段。
    • close callbacks 关闭阶段。

  • 他们会按照顺序反复执行，每当进入一个阶段的时候，会遍历其中的回调函数依次执行，直到该阶段清空，达到系统最大上限才会进入下一个阶段进行执行。

  • 最重要的有三个阶段：

    • timer 计时器阶段：执行 setTimeout 和 setInterval 回调。

    • poll 轮询阶段，执行 I/O 回调，处理事件轮询中的事件。

      • poll阶段会存在两种情况：

        1. 如果 poll 阶段为空：如果check阶段或者是timer阶段有回调函数，则会进入下一个阶段继续执行。

        2. 如果不为空，则会在此阶段等待回调函数添加。

           如果 poll 中有回调。则遍历执行，只到清空或者达到最大上限。

    • check 阶段，此阶段执行 setImmediate。

• node 中还有一个特殊的process.nextTick，它不属于以上的所有阶段，在每个阶段完成后，如果存在nextTick 队列，则会清空回调中的所有回调，这个回调又优于所有的微任务。

原型

1. 总：

   • 我们所说的原型，说的是两个属性：
     1. 每一个函数都拥有一个显示原型属性prototype。
     2. 每一个对象都拥有一个隐式原型属性__proto__。

2. 分：

   1. 显示原型属性：

      1. 显示原型属性存在于函数中，当然__箭头函数__是没有显示原型对象的。
      2. 显示原型在函数创建的时候就会产生，默认是__指向__的是一个Object实例对象。
      3. 里面有一个constructor属性，指向的是拥有这个显示原型的函数。

   2. 隐式原型属性：

      1. 所有的对象都拥有隐式原型属性__proto__。
      2. 这个__proto__指向的就是这个对象的构造函数的显示原型对象。
      3. 所以说构造函数的显示原型对象和这个构造函数的隐式原型对象指向的是同一个对象，这也是他们的联系。

   3. 特殊情况：

      1. 所有的函数都是由Function构造调用得到的函数对象，每一个函数除了拥有显示原型属性之外，也会拥有一个隐式原型属性__proto__。

      2. Function的隐式原型属性__proto__会指向的是它本身的prototype属性。这条线是作者自己指定的。

      3. Object 的显示原型对象prototype的__proto__为 null。

      4. js中由C语言创建的内容有：

         1. Object
         2. Function
         3. Function.prototype

      5. 由作者自己创建的四条线：

         1. Function.prototype = Function.__proto__

            目的：函数的所有公共方法都存在Function.prototype，所以为了使得Function能访问到这些方法，就必须指这条线。

         2. Object的隐式原型属性和Function的显示原型属性，指向的是同一个对象。

            目的：同上。

         3. Function.prototype = Object.prototype

            目的：为了讲原型对象串联起来。

         4. Object.prototype.__proto__ = null

            目的：为了使得原型链有终点。

   4. 原型链

      1. 作用就是查找对象中的属性的一种规则。
      2. 规则：
         1. 首先在自身上查找属性，如果有则直接返回值。
         2. 没有则沿着隐式原型属性__proto__往上查找。
         3. 一直到Object.prototype.__proto__由于他的值是 null，所以会返回 undefined。

   5. 原型的作用：

      1. 被同一个构造函数调用的多个实例对象共有的属性和方法，实现原型链继承。
      2. vue 中的全局事件总线，通过给Vue的显示原型对象添加一个$bus对象，内部包含了$on,$emit,$once,$off等方法，由于组件实例的隐式原型对象的隐式原型对象指向的是Vue的显示原型对象，所以能够在任意的组件中使用$on,$emit,$once,$off方法。
      3. vue 中可以给 vue 原型对象添加方法，所有的组件都能够使用。

3. 熟悉 ES6 语法标准 promise，async/await 异步方案，箭头函数等

Promise思路：

• Promise是一个异步编程的解决方案，避免了地狱回调的书写方式。

• Promise是一个构造函数，需要实例化调用：

  • new Promise()后面需要传入一个回调函数，回调函数默认传入两个参数，一个是resolve，另一个是reject。
  • new Promise默认会返回一个成功的promise，结果是undefined。
  • 如果在回调中调用了resolve，则表示该promise对象是成功状态的，结果是resolve()中传入的参数。
  • 如果在回调中调用了reject，则表示该promise对象是失败状态的，结果是reject中的参数。
  • 如果new Promise中抛出了错误，则返回的promise对象也是失败的，失败的原因就是错误的原因。

• Promise的对象一共有三种状态：

  • pending：无状态，便是promise对象是初始化状态，或者还未完成。
  • resolved/fulfilled：表示promise为已经完成的状态。
  • rejected：表示Promise是失败的状态。
  • promise的状态只能改变一次。

• Promise上的原型方法

  • then：默认会返回一个 promise 对象。
    • 返回成功的 promise：
      • then 函数返回其他值。
      • then 返回成功的 promise 对象。
    • 返回失败的 promise：
      • 函数出错。
      • 返回失败的 promise 对象。
    • 穿透：返回上一个 promise 的结构和状态。
  • catch
    • 是 then 的一个语法糖，相当于第一个回调没有传入，只传入第二个回调函数。

• Promise的静态方法

  • all:

    • 传入一个或者多个promise对象。
    • 如果所有的promise都返回成功，则会返回成功，如果有一个返回失败则返回失败。
    • 如果成功，则promise的结果是一个数组，数组中是所有 promise 的结果。
    • 如果失败，则promise的结果是失败的那个promise的原因。

  • allSettled

    • 总是返回成功的promise。

    • promise的结果总会是一个数组，数组中是一个个对象，对象中有 status，和 value（成功）/reason（失败）。

      var promise1 = new Promise(function(resolve,reject){
               
        setTimeout(function(){
               
          reject('promise1')
        },2000)
      })
      			
      var promise2 = new Promise(function(resolve,reject){
               
        setTimeout(function(){
               
          resolve('promise2')
        },3000)
      })
       
      var promise3 = Promise.resolve('promise3')
       
      var promise4 = Promise.reject(