音樂播放器項目，gulp+面向對象+異步回調+fs模塊模擬數據庫項目

源碼下載地址：github.com/liyuanzhe-c… 今天使用jquery按照單對象面向對象思想作了音樂播放器；

只有一個player對象， 各類功能在該對象上面進行擴展，

核心， 除了主入口index.js， 每個js文件都這麼寫 禁止使用異步async， await， 避免index.js 先於依賴模塊加載出來

(function ($, root) {
    function test(data, root){
    // 只使用 data 和 root 這兩個對象進行開發，
    // data 內存入數據
    // root 內存方法，變量等
    }
    // 使用這種方法對接口進行暴露
    root.test = test 
})(window.$, window.player|| (window.player={}))

複製代碼

全部非主入口文件，暴露藉口都是 function( data數據， player對象 )， 這樣在後期維護和擴展上會更加的方便和容易。

開發使用less + es6；

作了初步的響應式，能適應ipad，手機，電腦， 畢竟就是練手項目，重點還在js；

先後端數據交互使用 fetch 和 $.ajax,

經過concurrently 作了先後端的連載，

//後端package.json 文件
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm run gulp --prefix music-player-gulp",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }
複製代碼

//
//前端package.json 文件
"scripts": {
    "gulp": "gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
複製代碼

後端使用express， fs模塊，持久層沒有使用數據庫， 而是採用json文件形式

前端點贊 -> ajax -> 後端讀取前端發過來的內容 -> promise -> writeFile -> 寫入成功 -> 執行promise.resolve -> promise -> 讀取文件 -> 讀取成功 -> promise.resolve -> 發送給前端 -> 前端渲染頁面。

// 數據庫的模擬方法
router.post('/changeLike', (req, res) => {
    console.log(req.body);
    res.header("Access-Control-Allow-Origin", "*");
    new Promise((resolve, reject) => {
    //接收數據， 寫入並存儲文件
        fs.writeFile('./fakeDB/onlineMP3-1.json', req.body.data, { encoding: 'utf-8' }, (err, data) => {
            err ? reject(err) : resolve(data);
        })
    }).then((data) => {
    //寫入完成以後，再讀取文件，再發送給前端
        fs.readFile('./fakeDB/onlineMP3-1.json', { encoding: 'utf-8' }, (err, data) => {
            err ? console.log(err) : res.send(data);
        })
    }).catch((err) => {
        console.log(err)
    })
})
複製代碼

前端項目js文件夾信息

AudioManager: AudioManager {audio: audio, status: true}  //播放器對象
bindEvent: ƒ bindEvent(data, root) //事件綁定對象
blurImg: ƒ blurImg(img, ele)  //高斯模糊未使用 由於canvas禁止跨域， 只能在同源策略下使用
disk: {timer: 5, deg: 2096.999999999811, startRotate: ƒ, stopRotate: ƒ, changeSong: ƒ} //對旋轉光盤的操做
nowIndex: 0  // 當前播放的歌曲索引
render: ƒ (data, root) // 渲染頁面
複製代碼

gulp會常常抽風，修改路徑名之類的會不停報錯，個人文件拿到手以後建議按照以下步驟操做

* gulp在絕對路徑發生改變時會抽風， 不是我寫的bug
 * 能夠
 * 1.刪除除了src和gulpfile。package.json以外的全部文件夾，
 * 更名備份 package.json文件夾， 
 * 重新npm init 再吧package.json的 包依賴 和 script 複製回去 ，
 * 再 npm i
 * 再 gulp 執行
複製代碼