数据结构

栈

栈是一种特殊的列表，栈内的元素只能通过列表的一端访问，这一端称为栈顶。想象一下，我们平常在饭馆见到的一摞盘子就是现实世界常见的栈的例子，只能从最上面取盘子，盘子洗干净后，也只能放在最上面。栈被称为一种后入先出的数据结构。是一种高效的数据结构，因为数据只能在栈顶添加或删除，所以这样的操作很快。 使用条件：

只要数据的保存满足后入先出或先进后出的原理，都优先考虑使用栈

介绍项目

• 豆瓣FM桌面版：https://github.com/abigaleypc/musicer
• 该项目主要是一款电豆瓣FM的桌面应用，我将豆瓣FMweb端 (http://douban.fm/) 的功能移植到桌面应用中。该应用使用跨平台框架可兼容Mac和Windows。
• 架构思路：前后端的架构和选型分析；前后端分离与接入层接口封装，前端与接入层规范对接；数据状态管理；登录态保持与抓包过程。

• 功能模块：主要模块有当前频道，歌词滚动，微信分享，切换频道，点赞，删除歌词，用户登录等功能。前端主要用了react去组件化各个模块，包括组件之间的数据流通。

  • 当前歌曲，歌词滚动，微信分享这几个模块都需要知道当前歌曲的ID，我会将当前歌曲的一些必要信息存在一个state里面比如songID。切换歌曲模块主要触发songID更改的一个action,当歌曲被更改时，刚上面提到的内容接收到新的状态也会被更新。其中歌词滚动这一模块需要不断监听当前时间并做滚动处理，我的做法类似节流的方式，每隔0.3s就做一个更新，主要是从歌词一开始设定当前时间为0，豆瓣FM获取到的歌曲它是有带每句歌词对应的时间，我是将我们设定的时间不停累加，插在处于对应歌词之间的地方，如果0.3s之后还在当前两句歌词范围内就不滚动。

    面试过程中提到歌词滚动的优化，可在每获取一句歌词时再读取一次下一句歌词的时间，再将settimeout的时间戳设为两句歌词的间隔时间。

  • 点赞和删除歌曲会检测当前登录态，如果当前未登录，就会直接跳转到登录界面。如有已经登录，就会带上登录态去做一些请求

  • 登录态，在调用豆瓣FM的所有接口我都没在前端直接调用，而是做了一个NODE的接入层，获取或者修改信息都是通过node接入层再到了豆瓣FM官网。

Angular

Angular是怎么实现双向绑定的？

脏检查机制：

• Angular 在解析视图模板时, 会找出其中的数据绑定, 以及对应的更新DOM的方式
• 然后通过 $scope.$watch 将这一绑定注册到当前 $scope 上下文的更新响应操作里。
• $digest 每一个循环里会从根作用域开始遍历所有的 $scope 注册的 $watch 响应操作
• 当发现值有变化时，更新DOM数据。
• 这其中是通过一个dirty为true或false去更新数据。

参考: Angular沉思录（一）数据绑定

angular的路由是怎么实现的？

通过更新hash值

跨域

手写一个JSONP的实现

1
2
3
4
5
6

<script>
  callback(res){
    console.log(res);
  }
</script>
<script src="xxx/test.js?callback=callback"></script>

1
2

// test.js
callback(data)

DOM 和 BOM

• 文档对象模型(DOM)：提供访问和操作网页内容的方法和接口
• 浏览器对象模型(BOM)：提供与浏览器交互的方法和接口

arguments

arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。

转换为一个真正的Array：

1
2
3
4
5
6

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
var args = [...arguments]; // 扩展运算符方法
// ES2015
const args = Array.from(arguments);

关于 promise 异步请求方法

面对浏览器，我们经常需要考虑一些性能的问题，除了让用户提高带宽，我们还需要通过缓存一些文件来提高用户体验。浏览器的缓存即是HTTP缓存，我们打开浏览器时总需要与远程服务器做交互，如果服务器允许的话，浏览器首次访问网站时会把成功的请求结果拦截下来并存储在内存或硬盘上，以便下次访问时快速获取。零零散散看过许多HTTP缓存的文章，所以这次想梳理一下脉络和自己动手模拟一下服务器看看我们可以如何指控浏览器缓存我们的文件。

DEMO

学习过程中做了一个小demo模拟缓存过程，可以在https://github.com/abigaleypc/express-cache.git中查看源码。

续上一篇搭建音乐播放器桌面应用–前端篇后，这次讲述给界面提供数据包的后端扮演者–Node接入层。

Node在项目中扮演的是后端，但准确地说Node这并不是后端的角色，真正后端角色是豆瓣FM暴露的API。如下图

中间这一服务层即是本文的重点：对接口的挖取与封装。豆瓣FM官方并没对外提供API手册，尽管豆瓣提供了开放平台, 但与我们登录官方网站进行授权与操作走的并不是同一通道。

关于移动端适配方案

方案一：根据设计稿切分单位像素

js脚本控制根元素字体。

1
2

let html = document.getElementsByTagName('html')[0];
html.style.fontSize = (window.innerWidth/750) +'px';

以上750是根据设计稿尺寸设定的，这是为了方便CSS设定尺寸。

原理：将屏幕尺寸宽(window.innerWidth)分成750份，而CSS中我们可以根据每一份设对应的Rem值。

强大的JavaScript似乎无所不能了，除了PC端的单页面实现，可以用RN或weex完成兼容Android端和iOS端的APP，也可以用Electron搭建兼容Mac或Windows的桌面应用了。

这篇文章主要讲一个播放器的从零开始的实现过程，包括前后端的架构和选型分析；采用前后端分离，前后端如何分工合作；数据的获取与存储；如何抓包。

源码

Musicer

最终效果

前端架构

• React: 基于虚拟DOM实现单向响应式数据流的UI框架。
• Redux: 提供单向，可预测的数据流。

• Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架。

  Read more »