前端自学笔记 - 第三篇(完整链路思想/createJs/vue+js平滑滚动)

长期更新前端自学笔记，欢迎关注

• 前端自学笔记 - 第一篇(nginx/flutter/后台系统/vuepress博客）
• 前端自学笔记 - 第二篇(vuePress自动部署 & 后台项目自学)

1、完整链路的思想

做者文章连接

我在淘宝作前端的这三年 — 第二年：

ps: 做者的文章有三篇，涉及第一至第三年。我是看了快半个多小时，收益匪浅。建议你们花上一点时间好好看看

最大收获-完整链路思想

不管是职业发展，事业选择，仍是生活的小事，是否值当的评判标准能够加上一条：完整链路。

好比：这个项目赚钱，而后不断迭代，赚更多的钱，再迭代。。。循环下去。这就是个好的链路，是一个完整的闭环。

而坏的链路是：产品原型就行不通，硬把项目开发完，很显然项目不赚钱，迭代后仍是不赚钱，慢慢就不了了之了，还落得一地鸡毛。

预判将来多了一个标准

你可能会想，这个有什么，不就是鸡汤嘛。

其实否则，他的做用更大体如今事情发生以前，体如今未雨绸缪。当咱们作决策的时候，是须要综合各方信息，并结合将来的走势综合去判断。

有了完整联络的思想，能够把将来窜起来。若是这个链路是通的，说明这个方案（或者想法。。）的可行性比较高。若是初期链路预想都不通，那是否去作去执行，就要打上大大的问号。

完整链路-我的应用的栗子

我最近也用在本身身上

1. 早睡早起就是个好习惯。以前我都是12点睡，8点起。如今改成11点睡，7点起。早上反而有2个左右时间学习或者作其余事情的时间。这个早睡早起的习惯，就比以前更可持续。
2. 再好比，前端各类技术，先学那个，后学哪一个。有了完整链路思想，就简单了。固然是目前最重要，并且对于后期的发展更有利的技术。（目前就是下面提到的动效createJs技术）。就不会乱学一通，跟无头苍蝇同样。
3. 再举个栗子吧：本身作饭也是个很好的链路。饭作得好吃，就不喜欢去外面吃了。以后手艺变的更好，吃的花样也就愈来愈多，可持续的很。
   （ps: 作了几个礼拜的饭，确实以为外面的饭菜愈来愈难吃了）

2、canvas动效框架createJs

使用教程连接

CreateJS入门 -- 注释详细到爆炸（My Style）

官网API

心得

公司偏动效开发，而热门产品的动效使用的正是createJs技术。本身也很快要开发相似产品，相关的技术也要学起来，做为储备。

经过两三个早上的学习，createJs学起来仍是比canvas简单，毕竟他跟vue框架同样是封装好的，调取api便可。

本次学习createJS不一样以往，以前主要是跟着别人的思路走：要么是纯教程或者视频。而跟着别人走，虽然看似节省时间，但对于技术的总体脉络会比较片面，只是掌握了教材中教的技术而已。

此次主要是看官方的文档，再去整理笔记，不断消化主要的api。这种学习方式比上面的效率反而更高，学习方式也是可持续的。

固然这种学习方法也是有前提的，最好是官网文档比较齐全，入门教容易的，太难的仍是其余的方法吧。

3、vue+js: 预览图随着滚动条平滑移动

技术要点

1. 产品需求很简单，只是预览图可以拖动就行。想着顺便作一个随着滚动条移动的效果，这样体验会更好。
2. 技术难点：

• 在mounted中获取全局以及局部滚动条的高度
• 由于是在vue项目中操做dom，且不使用jQuery的状况下。要让滚动条平滑移动，这里采用的是网上分段的方法，而后递归去递增或者递减。
• 涉及到向上和向下滚动，滚动的临界点，若是快速上下滚动，会发生抖动。我是加了锁，并且把临界点隔开几像素来避免。
• 为了让滚动条始终保持在底部，能够采用：scrollTop=scrollHeight-clientHeight

代码参考

<template>
    <div class="content" ref='mobileRef'> // 固定高度
        <div class='content-scroll' ></div>
    </div>
</template>

<script>
    data () {
        return {
            once: true
        }
    },
    mounted() {
        // 监听页面内div元素滚动条
        // this.$refs.mobileRef.addEventListener('scroll', ()=>{
        //         console.log('scrollHeight', this.$refs.mobileRef.scrollHeight)
        //         if(this.form.backgroundImg) {
        //             this.$refs.mobileRef.scrollTop = this.$refs.mobileRef.scrollHeight 
        //         }
        //         console.log(" scroll " + this.$refs.mobileRef.scrollTop)
        // }, false)
        this.$nextTick(function () {
            window.addEventListener('scroll', this.onScroll) // 监听滚动条
        })
    },
    methods: {
        onScroll () {
            let that = this
            let scrolled = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动条srcollTop
            let step = ''
            if(this.form.backgroundImg) {
                let divHeight =  that.$refs.mobileRef.scrollHeight // 左侧元素的滚动条高度
                let divClient = that.$refs.mobileRef.clientHeight // 滚动条自己的高度
                step =  divHeight/50  // 平滑滚动，设置了50，后面设置定时器，每10秒变化一次
                if(scrolled <705 && this.once == false ) {  // once锁必定要是全局的，不能设置在方法onScroll中
                    smoothUp()
                } else if(scrolled >710 &&  this.once == true) { // 为了造成互斥效果，两边都须要判断scrolled的高度，以及互斥锁
                    smoothDown()
                }
         
                function smoothDown() {

                    if(that.$refs.mobileRef.scrollTop <divHeight-divClient) { // divHeight-divClient 就是srcollTOP的最大高度
                        that.$refs.mobileRef.scrollTop += step
                        // 递归，会一直调用，直到return false .递归的出口是：that.$refs.mobileRef.scrollTop =divHeight-divClient
                        setTimeout(smoothDown, 10)                         
                    } else {
                        setTimeout(()=>{  // 锁设置了定时器，主要是为了防止scrolled 在710的节点出现快速上下滑动出现的抖动行为
                            that.once = false
                        }, 200 )
                    }
                }
                function smoothUp() {
                    if(that.$refs.mobileRef.scrollTop > 0) {
                        that.$refs.mobileRef.scrollTop -= step
                        setTimeout(smoothUp, 10) // 递归的出口是：that.$refs.mobileRef.scrollTop = 0
                    } else {
                        setTimeout(()=>{
                            that.once = true
                        }, 200 )
                    }
                }
            } 
        }
    }

</script>