快速处理V7标准接口数据

文件结构

一个常规门户网站的文件结构大概如下(实际内容不多，一切简单为主)

-- webapp
  -- css              css资源
  -- images           图片资源
  -- js               js脚本
    -- lib            常用库、插件
    -- v7             v7接口相关脚本
    _config.js        全局配置，包括网站的接口地址，nav标签，测试系统切换等
    common.js         公共js，用来执行公共方法
    cssboot.js        css资源统一输出
  -- include          公共html内容
  index.html          首页
  subpage.html        二级页
  detail.html         详情页
  search-result.html  搜索结果列表
复制代码

各页面关系

首页进入其他页面方式及必要参数

二级页进入其他页面方式及必要参数

详情页进入其他页面方式及必要参数

搜索页进入其他页面及必要参数

注意点

1. 每个页面都用到的公共资源统一配置管理，顶部公共nav数据可灵活配置
2. 栏目数据可以复用，无需每个页面打开都获取一次，只需获取一次，通过sessionStorage存储栏目数据，其他页面直接调用即可，时效为回话周期
3. 数据和UI分离，考虑到不同项目的样式有所差异，整合的重点放在格式相同的数据层面，实现一套方法处理所有V7标准格式的数据
4. 根据不同的需求扩充完善数据处理方法，利用有限的数据尽可能多的实现各种需求
5. 配置层、工具层、业务层分离

v7栏目处理工具对外暴露的对象方法

getCategoryInfoFrmoGuid(guid[, type])  // 通过栏目guid获取该栏目对应的信息

    guid: 栏目guid（string）
    type: 栏目对应字段的信息，不传则返回该栏目所有信息（string）


getGuidFromName(name) //通过栏目中文名获取栏目guid

    name: 栏目名（string）


getGeneraltionsFromGuid(guid) //根据栏目guid获取其父栏目以上的数据

    guid: 栏目guid(string)
    

getRenderData(nameArr)  //根据配置的栏目数组生成对应的渲染数据，配合mustache使用

    nameArr: 配置栏目数组（Array）

复制代码

数据获取通用工具方法WebUtil

getData(options)  //获取数据通用方法，实际上就是骨架ajax的二次封装

    options: 获取数据的配置项，包括以下字段
       urlType： 请求求解类型
       接口请求参数的所有字段
       任何你需要用到的参数
       beforeRender: function(data,options){//do something} //渲染数据前处理函数
       render: function(data,options){//do something}  //渲染数据函数
       afterRender: function(data,options){//do something}  //渲染数据完成后处理函数
复制代码

获取数据配置项参数中的,需要传入接口类型urlType，通过该字段确认请求接口链接。 另外也需要传入对应接口的必要参数 三个渲染函数一般情况下只需要传一个render方法即可，另外两个阶段处理方法针对一些个性化栏目的特殊需求 任何你需要额外传入的参数都可以放进去，最终他们都会作为默认参数传递进你的渲染方法中