项目产出及思考个人项目的亮点/难点登录态的开发 cookie、session、Token、JWT及对应的登录态机制 C

个人做过的项目，其中的一些技术点/亮点/难点在这里分享出来

项目心得，也是日常开发需要注意的地方：

每一小步（小环节）都要调试，无论这一步多细，都要在写完代码后对“源头”所有的情况进行测试，并把“输出”所有的情况记录起来，交给下一小步当作“源头”去调试。千万不要积攒到很大的步骤才去调试，那个时候排错会很痛苦的 ┭┮﹏┭┮

登录态的开发

cookie、session、Token、JWT及对应的登录态机制

Canvas

HTML系列 -- Canvas

自适应布局

CSS系列 -- 自适应布局

懒加载优化

监听滚动条滑动事件我们需要监听滚动条滑动事件，获取当前滚动条所处的位置到顶部的距离

window.addEventListener('scroll', handle); // 设置监听器
function handle() {
    console.log(document.documentElement.scrollTop||document.body.scrollTop);
}

监听触底事件
网络请求新添数据

在一个列表里，由很多盒子层叠形成，采用懒加载优化可以加快首次进入该页面的加载速度

刚进入页面时，只加载20张图片
通过监听触底事件再请求服务端数据库获取20张图片然后拼接起来如何监听触底事件：
方法一：对 scrollTop + windowHeight 和 scrollHeight 比较

lazyload();//首次加载别忘了显示图片
window.addEventListener('scroll', lazyload); // 监听滑动条滑动
function lazyload() {
    var scrollTop = document.documentElement.scrollTop //当前屏幕顶部到滚动条顶部的距离
    var clientHeight = document.documentElement.clientHeight //屏幕可视区的高度
    var scrollHeight = document.documentElement.scrollHeight //滚动条的总高度
    if(scrollTop + windowHeight + 50 == scrollHeight){ 
        /*开始请求加载图片，可以先预留50px出来*/
    }
}

方法二：利用DOM 元素的 getBoundingClientRect API 获取其所处到滚动条顶部的距离

img[i]（将要加载的图片）.getBoundingClientRect().top < document.documentElement.clientHeight

需要优化的点 —— 节流

window.addEventListener('scroll', throttle(lazyload,200)); // 200ms内只触发一次

// 节流函数
function throttle(fn, interval) {
    let flag = true; //节流开关
    return function(...args) {
        let context = this;
        if (!flag) return; // interval毫秒内开关处于未打开状态，直接跳过
        flag = false; // 走到这里表示开关是打开的，可以执行动作，进入后立即关闭开关
        setTimeout(() => {
            fn.apply(context, args); // 执行动作
            flag = true; // 打开开关
        }, interval); // interval毫秒后打开开关
    };
};

其他关于图片加载的详见浏览器系列 -- 优化网页图片加载

基于锚点思想同步分类栏和滚动条

1. 点击左侧分类栏，右侧滚动条同步

直接调用 API 控制滚动条位置

// web端
window.scrollTo(0,document.body.scrollHeight)
// 小程序端
wx.pageScrollTo({
  scrollTop: 0,
  duration: 300
})

2. 滑动右侧滚动条，左侧分类栏同步

需要实时监听滑动条所处位置
对此位置进行判断：所处哪个范围内
然后点亮左侧分类栏

// web端
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll  = showTop

// 小程序端
bindscroll: function(e){
    console.log(e.scrollTop)
}

需要优化的点：频繁地修改data里面的值

方法是：节流

参考文章 JavaScript系列 -- 防抖、节流

自定义组件及优化

自定义dialog对话框组件、popup弹出层组件。当时需要做项目的时候需要用到这两个，可以引入别人开源的组件。但后来了解到其中的原理，觉得没必要引入其他组件（而且很耗空间，感觉引入其他很多用不到的东西），这玩意实现也没那么难，不就一张半透明的遮罩层上面叠加一个白色盒子嘛[笑哭]。于是就自己动手做了。

做完发现，有问题。如果在盒子里面写按钮，会发生“点击冒泡”的问题，这就很尴尬[笑哭]。于是乎开始寻找解决问题的方案。

其中一个方案就是把 bindtap 换成 catchtap