API

IntersectionObserver API

平时的业务中经常有，判断dom出现在视口的做一些效果或者打点的需求。

实现方案

• 1 通过在scroll事件中监听dom距离视口的距离
• 2 通过IntersectionObserver观测

const dom = document.getElementById('id');
//scroll执行频率过高，浪费性能
window.onScroll = function (){
    const elementIsInView = elementIsInViewport(dom);
}
//
function elementIsInViewport(e){
    if(!e) return false;
    //获取元素四边距离视口的距离
    let {top,left,bottom,right} = e.getBoundingClientReact();
    return (
        top>=0 
        && left>=0 
        && bottom <=(window.innerHeight || document.documentElement.clientHeight)
        && right <=(window.innerWidth || document.documentElement.clientWidth)
    )
}

    var container = document.getElementById("container")
    let io = new IntersectionObserver((entries,observer)=>{
    console.log(entries[0].isIntersecting);//元素进入可实区域
    });
    //观测dom
    io.observe(container);
    //取消观测
    io.unobserve(container);

模块化部分

• CommonJS
• AMD
• CMD
• UMD
• ES6

CommonJS

commonJS主要应用在nodejs中，主要通过四个变量module.exports、exports、glabal和require。

• 每个文件就是一个模块，每个模块都有独立的作用域，内部所有变量、函数对其它模块都是不可见的
• 可以通过module.exports或者exports对模块进行导出, module代表当前模块
• 可以在另一个文件中通过require进行导入 -每个模块可以多次加载但是只会在第一次加载时运行，然后会被缓存供后续加载时使用（主要通过module中的一个字段来控制）

AMD

AMD 推崇依赖前置。 AMD | 速度快 | 会浪费资源 | 预先加载所有的依赖，直到使用的时候才执行。 AMD的出现主要是为了解决前端模块化的问题，（CommonJS不支持浏览器）。 AMD并不能直接跑到浏览器，实现的工具（requireJS）.

//定义模块
define('moduleA',function(){
    let a = [1,2,3,4,5];
    return{
        a : a.reverse();
    }
});

//使用
require('moduleA',function(moduleA){
    console.log(moduleA.a);
})

//配置模块路径

require.config({
    paths:{
        moduleA:'./js/moduleA'
    }
})

CMD

• CMD 推崇依赖就近。 CMD | 只有真正需要才加载依赖 | 性能较差 | 直到使用的时候才定义依赖
• SeaJS 在推广过程中对模块定义的规范化产出。

UMD

• 1.先判断是否支持Node.js模块格式（exports是否存在），存在则使用Node.js模块格式。
• 2.再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。
• 3.前两个都不存在，则将模块公开到全局（window或global）。-