一个人的团队（一） #5

zwhu · 2015-09-23T17:05:31Z

一个人的团队（一）

作者 @zwhu

原文章 @github

知乎上有人问「比一个人吃火锅更寂寞的是什么？」我想回答「一个人写前后端，却要装成一个团队。」

我们在前期开发的过程中，更多是一个人单打独斗，因为是自己一个人，可以把代码写的很随意，也不用注意什么工程化的东西；但作为一个有追求的程序员，不能为未来的自己挖坑，坚决走前端工程化的路线。

虽然我是一个人，但我是一个团队。

所以这是我自己在开发过程中总结的一些知识，慢慢会写成一个系列吧。「单页应用」作为系列的第一篇。

单页应用

定义

对于单页应用我的定义是：在浏览器地址栏输入地址之后，服务器获取到HTML文档，之后所有页面的呈现都在这份HTML文档之上进行。

为什么是单页应用

因为这是流行啊。即使我司对性能啥的完全没有任何要求，我还是强行用了单页应用，自己不努力，没人帮我学。具体有什么好处还是坏处，如果自己没写过单页应用，即使别人说一大堆好处坏处你也还是不懂。（这是吐槽，不用理会）

从头开始实现 SPA

在浏览器地址栏输入地址之后，会从服务器端下载HTML文档并开始渲染。（这个谁能看懂，谁看吧，反正我看不懂）在渲染的过程中，解析 script 标签，外部引入的话，就发起请求获取 JavaScript 文件。
页面渲染完成，之后所有网站的内容都会在这个页面上呈现，所有的操作也只会在这个页面进行。

假设我们在浏览器输入 http://xxxx.com 的时候，服务端会返回 index.html 文档如下:

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>demo</title>
      </head>
      <body>
        <div id="app">
           <nav id="nav"></nav>
           <div id="container"></div>
        </div>
        <script src="/jquery.js"></script>
        <script src="/app.js"></script>
      </body>
    </html>

这里插一句为什么把 script 标签放到最后？浏览器在渲染的时候会被 script 标签阻塞，影响页面的首次渲染。可能会因为 JavaScript 文件过大，等待加载时间过长（如果是外部引入），页面一直是空白。

我们在构建单页面应用时，大部分的内容通过 JavaScript 生成。在 app.js 中，我们会生成一个导航:

var $nav = $('#nav')

var sLi = ['home','about','article','history'].reduce(function(pre, n) {
    return pre + '<li><a href="/' + n + '">' + n + '</a></li>';
}, '');

var sUl = '<ul>' + sLi + '</ul>';

$nav.html(sUl);

生成如下图的导航条

之后我们想根据导航生成不同的页面内容：

var $container = $('#container')

$('#nav ul li').on('click', function() {
  $container.html('这是' + $(this).find('a').text() + '区域哦')
  return false;
})

然而现实中，我们的页面多数是根据后端返回的数据来渲染，例如我们的后端提供了一个接口 /api/home，通过这个接口可以获得数据 ["今", "天", "天", "气", "不", "错", "啊"]，当我们进入 home 页面的时候页面上会结合通过 api 接口获取来的数据展示新的页面：

$('#nav ul li').on('click', function() {
  var route = $(this).find('a').text()
  if('home' === route) {
    $.get('/api/home', function(data) {
      $container.html(data.join('') + '!')
    })
  } else {
    $container.html('这是' + route + '区域哦')
  }
  return false;
})

单页应用的重点 ---- 路由

这是我刚接触单页应用时候比较头疼的地方。

没有路由，我就不知道你在哪儿。 --- by 我要某上头条君

通过 Ajax 可以获取服务器的数据然后再渲染到页面上，这个方法虽然交互很友好，不需要重新刷新页面就可以看到新的内容；但是有一点不好，那就是当点击导航后，浏览器地址栏的链接不会有变化，用户完全不知道现在在哪个页面。

不过这里有个知识点是需要大家理解的，当我们在浏览器地址栏输入地址或者通过其他页面的外链跳转到这个页面时，整个页面都会刷新一遍，从服务器获取 HTML 文档渲染。在 JavaScript 中，可以通过 location.href 修改地址，但是这个方法和浏览器输入地址的效果是相同的，那有没有办法只修改浏览器的地址栏，而不刷新整个页面呢？

还好我们有 HTML5 的 History Api 来解决这个问题，当然低版本的IE浏览器也可以通过 location.hash 的方法实现，hash 来解决的方法不在这里深究了。毕竟低版本浏览器已经没必要支持了。

$('#nav ul li').on('click', function() {
  var route = $(this).find('a').text()
  history.pushState({ title: route }, route, route)
  show()
  return false;
})

function show() {
  var route = window.location.pathname
  if('/home' === route) {
    $.get('/api/home', function(data) {
      $container.html(data.join('') + '!')
    })
  } else {
    $container.html('这是' + route + '区域哦')
  }
}

在点击导航之后，会将当前的路由体现在浏览器的地址中。不过，浏览器地址变化之后，点击前进后退，页面并不会有什么变化。我们可以通过对 window 对象绑定 popstate 方法来解决

    window.addEventListener("popstate", show);

传统的网站，用户通常输入具体 url 来进入相关页面，例如：我们进入 GitHub 自己的主页是输入的是 github.com/user；但是单页面应用，我们的页面都是在一个空的 html文档中通过 JavaScript 生成的页面，所以服务器不能通过url来返回具体的页面（其实是可以的，同构，不在这里展开），那么应该怎么做呢？

对于服务器来说，不用管那么多，当用户输入 url 之后，只要 url 符合一定的规则(例如：请求头的 accept 是 'text/html' 或者所有非 /api/ 开头的 url 等)，都返回默认的 index.html。JavaScript 可以通过当前的路由来渲染：

 function show() {
  var route = window.location.pathname
  if('/home' === route) {
    $.get('/api/home', function(data) {
      $container.html(data.join('') + '!')
    })
  } else if('/' !== route) {
    $container.html('这是' + route + '区域哦')
  }
}

// 初始化的时候就调用
show()

结尾

到此为止，单页面的应用就算介绍完了。理解了单页面应用的原理，对于最近流行的 Angular， React， Vue 之类库或框架的才算刚刚开始。

如果觉得本文对你有帮助的话，就点个推荐呗。

预告

下一篇我会介绍一个人的团队（二）--- 神兵利器之 webpack 和 webpack-dev-server

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

一个人的团队（一） #5

一个人的团队（一） #5

zwhu commented Sep 23, 2015

一个人的团队（一） #5

一个人的团队（一） #5

Comments

zwhu commented Sep 23, 2015

一个人的团队（一）

单页应用

定义

为什么是单页应用

从头开始实现 SPA

单页应用的重点 ---- 路由

结尾

预告