音乐播放器项目，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 执行
复制代码