ES6 Module + Class 项目实战代码

2021-04-29 14:54:42 阅读：201 来源： 互联网

标签：ES6 obj myScroll Module js 滚动条 userAgent navigator 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()  // 根据需要，是不是需要在页面初始化调用方法
        })
    </script>

标签：ES6,obj,myScroll,Module,js,滚动条,userAgent,navigator,Class
来源： https://blog.51cto.com/u_14846736/2742829

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6 Module + Class 项目实战代码