转载

一个人的团队（一）

作者 @ 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 可以获取服务器的数据然后再渲染到页面上，这个方法虽然交互很友好，不需要重新刷新页面就可以看到新的内容；但是有一点不好，那就是当点击导航后，浏览器地址栏的链接不会有变化，用户完全不知道现在在哪个页面。还好我们有 HTML5 的 History Api 来解决这个问题，当然低版本的IE浏览器也可以通过 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()