内容简介：如何构建单页WEB应用
简单来说，是因为单页应用具有组件化，复用性，易于维护等多方面优点，场景主要在控制台应用，管理后台等等，当然通过服务器渲染做成网站应用的也有。
Gmail、Evernote、Trello，Teambition…都是单页应用的成功案例，拥有更好的用户体验，对单页应用来说模块化的开发和设计显得相当重要。
SPA历史
首先单页应用，我首先想到的是ExtJS，重量级的UI组件，开发者基本上不需要写HTML代码，全部通过new Component的方式，来展示UI，构建应用。
后来随着移动互联网的兴起，很多应用慢慢开始尝试做web本地应用（单页应用，完全在webview中运行），通过Phonegap， Cordova 最终发布到Android Market，Apple Store，让SPA大行其道。最早的比如 Sencha Touch
， Jquery Mobile
，以及现在的 ionic
等等。
现在有了 Angular
， EmberJS
， Backbone
， Vuejs
， ReactJS
……, 选择适合的Framework 使得我们构建单页应用变的更简单，更高效。
如何构建SPA应用？
我们通过三点来重点说明如何构建：
- 模块化
- 状态管理
- 程序构建
模块化
Single Page， 顾名思义，就是单一页面，一个HTML，程序之间的切换通过直接或间接操作DOM来实现。
抛开单页，我们在开发多页webapp的时候，经常性的会看到页面引入大量script标签：
<script src="http://your-domain/jquery.js"></script> <script src="http://your-domain/utils.js"></script> <script src="http://your-domain/app.js"></script> ......
这么写有什么不好么？不好的地方在于：
- 应用大量的script，相当于发起N次网络请求，增加网络负担；
- 由于JS并没有命名空间的概念，引入多个script，很容易造成命名空间冲突，导致代码出现问题，很难及时定位。
- 代码很难复用，维护成本高。
通过SPA，我们将代码模块化、组件化，充分做到代码复用，我们不再在程序中通过script来引入另外一个组件，而是通过CMD、AMD， CommonJS 方式来组织代码。
例如一个view中需要引用Alert组件，只需在JS中：
import Alert from 'path/to/Alert.js'; // 使用 Alert.show();
是不是很方便？
这里推荐大家使用 Browserify
或者 Webpack
来模块化你的组件，他们配合Babel，让我们写ES6的语法，享受代码的简洁性。
状态管理
当我们的单页应用慢慢变的大起来，我们通过直接修改DOM，很容易出错，也很容易造成性能问题，也很难将逻辑与UI进行分离，代码又成了一团糟，此时人们发明了程序组件的状态化，通过动态更改State来改变UI，而不是直接操作DOM。让程序变得更加健壮，而且更易于测试。
常见State管理，比较有名的是Flux，也有非常流行的，受Flux启发的 Redux
， Vuex
等等。
程序构建
当我们在开发SPA程序，如何做到代码更易于调试，如何通过热加载来加快程序开发，在程序开发完毕，如何将代码合并，压缩，如何将代码分片异步加载……。好在现在已经有了很多成熟的 工具 帮我们完成这一系列的动作。
常见的有： Grunt
， Gulp
， Webpack
。
Grunt， Gulp都是基于任务式的，可以很灵活的通过编程方式来操作构建行为，区别在于Grunt任务配置项之多也常常被人诟病，较臃肿，配置一个任务，轻轻松松几百行…
Gulp相比Grunt更有设计感，易于学习，核心设计基于Unix流的概念，通过管道连接，前面输出结果作为后面的输入，遵循代码优于配置策略，维护Gulp更像是写代码。
相比Gulp&Grunt，他们更像是一个工具，而Webpack是模块化方案。
- Webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
- 能被模块化的不仅仅是JS ，所有的静态资源，例如css，图片等都能模块化。
- 开发便捷，能替代部分 Grunt/Gulp 的工作，比如打包、压缩混淆、CSS预编译、图片转base64等等。
总结
现在我们可以构建我们的SPA程序了，通过：
- 通过将程序模块化，让组件分离，便于复用；
- 然后通过状态管理，间接改变程序状态（State），而不是修改DOM，来动态更新UI；
- 程序构建，将组件化的程序打包，压缩，预编译…，然后部署上线。
完美～
SPA的boilerplate， 请到github查看源代码：
- 通过vuejs1.0 & vuex构建SPA： vue-spa-boilerplate ；
- 通过vuejs2.0 & vuex构建SPA： vue2.0-spa-boilerplate ；
- 通过reactjs & redux构建SPA： react-spa-boilerplate
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
