网站自主维护系统与提高用户体验的框架文档。

背景

纵览各种大型网站(如下图)可发现，所属同一网站下的不同网页，其内容存在大量相同或相似的展示性元素。中国蓬勃发展的网商每年增长速度呈现爆炸式，由此带来网站网页的制作量、网页展示性元素的变更量和变更速度也随之呈现爆炸性增长趋势。这些类似网站的制作若每个都从头做起，很难为公司带来效益，尤其网商频繁变化的商品展示，所涉及的展示元素的变更等工作，若这些工作也需要网站开发公司不断维护的话将成为公司业务发展的巨大拖累，甚至将公司拖垮、拖死。因此开发一套模板式、框架式、来解决此问题。许多购物网站每天进行更新部分物品商品信息，如果客户访问该网站，会每次从服务器取出所有该页面的商品信息，包括图片名字之类，但是其中的物品并不是所有都是全新的，既有新的商品，也有以前的商品。如果将以前访问过的商品信息保存在客户的磁盘中，这次他访问本页面，页面中的某个商品信息没有更新，那么直接在磁盘中将本商品信息取出来，填到页面上，已更新的商品信息就从服务器上获得，这样就会节约的带宽。

1.需求概述

1.1网站的及网页生成的模版化；

1.2模块化视图数据的楔入模版

1.3采用版本号减少带宽。

2.需求分析

2.1网页展示性数据模版化

2.1.1 之前的html文件，里面放的就是视图的元素，所以此视图就会写死在代码，而且大量重复，难维护。
2.1.2 现在采用数据填入模版来填入页面
html存储的是将来在此插入的位置的编号.比如导航栏和轮播

视图的数据存储在xml文件中。比如以导航栏的数据为例

导航栏的模版是

然后将xml文件中的数据解析(根据标签名称)，在解析模版字符串(根据某些字符，解析出变量)，将将视图数据填入到模版中，生成的字符串，在填入到html文件中该放的位置，就完成了页面的完成。

2.2xml文件存储方式

用xml文件存储，用户可以更改其数据，如果将来有时间的话可以实现自动生成xml文件的程序，将来用户(比如网商)就可以只往里面添加数据，也可以由数据库得到数据。就可以更改页面。减少网站公司的维护工作。

2.3页面模版化

采用模版化，将来网站公司会积累很多样板，有各种各样的样板，会使网站越来越更好看，好用。

2.5xml文件的每个部分会有一个版本号，可以实现局部刷新

2.6采用本地存储，增加用户体验

如果用户这次进入该页面，会从后台得到页面的所有信息，第二次访问的话，如果又从后台得到所有数据的话，会增加带宽，降低用户体验。如果将两次访问重复的数据保存在浏览器中，第二次访问时，仅仅向后台请求页面改变的部分，这样会大大增加用户体验。浏览器有个localStroage,大约有10M空间，是保存在硬盘中。

3概要设计

3.1数据填充模版（导航栏为例）

3.1.1解析模版

其中的一些符号代表特别的意思，比如for(){}rof，等字符代表里面的内容有重复的，{},将来需要用里面代表将来在xml文件找数据，再填入。
3.1.2解析xml

按照的到数据放到对应的模版中，最后得到html语句。
3.2减少带宽
每个xml文件会有两种版本号，一个是整个xml文件的版本（大版本），一个是各个视图部分的版本号（小版本）。采用ajax技术进行。
基本的思想如下:
根据xml的名字来在locage取处包含相同内容的key
a. 如果没有则发送空字符串（说明第一次）
则解析xml文件，并将xml的数据发送到前端，。然后再localage存放其键值对，拼接key为[page]-[tagid]@[version]格式，并将其对象存入。并且填充页面.
b. 有的话，按照将相关的locastroage的id信息（key）发送到后台，后台先比较xml版本和localage的大版本号，一，如果相同，说明从localstroage取数据，二，如果不同的话，则每个都进行xml和key中的版本进行比较， 其中xml中的tagId的版本号不同，则发送xml的tagId的数据和版本，相同的则不发送东西，然后到前端的数据先进行解析，解析成key的格式，存到locaage中，最后从localstrage取出该页面的数据填充。

4.代码

具体的代码:链接：https://pan.baidu.com/s/1c2baXQ4 密码：306i