前端自學筆記 - 第三篇(完整鏈路思想/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>