聽，知天下、明事理（喜馬拉雅App）

沉睡的名偵探發表於2018-07-25
APP

聽，知天下、明事理（喜馬拉雅App）

聽，知天下，明事理

前言

由於熱衷於邊聽有聲小說邊擼程式碼，所以我乾脆自摸出了一個喜馬拉雅App，邊聽電臺邊完成電臺功能的感覺有一絲絲觸動，這個專案完成僅僅30%，功能仍在實現，往後的需求我再一一新增，客官們，不要急，莫催.... 八月初完成大部分功能

主要技術點：vue、vue-router、axios

專案結構

  • 主體結構

聽，知天下、明事理（喜馬拉雅App）
元件的基本思路是層層疊加，類似樹根狀模型，最底部的元件都是一些固定不變的或者組合其他小元件而成的包裹元件，很多元件由於沒有深層考慮，其實還可以再劃分的，但是資料和樣式等基本格局已經固定，牽一而動全身，不敢隨意修改，以後有時間還是需要繼續完善的

  • 資料流通
    聽，知天下、明事理（喜馬拉雅App）
    第一種方案是為了以後解決跨域和耦合問題引入，由於資料儲存本地：這裡採用第二種方案，使用axios獲取資料投放到主要路由，同時向外引出$http變數
import axios from 'axios'
import Vue from 'vue';
axios.create({
    timeout:3000,   //  超時控制
    baseURL: "http://localhost:8080/" //本地路徑
});
axios.interceptors.response.use(response => {
    return response.data
}, err => {
    if (err && err.response) {
      switch (err.response.status) {... // 這裡是一些選擇case語句...
      }
    } else {
      err.message = "連線到伺服器失敗"
    }
    message.err(err.message)
      return Promise.resolve(err.response)
})
Vue.prototype.$http = axios
複製程式碼
  • 路由巢狀

由這裡我要鄭重提問一下，當swiper-item是一個很大的頁面元件時，你們覺得有必要為每個swiper-item設定路由麼？？

由於喜馬拉雅是一個大型App，目測是一個一級路由的專案，但是為了以後的維護，我仍然使用二級路由,初步路由，很多引數未帶.... 唉

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/Home',
    component: Home,
    children: [
      {
        path: '/Home/classify',
        component: classify
      },
      {
        path: '/Home/recommend',
        component: recommend
      },
      {
        path: '/Home/member',
        component: member
      },
      {
        path: '/Home/directSeeding',
        component: directSeeding
      },
      {
        path: '/Home/radio',
        component: Radio
      }
    ]
  },
  {
    path: '/listen',
    component: Listen
  },
  {
    path: '/find',
    component: find
  },
  {
    path: '/personal',
    component: personal
  }
]
複製程式碼

bug解析

任何程式碼都會遇到bug,沒有你想不到的bug,只有你敲不出的程式。遲早有一天，我會寫出一個報錯彈出道歉的編譯器,從此世間無bug...
咳~，扯遠了，迴歸現實。下面是我現階段所遇到的bug和一些容易忽略的問題，在這裡一一解說：

  • swiper無法滑動問題： 這是一個很古老很low的問題，當然也是要提的嘛，解決的方案記住三點就行：
    • 包含關係：.selfClass > .swiper-wrapper > .swiper-item （.swiper-wrapper和.swiper-item 一定不能寫錯）
    • .selfClass 必須有一個固定值（如果橫向滑動，則width一定固定，如果縱向滑動，則height一定不動）（如果DOM樹發生變化，記住，增加observer:true,observeParents:true})
    • 時機很關鍵：new swiper()會掃描swiper-wrapper內部swiper-slide的個數和自身的長寬樣式，所以你需要DOM結構初始化後才能使用，vue 一般在鉤子函式ready()或者之後初始化，react一般在render或者之後初始化...
  • better-scroll無法滑動問題
    • 跟上面一樣一樣的，元件必須包含一個子元素才能滑動... 類似中間人的感覺
  • 元件劃分問題
    這也是工作中常用到的問題，究竟一個頁面中的一個區塊如何劃分才能儘可能的複用、易於維護理解、合理搭配，這是你實現這個元件的第一步，亦或者最重要的一步。我就遇到過，一個模組：我分成三塊元件，然後實現，然後過了倆天，又遇到了用一個類似的元件，但是有三個不同，這時候想到使用slot,可是如果我還遇到了類似的情況，那我的slot不是要佔據一堆位置了麼？？ 好好的一個元件為什麼需要插入那麼多slot，我以後怎麼除錯？？這複用同一個元件我還要增加一大堆slot判斷，累死人嘞，還不如重新寫一個元件,唉....
    • 一定要有全域性觀，這個模組的元件到底該不該拆、到底怎麼拆、拆完後資料傳遞是不是很複雜、值不值的拆、如何正確使用slot....這要從全域性考慮，這個元件哪些地方使用到了，各有不同、針對不同點使用元件還是插槽
    • 感覺： 或許這樣說不是很嚴肅，但是這真的很重要，這需要很長時間的練習，習慣養成。沒法直觀表達
  • img標籤如果不寫src或者不賦值，會顯示一些莫名其妙的樣式和效果，
    • 原因未知... 所以，記住，為了防止圖片載入不出來，最好快取一張預設圖片或者iconfont來預存位置，當然，增加alt優化seo也可以嘛，這使你看起來更加細心
  • tempalte巢狀tempalte，增加key報錯
    • 巢狀使用template，因為template是不會被渲染的（類似小程式block），所以我們通常使用它用於迴圈或者判斷，但是你迴圈template時，若增加一個key，系統會爆出一個完全看不懂的錯誤..., so，別使用key繫結template,當然，也沒有理由做這種事...
  • vue中data() {return {hello: null/undefined}} 這種初始化最好別使用
    • 無論這個資料最終是什麼型別，都不要使用null、undefined來初始化。我使用了大量的null用於初始化資料（經常寫es5的老毛病了），結果到最後，傳遞給子元件列印時都會顯示null並報錯，但是頁面顯示效果卻正常輸出資料....這是我無法理解的bug，最後，我初始化{},不會報錯，正常輸出....你們知道這是為什麼？？
  • 元件之間傳遞方法最好使用統一介面：EventBus
    • 如果是小型專案，這個可以忽略
    • 大型專案，元件之間父子聯絡，資料狀態隨時更新改變，如果採用單一的父子通訊，到最後，除錯修改非常非常難，牽一而動全身,簡直了...
    • 優點： 簡化應用元件間的通訊；解耦事件的傳送者和接收者；避免複雜和容易出錯的依賴和生命週期的問題
  • 路由必須要配置跟路由 "/" 重定向後，才能顯示頁面，不然什麼都不會顯示..... 賊尷尬的bug..

結語

感謝每一個觀看的路客，不求點贊，不求打賞，只希望您能得到一點點收穫，謝謝...

最後：原始碼再此，拿走不謝

相關文章