如何构建单页WEB应用

栏目: 编程工具 · 发布时间: 6年前

内容简介:如何构建单页WEB应用

简单来说,是因为单页应用具有组件化,复用性,易于维护等多方面优点,场景主要在控制台应用,管理后台等等,当然通过服务器渲染做成网站应用的也有。

Gmail、Evernote、Trello,Teambition…都是单页应用的成功案例,拥有更好的用户体验,对单页应用来说模块化的开发和设计显得相当重要。

SPA历史

首先单页应用,我首先想到的是ExtJS,重量级的UI组件,开发者基本上不需要写HTML代码,全部通过new Component的方式,来展示UI,构建应用。

后来随着移动互联网的兴起,很多应用慢慢开始尝试做web本地应用(单页应用,完全在webview中运行),通过Phonegap, Cordova 最终发布到Android Market,Apple Store,让SPA大行其道。最早的比如 Sencha TouchJquery Mobile ,以及现在的 ionic 等等。

现在有了 AngularEmberJSBackboneVuejsReactJS ……, 选择适合的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>
......

这么写有什么不好么?不好的地方在于:

  1. 应用大量的script,相当于发起N次网络请求,增加网络负担;
  2. 由于JS并没有命名空间的概念,引入多个script,很容易造成命名空间冲突,导致代码出现问题,很难及时定位。
  3. 代码很难复用,维护成本高。

通过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启发的 ReduxVuex 等等。

程序构建

当我们在开发SPA程序,如何做到代码更易于调试,如何通过热加载来加快程序开发,在程序开发完毕,如何将代码合并,压缩,如何将代码分片异步加载……。好在现在已经有了很多成熟的 工具 帮我们完成这一系列的动作。

常见的有: GruntGulpWebpack

Grunt, Gulp都是基于任务式的,可以很灵活的通过编程方式来操作构建行为,区别在于Grunt任务配置项之多也常常被人诟病,较臃肿,配置一个任务,轻轻松松几百行…

Gulp相比Grunt更有设计感,易于学习,核心设计基于Unix流的概念,通过管道连接,前面输出结果作为后面的输入,遵循代码优于配置策略,维护Gulp更像是写代码。

相比Gulp&Grunt,他们更像是一个工具,而Webpack是模块化方案。

  1. Webpack 遵循commonJS 的形式,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
  2. 能被模块化的不仅仅是JS ,所有的静态资源,例如css,图片等都能模块化。
  3. 开发便捷,能替代部分 Grunt/Gulp 的工作,比如打包、压缩混淆、CSS预编译、图片转base64等等。

总结

现在我们可以构建我们的SPA程序了,通过:

  1. 通过将程序模块化,让组件分离,便于复用;
  2. 然后通过状态管理,间接改变程序状态(State),而不是修改DOM,来动态更新UI;
  3. 程序构建,将组件化的程序打包,压缩,预编译…,然后部署上线。

完美~

SPA的boilerplate, 请到github查看源代码:

  1. 通过vuejs1.0 & vuex构建SPA: vue-spa-boilerplate
  2. 通过vuejs2.0 & vuex构建SPA: vue2.0-spa-boilerplate
  3. 通过reactjs & redux构建SPA: react-spa-boilerplate

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms in Java, Part 5

Algorithms in Java, Part 5

Robert Sedgewick / Addison-Wesley Professional / 2003-7-25 / USD 54.99

Algorithms in Java, Third Edition, Part 5: Graph Algorithms is the second book in Sedgewick's thoroughly revised and rewritten series. The first book, Parts 1-4, addresses fundamental algorithms, data......一起来看看 《Algorithms in Java, Part 5》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具