单页面应用范文.docVIP

　　 　　第一篇单页面应用:一种SPA（单页面应用）架构 　　（如果对SPA概念不清楚的同学可以先自行了解相关概念） 　　平时喜欢做点小页面来玩玩，并且一直采用单页面应用（Single Page Application）的方式来进行开发。这种开发方式是在之前一年做的一个创业项目的经验和思考，一直想写篇博客来总结一下。 　　个人认为单页面应用的优势相当明显 　　前后端职责分离，架构清晰前端进行交互逻辑，后端负责数据处理。 　　前后端单独开发、单独测试。 　　良好的交互体验，前端进行的是局部渲染。避免了不必要的跳转和重复渲染。 　　当然，SPA也有它自身的缺点，例如不利于搜索引擎优化等等，这些问题也有其相应的解决方案。 　　下面要介绍的这种方式可以说是一种模式或者工作流，和前端使用什么框架无关，也和后端使用什么语言、数据库无关。不能说是The Best Practice，我相信经过更多人的讨论和思考会有A Better Practice。:) 　　概览 　　下图展示了这种模式的整个前后端及各自的主要组成 　　看起来有点复杂，接下来会仔细地对上面每一个部分进行解释。看完本文，就应该能理解上图中的各部件之间的交互流程。 　　前端架构 　　把上图的前端部分单独抽出来进行研究 　　前端中大致分为四种类型的模块 　　components前端UI组件 　　services前端数据缓存和操作层 　　databus封装一系列Ajax操作，和后端进行数据交互的部件 　　common/utils以上组件的共用部件，可复用的函数、数据等 　　components 　　component指的是页面上的一个可复用UI交互单元，例如一个博客的评论功能 　　我们可以把博客评论做为一个组件，这个组件有自己的结构（html），外观（css），交互逻辑（js），所以我们可以单独做一个叫comment的component，由以下文件组成 　　comment.html 　　comment.css 　　comment.js 　　（每个component可以想象成一个工程，甚至可以有自己的README、测试等） 　　components tree 　　一个component可以依赖另外一个component，这时候它们是父子关系；component之间也可以互相组合，它们就是兄弟关系。最后的结果就类似DOM tree，component可以组成components tree。 　　例如，现在要给这个博客添加两个功能 　　显示评论回复。 　　鼠标放到评论或者回复的用户头像上可以显示用户名片。 　　我们构建两个组件，reply和user-info-card。因为每个comment都要有自己的回复列表，所以comment组件是依赖于reply组件的，comment和reply组件是嵌套关系。 　　而user-info-card可以出现在comment或者reply当中，并且为了以后让user-info-card复用性更强，它应该不属于任何一个组件，它和其他组件是组合关系。所以我们就得到一个简单的componenets tree 　　components之间的通信 　　怎么可以做到鼠标放到评论和回复的用户头像上显示名片呢？这其实牵涉到组件之间是如何进行通信的问题。 　　最佳的方式就是使用事件机制，所有组件之间可以通过一个叫eventbus通用组件进行信息的交互。所以，要做到上述功能 　　user-info-card可以在eventbus监听一个user-info-card:show的事件。 　　而当鼠标放到comment和reply组件的头像上的时候，组件可以使用eventbus触发user-info-card:show事件。 　　user-info-card: 　　vareventbus=require(eventbus) 　　eventbus.on(user-info-card:show,function(user){//显示用户名片}) 　　comment or reply: 　　vareventbus=require(eventbus)$avatar.on(mouseover,function(event){ 　　eventbus.emit(user-info-card:show,userData) 　　}) 　　components之间用事件进行通信的优势在于 　　组件之间没有强的依赖，组件之间被解耦。 　　组件之间可以单独开发、单独测试。数据和事件都可以简单的进行伪造进行测试（mocking）。 　　总结component之间有嵌套和组合的关系，构成components tree；component之间通过事件进行信息、数据的交换。 　　services 　　compo