开发组件库使用到的知识点

1.require.context: 一个webpack的api，通过执行require.context函数获取特定上下文。主要用来实现自动化导入模块。接受的参数     a.路径：string   b.是否遍历子目录:boolean  c.regExp:匹配文件的正则

important Vue from 'vue'
const componentFiles = require.context('./', true, /index\.js/)
componentFiles.keys().map((val) => {
  if (!/\.\/index/.test(val)) {
     Vue.use(componentFiles(val).default)
   }
 })

2.getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置,该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height;

1. rectObject.top：元素上边到视窗上边的距离;

2. rectObject.right：元素右边到视窗左边的距离;

3. rectObject.bottom：元素下边到视窗上边的距离;

4. rectObject.left：元素左边到视窗左边的距离;

5. rectObject.width：是元素自身的宽

3.cssText: 本质就是获取HTML的Style属性值Chrom中，可以减少赋值操作，将多次赋值变为一次赋值。增加了性能。你赋给他们什么值，（他们就返回什么值。IE当中需要格式化）

document.getElementById("d1").style.cssText

4.vueJS的编译器模块可以单独使用用来解析vue模板

import { compile } from 'vue/dist/vue.js'
const component = compile(templateHtml)

5.vue.extend构造组件必须需要$mounted挂在到一个实例上，vue.component构建的组件，不需要手动$mounted挂载。component是extend的亲民版，但在实现某些特殊需求的时候，就需要用到extend，如alert组件，你肯定希望alert可以动态插入到body中。另外vue.use的时候，会自动调用install方法

6.可以在css中设置pointer-events： none来阻止点击事件

7.

new Date('2019', '12', '17').toLocaleDateString()
// "2020/1/17"
new Date('2019', '12', '0').toLocaleDateString()
// "2019/12/31"
new Date('2019', '12', '0').toLocaleDateString()
// "2019/12/31"
new Date(2019, 12, 0).toLocaleDateString()
// "2019/12/31"
new Date(2019).toLocaleDateString()
// "1970/1/1"
new Date(0).toLocaleDateString()
// "1970/1/1"
new Date(2019, 11).toLocaleDateString()
// "2019/12/1"
new Date(2019, 11, 0).toLocaleDateString()
// "2019/11/30"

8.移动端点击事件：@click.stop.prevent  @touchend

9.calander组件点击单元格事件，全部交委托给父组件。至于数据，在数据循环的时候，绑定到data-value上，需要使用时用target.dataset['value']去读取

10. window.getComputedStyle（Ele）:动态返回Ele的style描述

const height = window.getComputedStyle(this.$refs.a)['height']

11.setInterval属于全局的属性，一旦设置了，要记得在组件销毁周期的时候清除掉。

12.给元素添加touchstart,touchmove,touchend事件

el.addEventListener('touchstart', e => {
    const ele= e.target || e.srcElement
    const event = e.changedTouches[0]
    console.log(event.screenX)
    console.log(event.screenY)
})

el.addEventListener('touchmove', e => {
    const ele= e.target || e.srcElement
    const event = e.changedTouches[0]
    console.log(event.screenX)
    console.log(event.screenY)
})

el.addEventListener('touchend', e => {
    const ele= e.target || e.srcElement
    const event = e.changedTouches[0]
    console.log(event.screenX)
    console.log(event.screenY)
})

13.pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术),

       auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同

       none——元素永远不会成为鼠标事件的target（目标）

14.Ele.scrollIntoView(boolean): 在移动端点击input标签时。在安卓机下键盘会遮挡页面底部内容，当点击键盘时，焦点所在的input才会出现在视区里。在IOS不存在此问题（在软键盘弹出时，页面会自动顶上去），存在滑动的页面里也不存在该问题。参数：

        boolean: true 元素的顶端将和其所在滚动区的可视区域的顶端对齐 

        booleam: false 元素的底端将和其所在滚动区的可视区域的底端对齐

15.用Mutationobserver去监测文档对象树的变化

     let config = {
        childList: true, // 观察目标节点的子节点的新增和删除

        attributes: true, //  观察目标节点的属性节点,新增一个属性，删除一个属性，或者属性值发生变化
        .
        .
        .
        .
        .
        .
          
     }
      const mutationCallback = mutationsList => {
        for (let mutation of mutationsList) {
          let type = mutation.type
          switch (type) {
            case 'childList':
              console.log('.......')
              break
            default:
              break
          }
        }
      }
      let observer = new MutationObserver(mutationCallback)
      observer.observe(this.$refs.a, config)  // 给元素设置监听

      observer.disconnect()  // 停止观察