ES6 Module + Class 项目实战代码

众所周知，ES6之前是没有class语法的，其实很多开发人员都一直说，js不需要类似于java中的类，但是我感觉，class是不能少的，而且很重要，因为它极大的改善了代码的复用性，前端面向对象思想更加依赖于class这个目前看起来会越来越重要的语法，而且如果配合module，你可能会越来越感觉js越来越像java语法模式了，不过有一点需要注意，如果不同页面需要在方法中写入的代码不同，那么这个用起来就不那么舒服了。。。ok，废话不多说，来点项目实战干货

解决的问题：前端封装iscroll.js，解决手机端滚动条不触发问题
1.封装module的js文件
2.定义iscrollObj对象，用constructor给对象定义一个构造函数，用于实例化对象
3.给对象定义相应的方法，用于功能的实现
4.export导出对象

class iscrollObj {
    constructor(obj,myScroll) {
        this.obj = obj;
        this.myScroll = myScroll
    }
    loaded(obj = this.obj,myScroll = this.myScroll) {
        myScroll = new IScroll(obj, {
            scrollbars: false, //有滚动条
            mouseWheel: true, //允许滑轮滚动
            fadeScrollbars: true, //滚动时显示滚动条，默认影藏，并且是淡出淡入效果
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true
        });
        myScroll.on('scrollEnd', function() {
            debugger
            console.log(myScroll.maxScrollY) // 获取滚动条最大高度
            console.log(myScroll.y) // 获取滚动条当前位置
            console.log('-----------------------------------------------------------')
            if (myScroll.y < myScroll.maxScrollY || myScroll.y == myScroll.maxScrollY) {
                console.log('到底了')
                myScroll.refresh()
            }
            
        });
    }
    iScrollClick() {
        if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent)) return false;
        if (/Chrome/i.test(navigator.userAgent)) return (/Android/i.test(navigator.userAgent));
        if (/Silk/i.test(navigator.userAgent)) return false;
        if (/Android/i.test(navigator.userAgent)) {
            var s = navigator.userAgent.substr(navigator.userAgent.indexOf('Android') + 8, 3);
            return parseFloat(s[0] + s[3]) < 44 ? false : true
        }
    }
}
export{
    iscrollObj,
}

二.引用此js文件，实例化对象并调用方法
<

script type="module" async>
        let myScroll    
        import {iscrollObj} from  '__PUBLIC__/js/esMould/iscroll_method.js'  // 引入js文件
        let iscroll= new iscrollObj('.deteilBottom',myScroll)
        $(document).ready(function () {
            iscroll.loaded()  // 根据需要，是不是需要在页面初始化调用方法
        })